JQuery---右键菜单版本一
今天，有点积级写了个JQuery右键菜单，版本一，以后有需要再优化出版本二，哈！，记录一下
jquery.rightMenu.js
;
/*
* feifei--rightMenu.1.0
*
which : right, //right middle left
menus:[
{
name:"name", //菜单名
click:null, ///点击事件
eventData:null, //传给点击事件的参数
}
]
<div id="RightMenu">
<ul>
<li>添加部门</li>
<li>编辑部门</li>
</ul>
</div>
*/
(function ($) {
$.rightMenu = function (box, options) {
var menuId = "RightMenu";
box = $(box);
var $menuBox = [];
box.bind("contextmenu", function () {
return false
});
var witchs = {
right:3,
middle:2,
left:1
}
box.mousedown(function (e) {
e.preventDefault();
e.stopPropagation();
if (e.which == witchs[options.which]) {
buildMenu(e);
$menuBox = $("#" + menuId);
setMenuEvent();
$menuBox.data("source", box);
}
});
function setMenuEvent() {
$menuBox.bind("contextmenu", function () {
return false
});
$(document).bind("click", _documentClick );
var $menuLi = $menuBox.find("li").hover(function () {
$(this).addClass("over");
}, function () {
$(this).removeClass("over");
});
$menuLi.each(function (i) {
var menu = options.menus[i];
if (menu.click) {
if(!menu.eventData) menu.eventData = {};
menu.eventData.source = box;
$(this).click(menu.eventData, menu.click);
$(this).click(menu.eventData, function(){
$menuBox.hide();
});
}
});
}
function buildMenu(e) {
var $menuBox = $("#" + menuId);
if ($menuBox.length) {
$menuBox.remove();
$(document).unbind("click", _documentClick);
}
$menuBox = $("<div/>").attr("id", menuId);
var $ul = $("<ul/>").appendTo($menuBox);
for (var i in options.menus) {
var menu = options.menus[i];
$("<li/>").appendTo($ul).html(menu.name);
}
var pointX = e.pageX + 15;
var pointY = e.pageY + 15;
$menuBox.css({left:pointX, top:pointY});
$("body").append($menuBox);
}
function _documentClick(e) {
var isHide1 = $(e.target).parents("#" + menuId).length;
var isHide2 = $(e.target).parents().andSelf().filter(box).length
if (!isHide1 && !isHide2) {
$menuBox.hide();
$(document).unbind("click", _documentClick);
}
}
};
$.fn.extend({
rightMenu:function (options) {
var _options = {which:3, menus:[]};
options = $.extend(_options, options);
this.each(function () {
new $.rightMenu(this, options);
});
return this;
}
});
})(jQuery);
rightMenu.css
#RightMenu *{margin:0px;padding:0px;}
#RightMenu {display: block; min-width: 130px; *width:130px; padding:1px; position:absolute; background-color:#555;line-height:20px; border-right: 1px solid;}
#RightMenu .clear{clear: both;}
#RightMenu ul,#RightMenu li{list-style-type:none;}
#RightMenu ul li{background-color: #eee; cursor: pointer; height: 24px; padding:2px 4px 0 4px; list-style: none; margin-bottom: 1px; font-family:宋体; font-size: 12px; line-height:20px;}
#RightMenu ul li.over{background-color: #DFDFDF;}
rightmenu.html
<body>
<button type="button" id="button1" data="1">button1</button>
<button type="button" id="button2" data="2">button2</button>
<!--
<div id="RightMenu">
<ul>
<li>添加部门</li>
<li>编辑部门</li>
</ul>
</div>
-->
<script>
function a(e) {
//e.data.data == "a"
alert(e.data.source.attr("data")); //source在rightMenu中建入，用记录当菜单是哪个源dom触发的
}
var menus = [
{name:"添加部门", click:a, eventData:{data:"a"}},
{name:"添加部门2", click:a, eventData:{data:"b"}}
]
$("button").rightMenu({menus:menus});
</script>
</body>