针对Ztree的右键弹出菜单（jquery.popupSmallMenu.js）

例子效果：




右键菜单方便好用的有很多，长用的为jquery contextMenu.
官网： http://www.trendskitchens.co.nz/jquery/contextmenu/
用法： $("table td").contextMenu("myMenu")
问题： 可以看出右键菜单需要制定一个绑定的对象（table td）， 但zTree要绑定事件，还需要获得每个节点的li，不是很好，它本身提供右键事件和右键菜单（不是很好看）， 所以我们可以在右键事件位置下手， 自己仿照jquery ContextMenu.js 写一个插件（ jquery.popupSmallMenu.js）：

在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);