[HTML] Tạo context-menu

Standard

Bài viết mang tính lưu trữ, tiện cho việc sau này copy & paste. Dùng tag HTML mang tính đại khái thôi, chứ cái này thì có CSS và jQuery.

Ví dụ muốn tạo một cái nút là Quản lý, nhấn vô hiện ra cái menu có 2 mục là Viết bài mớiThoát tài khoản, như hình sau:

03-01-2013 01-08-57

Với điều kiện là nhấn ra ngoài thì menu đóng lại. Riêng cái nút Quản lý kia thì sẽ là đóng/mở menu tùy theo trạng thái hiện tại là gì.

___

Để đỡ phải căn tọa độ rắc rối, ta tạo một cái div bao hết cả cái nhóm nút Quản lý + menu.

<div id="loggedInNav">
	Quản lý
	<div id="loggedInMenu">
		<ul>
			<li>Đăng bài mới</li>
			<li>Thoát tài khoản</li>
		</ul>
	</div>
</div>

và đặt chút css cho đẹp đẽ, tùy nhu cầu, ví dụ như:

position: absolute;
right: 0px;

___

Về hành vi, xử lý cái cơ bản trước, đó là ẩn menu lúc ban đầu, và đóng/mở menu khi nhấn vô cái nút Quản lý:

$(document).ready(function() {
	$("#loggedInMenu").hide();

	$("#loggedInNav").click(function() {
		$("#loggedInMenu").slideToggle(300);
	});
});

Và cuối cùng:

$(document).mouseup(function(e) {
	if (!$("#loggedInNav").has(e.target).length
	&& !$("#loggedInNav").is(e.target)) {
		$("#loggedInMenu").slideUp(300);
	}
});

tức là e.tartget không phải cái tổ hợp xinh xắn của ta (tránh xung đột với sự kiện nhấn vào nút Quản lý), và e.target cũng không nằm trong cái tổ hợp xinh xắn ấy (nhấn ra ngoài).

___

Chúc mừng năm mới những ai quan tâm đến blog này

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s