JQuery插件--右键菜单
一:浏览器兼容:IE,Firefox,Chrome,Safari,TT
二:js文件
// create by tony on 2009-04-22
// eg: $("#id").jsRightMenu({
// menuList:[{ menuName: "右键菜单", clickEvent: "divClick('click1')"}]
// });
jQuery.fn.extend({
jsRightMenu: function(options) {
options = $.extend({
menuList: []
}, options);
return this.each(function() {
if ($("#div_RightMenu", $(this)).size() == 0) {
var menuCount = options.menuList.length;
if (menuCount > 0) {
var divMenuList = "<div div_RightMenu\" class=\"div_RightMenu\">";
for (var i = 0; i < menuCount; i++) {
divMenuList += "<div class=\"divMenuItem\" onclick=\"" + options.menuList[i].clickEvent + "\" onmouseover=\"" + options.menuList[i].mouseoverEvent + "\" onmouseout=\"" + options.menuList[i].mouseoutEvent + "\">" + options.menuList[i].menuName + "</div>";
}
divMenuList += "</div>";
$(this).append(divMenuList);
var objM = $(".divMenuItem");
$("#div_RightMenu").hide();
objM.bind("mouseover", function() {
this.style.backgroundColor = "#316ac5";
this.style.paddingLeft = "30px";
});
objM.bind("mouseout", function() {
this.style.backgroundColor = '#EAEAEA';
});
}
}
this.oncontextmenu = function() {
var objMenu = $("#div_RightMenu");
if (objMenu.size() > 0) {
objMenu.hide();
var event = arguments[0] || window.event;
var clientX = event.clientX;
var clientY = event.clientY;
var redge = document.body.clientWidth - clientX;
var bedge = document.body.clientHeight - clientY;
var menu = objMenu.get(0);
var menuLeft = 0;
var menuTop = 0;
if (redge < menu.offsetWidth)
menuLeft = document.body.scrollLeft + clientX - menu.offsetWidth;
else
menuLeft = document.body.scrollLeft + clientX;
if (bedge < menu.offsetHeight)
menuTop = document.body.scrollTop + clientY - menu.offsetHeight;
else
menuTop = document.body.scrollTop + clientY;
objMenu.css({ top: menuTop + "px", left: menuLeft + "px" });
objMenu.show();
return false;
}
}
document.onclick = function() {
var objMenu = $("#div_RightMenu");
if (objMenu.size() > 0) objMenu.hide();
}
});
}
});
三:html
<div +id);
}
</script>
OK
一:浏览器兼容:IE,Firefox,Chrome,Safari,TT
二:js文件
// create by tony on 2009-04-22
// eg: $("#id").jsRightMenu({
// menuList:[{ menuName: "右键菜单", clickEvent: "divClick('click1')"}]
// });
jQuery.fn.extend({
jsRightMenu: function(options) {
options = $.extend({
menuList: []
}, options);
return this.each(function() {
if ($("#div_RightMenu", $(this)).size() == 0) {
var menuCount = options.menuList.length;
if (menuCount > 0) {
var divMenuList = "<div div_RightMenu\" class=\"div_RightMenu\">";
for (var i = 0; i < menuCount; i++) {
divMenuList += "<div class=\"divMenuItem\" onclick=\"" + options.menuList[i].clickEvent + "\" onmouseover=\"" + options.menuList[i].mouseoverEvent + "\" onmouseout=\"" + options.menuList[i].mouseoutEvent + "\">" + options.menuList[i].menuName + "</div>";
}
divMenuList += "</div>";
$(this).append(divMenuList);
var objM = $(".divMenuItem");
$("#div_RightMenu").hide();
objM.bind("mouseover", function() {
this.style.backgroundColor = "#316ac5";
this.style.paddingLeft = "30px";
});
objM.bind("mouseout", function() {
this.style.backgroundColor = '#EAEAEA';
});
}
}
this.oncontextmenu = function() {
var objMenu = $("#div_RightMenu");
if (objMenu.size() > 0) {
objMenu.hide();
var event = arguments[0] || window.event;
var clientX = event.clientX;
var clientY = event.clientY;
var redge = document.body.clientWidth - clientX;
var bedge = document.body.clientHeight - clientY;
var menu = objMenu.get(0);
var menuLeft = 0;
var menuTop = 0;
if (redge < menu.offsetWidth)
menuLeft = document.body.scrollLeft + clientX - menu.offsetWidth;
else
menuLeft = document.body.scrollLeft + clientX;
if (bedge < menu.offsetHeight)
menuTop = document.body.scrollTop + clientY - menu.offsetHeight;
else
menuTop = document.body.scrollTop + clientY;
objMenu.css({ top: menuTop + "px", left: menuLeft + "px" });
objMenu.show();
return false;
}
}
document.onclick = function() {
var objMenu = $("#div_RightMenu");
if (objMenu.size() > 0) objMenu.hide();
}
});
}
});
三:html
<div +id);
}
</script>
OK
- 上一篇 »windows下python管理右键菜单
- 下一篇 »JavaScript-右键菜单禁止/解除