[color=blue][b]jQuery contextMenu[/b][/color]
[img]http://medialize.github.io/jQuery-contextMenu/demo.html[/img]
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
</div>
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
[color=blue][b]jquery 简短右键菜单 多浏览器兼容[/b][/color]
[url]http://www.jb51.net/article/21699.htm[/url]
$(function () {
document.oncontextmenu = function () {
return false;
}//屏蔽右键
document.onmousemove = mouseMove;//记录鼠标位置
});
var mx = 0, my = 0;
function mouseMove(ev) {
Ev = ev || window.event;
var mousePos = mouseCoords(Ev);
mx = mousePos.x;
my = mousePos.y;
}
function mouseCoords(ev) {
if (ev.pageX || ev.pageY) {
return{x: ev.pageX, y: ev.pageY};
}
return{x: ev.clientX, y: ev.clientY + $(document).scrollTop()};
}
$.fn.extend({RightMenu: function (id, options) {
options = $.extend({menuList: []}, options);
var menuCount = options.menuList.length;
if (!$("#" + id)[0]) {
var divMenuList = "<div id=\"" + id + "\" class=\"div_RightMenu\"><div><ul class='ico'>";
for (var i = 0; i < menuCount; i++) {
divMenuList += "<li class=\"RMli_" + options.menuList[i].menuclass + "\" onclick=\"" + options.menuList[i].clickEvent + "\">" + options.menuList[i].menuName + "</li>";
}
divMenuList += "</ul></div><div>";
$("body").append(divMenuList).find("#" + id).hide().find("li")
.bind("mouseover", function () {
$(this).addClass("RM_mouseover");
})
.bind("mouseout", function () {
$(this).removeClass("RM_mouseover");
});
$(document).click(function () {
$("#" + id).hide();
});
}
return this.each(function () {
this.oncontextmenu = function () {
/*这段 判断鼠标移到页面的最右侧或者最下侧 防止出现滚动条 {*/
var mw = $('body').width(), mhh = $('html').height(), mbh = $('body').height(),
w = $('#' + id).width(), h = $('#' + id).height(),
mh = (mhh > mbh) ? mhh : mbh;//最大高度 比较html与body的高度
if (mh < h + my) {
my = mh - h;
}//超 高
if (mw < w + mx) {
mx = mw - w;
}
//超 宽
/*} 当然也可以直接跳过*/
$("#" + id).hide().css({top: my, left: mx}).show();
}
});
}
});