針對Ztree的右鍵彈出選單（jquery.popupSmallMenu.js）

例子效果：

[img]http://dl2.iteye.com/upload/attachment/0100/1733/f1f93106-d46d-3aaa-825d-f7ab4570724e.png[/img]


右鍵選單方便好用的有很多，長用的為jquery contextMenu.
官網： http://www.trendskitchens.co.nz/jquery/contextmenu/
用法： $("table td").contextMenu("myMenu")
問題： 可以看出右鍵選單需要制定一個繫結的物件（table td）， 但zTree要繫結事件，還需要獲得每個節點的li，不是很好，它本身提供右鍵事件和右鍵選單（不是很好看）， 所以我們可以在右鍵事件位置下手， 自己仿照jquery ContextMenu.js 寫一個外掛（[b]jquery.popupSmallMenu.js[/b]）：

在ztree觸發右鍵事件時，彈出選單：

1.使用：
ztree 右鍵事件：
callback: {
onRightClick:OnRightClick
}

function OnRightClick(event, treeId, treeNode) {
ztree.selectNode(treeNode);
if(treeNode) {
//彈出選單
$("#menu").popupSmallMenu({
event : event,
onClickItem : function(item) {
chuli(treeNode,item);
}
});

}
}

Html：

<ul id="menu" class="small-menu">
<li class="edit"><a href="#">編輯</a></li>
<li class="cut"><a href="#">新增</a></li>
<li class="copy"><a href="#">刪除</a></li>

<li class="small-menu-separator"></li>
<li class="delete"><a href="#"><span class="icon icon-edit"></span>Zoom Out</a></li>
</ul>

CSS 樣式 仿照jquery ContextMenu：

.small-menu {
    position: absolute;
	width: 120px;
	z-index: 99999;
	border: solid 1px #CCC;
	background: #EEE;
	padding: 0px;
	margin: 0px;
	display: none;
}

.small-menu li {
   list-style: none;
	padding: 0px;
	margin: 0px;
}
.small-menu li A {
	color: #333;
	text-decoration: none;
	display: block;
	line-height: 20px;
	height: 20px;
	background-position: 6px center;
	background-repeat: no-repeat;
	outline: none;
	padding: 1px 5px;
	padding-left: 28px;
}

.small-menu li a:hover {
	color: #FFF;
	background-color: #3399FF;
}

.small-menu-separator {
    padding-bottom:0;
    border-bottom: 1px solid #DDD;
}

.small-menu LI.edit A { background-image: url(images/page_white_edit.png); }
.small-menu LI.cut A { background-image: url(images/cut.png); }
.small-menu LI.copy A { background-image: url(images/page_white_copy.png); }
.small-menu LI.paste A { background-image: url(images/page_white_paste.png); }
.small-menu LI.delete A { background-image: url(images/page_white_delete.png); }
.small-menu LI.quit A { background-image: url(images/door.png); }

/**
 * @description 
 * 		small popup menu.
 * @deprecated 
 * 		JQuery.js
 * @author Malt
 * @version 1.0
 * Date: 2013-05-22
 */
(function($,undefined){
	 $.fn.popupSmallMenu = function(options) {
	 	var $currMenu = $(this),
	 	defaultOptions = {
	 		event : null,
	 		onClickItem : null
	 	},
	 	options = $.extend(defaultOptions,options);

	 	var _smallMenu = {
	 		popupSmallMenu : function() {
	 			this._bindItemClick();
	 			this._bindMenuEvent();
	 			this._showMenu();
	 			return $currMenu;
	 		},
	 		_bindMenuEvent : function() {
	 			var thiz = this;
		 		$currMenu.hover(function(){ 	
				},function(){
					thiz._unBindItemClick();
					$currMenu.hide();
				});

				$currMenu.click(function(){
					thiz._unBindItemClick();
					$currMenu.hide();
				});
		 	},
		 	_showMenu : function() {
		 		if(!options.event) {
		 			alert('請傳入滑鼠事件');
		 		}
		 		$currMenu.css({
					top:options.event.clientY+"px",
					left:options.event.clientX+"px",
		            display:"block"
		        });
		 	},
		 	_bindItemClick : function() {
		 		$currMenu.find('li').each(function(index,obj){
 					var $li = $(obj);
	 				var itemIden = $li.attr('class');
	 				$li.bind('click',function(event){
	 					event.stopPropagation();
	 					if(options.onClickItem 
	 							&& typeof options.onClickItem === 'function') {
					 		options.onClickItem(itemIden);
					 	}
	 				});
 				});
		 	}
		 	,
		 	_unBindItemClick : function(){
		 		$currMenu.find('li').each(function(index,obj){
	 				$(obj).unbind();
	 			});
		 	}
	 	};

	 	return _smallMenu.popupSmallMenu();
	}
})(jQuery);