好库网 好库网首页 | 我的好库
好饱的专栏

jQuery右键菜单(Context Menu)插件

发布者:好饱
发布日期:2011/3/3 22:33:33   更新日期:2011/3/3 22:38:06
阅读次数:9092
评分:4.80
介绍:这里所指的右键菜单实际上应该称为上下文菜单,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:鼠标点击时的纵坐标(相对于文档)

 

 

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。