说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

jQuery右键菜单(Context Menu)插件

HTML文档下载 WORD文档下载 PDF文档下载
这里所指的右键菜单实际上应该称为上下文菜单,jQuery右键菜单是一个jQuery插件,要求1.3版本以上的jQuery,可以在各种浏览器中使用。

下载源代码

 

 

 

这里所指的右键菜单实际上应该称为上下文菜单,jQuery右键菜单是一个jQuery插件,要求1.3版本以上的jQuery,可以在以下浏览器中使用:
Internet Explorer 6 & 7
Firefox 2 & 3
Safari 3
Chrome
Opera 9.5
使用步骤:
在HTML中创建菜单列表

 

这里所指的右键菜单实际上应该称为上下文菜单,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></ul>

添加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:鼠标点击时的纵坐标(相对于文档)

 

 

 

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘