jquery 右键菜单
jQuery contextMenu
|
1 2 3 4 |
Html代码 <div class="context-menu-one box menu-1"> <strong>right click me</strong> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Js代码 $(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); }) }); |
jquery 简短右键菜单 多浏览器兼容
http://www.jb51.net/article/21699.htm
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
Js代码 $(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(); } }); } }); |
