Jquery 右键菜单

介绍：这里所指的右键菜单实际上应该称为上下文菜单，jQuery右键菜单是一个jQuery插件，要求1.3版本以上的jQuery，可以在各种浏览器中使用

下载源码

From:http://www.okbase.net/doc/details/11

这里所指的右键菜单实际上应该称为上下文菜单，jQuery右键菜单是一个jQuery插件，要求1.3版本以上的jQuery，可以在以下浏览器中使用：

Internet Explorer 6 & 7

Firefox 2 & 3

Safari 3

Chrome

Opera 9.5

 

使用步骤：

 

在HTML中创建菜单列表

 

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>

添加JavaScript脚本：

$(document).ready( function() {
  
    $("#selector").contextMenu({
        menu: ''myMenu''
    },
        function(action, el, pos) {
        alert(
            ''Action: '' + action + ''\n\n'' +
            ''Element ID: '' + $(el).attr(''id'') + ''\n\n'' +
            ''X: '' + pos.x + ''  Y: '' + pos.y + '' (relative to element)\n\n'' +
            ''X: '' + pos.docX + ''  Y: '' + pos.docY+ '' (relative to document)''
            );
    });
  
})

#selector是需要右键弹出的元素，例如：

<div id="selector">
    右键点击这里弹出菜单 http://www.okbase.net/
</div>

插件方法
 
disableContextMenu()	禁用右键菜单
enableContextMenu()	启用右键菜单
disableContextMenuItems("#option1,#option2,…")	禁用指定的菜单项，如果传null，禁用所有元素
enableContextMenuItems("#option1,#option2,…")	启用指定的菜单项，如果传null，启用所有元素
destroyContextMenu()	指定元素解除右键菜单绑定
例如： $("#myDiv").disableContextMenu();
样式修改：
可以修改jquery.contextMenu.css更改样式。
回调函数
参数：
action:指示哪个菜单项被选择，如<a href="#edit">Edit</a>，action为edit
el:触发右键菜单的对象
pos.x:鼠标点击时的横坐标(相对于元素)
pos.y:鼠标点击时的纵坐标(相对于元素)
pos.docX:鼠标点击时的横坐标(相对于文档)
pos.docY:鼠标点击时的纵坐标(相对于文档)