http://blog.csdn.net/xxb2008/article/details/8903131
;
/*
* feifei--rightMenu.1.1
说明:
增加了,通过js直接调用 rightMenuJs方法,显示菜单
*
*
which : right, //right middle left
menus:[
{
name:"name", //菜单名
click:null, ///点击事件
eventData:null, //传给点击事件的参数
}
]
<div id="RightMenu">
<ul>
<li>添加部门</li>
<li>编辑部门</li>
</ul>
</div>
*/
(function ($) {
var menuId = "RightMenu";
var documentClick = function () {
}
$.rightMenuJs = function (options) {
var $menuBox = [];
var _options = {data:{}, menus:[], left:0, top:0}
_options = $.extend(_options, options);
_buildMenu(_options);
$menuBox = $("#" + menuId);
setEvent();
setMenuEvent();
$menuBox.data("data", _options.data);
function setEvent() {
$(document).unbind("click", documentClick);
documentClick = _documentClick;
$(document).bind("click", documentClick);
}
function setMenuEvent() {
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.data = _options.data;
$(this).click(menu.eventData, menu.click);
$(this).click(menu.eventData, function () {
$menuBox.hide();
});
}
});
}
function _documentClick(e) {
var isHide1 = $(e.target).parents("#" + menuId).length;
if (!isHide1) {
$menuBox.hide();
$(document).unbind("click", documentClick);
}
}
}
$.rightMenu = function (box, options) {
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();
options.left = e.pageX;
options.top = e.pageY;
if (e.which == witchs[options.which]) {
_buildMenu(options);
$menuBox = $("#" + menuId);
$menuBox.bind("contextmenu", function () {
return false
});
setEvent();
setMenuEvent();
$menuBox.data("source", box);
}
});
function setEvent() {
$(document).unbind("click", documentClick);
documentClick = _documentClick;
$(document).bind("click", documentClick);
}
function setMenuEvent() {
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 _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);
}
}
};
function _buildMenu(options) {
var $menuBox = $("#" + menuId);
if ($menuBox.length) {
$menuBox.remove();
}
$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 = options.left + 15;
var pointY = options.top + 15;
$menuBox.css({left:pointX, top:pointY});
$("body").append($menuBox);
return $menuBox;
}
$.fn.extend({
rightMenu:function (options) {
var _options = {which:3, menus:[], left:0, top:0};
options = $.extend(_options, options);
this.each(function () {
new $.rightMenu(this, options);
});
return this;
}
});
})(jQuery);