欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery右键菜单插件介绍

美国HS机房 添加于 2011-09-08  

jquery教程

在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单。

类似右键菜单的组件网上很多。一般而言,改变浏览器的默认菜单应当慎用,这会使多数用户感到不习惯。但是在企业Web应用中,用户的使用环境更加可控,在这种应用中使用自定义右键菜单会更加适合。

以下列举几款比较成熟的jQuery右键菜单插件,我们将逐一介绍,请读者自行比较,并根据自己的需求选择。

1.VERY SIMPLE CONTEXT MENU-Intekhab A Rizvi

Project Page: http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/

jQuery右键菜单插件介绍-图片1
jQuery右键菜单插件介绍-图片1

jQuery Very Simple ContextMenu Plugin

使用:
1.在插件主页下载所需文件。
2.在你的html文件中包含jquery库,vscontext.jquery.js,css/vscontext.css。

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="vscontext.jquery.js" type="text/javascript"><!--mce:1--></script>
3.在html中创建要响应右键菜单的元素。

<div id="item">右键点我</div>
4.创建菜单项目。
<li>的class有seprator的,会在该项下面有一条分割线。

<div class="vs-context-menu">
<ul>
    <li class="cut seprator"><a id="menu_1" href="javascript:cut();">剪切</a></li>
    <li class="copy"><a id="menu_2" href="javascript:copy();">复制</a></li>
    <li class="paste seprator"><a id="menu_3" href="javascript:paste();">粘贴</a></li>
    <li class="edit"><a id="menu_4" href="javascript:edit();">编辑</a></li>
    <li class="delete"><a id="menu_5" href="javascript:del();">删除</a></li>
</ul>
</div>
菜单项的图标要在css文件里设置相应<li>的背景。

.vs-context-menu li.cut a { background-image: url(icons/cut.png); }
.vs-context-menu li.copy a { background-image: url(icons/copy.png); }
.vs-context-menu li.paste a { background-image: url(icons/paste.png); }
.vs-context-menu li.edit a { background-image: url(icons/edit.png); }
.vs-context-menu li.delete a { background-image: url(icons/delete.png); }
5.初始化菜单,添加菜单事件。

<script type="text/javascript"><!--mce:2--></script>

2.CONTEXT MENU-Cory S.N. LaViska

Project Page: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

jQuery右键菜单插件介绍-图片2
jQuery右键菜单插件介绍-图片2

jQuery右键菜单插件介绍-图片3
jQuery右键菜单插件介绍-图片3

jQuery Context Menu Plugin

使用:见插件官方网站。

Methods:

disableContextMenu()禁用匹配元素上的右键菜单。
enableContextMenu()启用匹配元素上的右键菜单。
disableContextMenuItems(”#option1,#option2,…”)禁用匹配的菜单项,如果参数为null,禁用所有项。
enableContextMenuItems(”#option1,#option2,…”)期用匹配的菜单项,如果参数为null,禁用所有项。
destroyContextMenu()解除元素与右键菜单的绑定。
Callback:
action选中的菜单项所对应的动作。
el触发菜单的元素
pos.x菜单点击时,鼠标位置相对于触发元素的水平位移。
pos.y菜单点击时,鼠标位置相对于触发元素的垂直位移。
pos.docX菜单点击时,鼠标位置相对于页面的水平位移。
pos.docY菜单点击时,鼠标位置相对于页面的垂直位移。

3.JEEGOOCONTEXT-Erik van den Berg

Project Page: http://www.planitworks.nl/jeegoocontext/

jQuery右键菜单插件介绍-图片4
jQuery右键菜单插件介绍-图片4

JEEGOOCONTEXT

菜单可以通过以下两种方法初始化:

$('selector').jeegoocontext('menu_id');

$('selector').jeegoocontext('menu_id', 'options');

“selector”为菜单组建要绑定的内容,可以是任何jQuery选择器。
“menu_id”为菜单ID(没有 “#”)。
“options”为对象,可以配置属性和回调函数。

所有菜单内容都可以从菜单解绑,只需调用:

$ ('context').nojeegoocontext();

Options properties:

livequeryBooleanundefinedMenu如为true, 菜单内容通过livequery生成并动态加载。
hoverClassString‘hover’Menu这个CSS类在鼠标悬停在菜单项或其直接子项时被设置。
activeClassString‘active’Global这个CSS类设置给当前活动的菜单 (右键点击会弹出菜单的区域)。 这个变量是全局的,在使用多个菜单时只需要设置一次。如果重复设置,其值为最后提供的。
menuClassString‘jeegoocontext’Global所有的菜单都必须包含这个CSS类。这个变量是全局的,在使用多个菜单时只需要设置一次。如果重复设置,其值为最后提供的。
autoAddSubmenuArrowsBooleantrueMenu如为true,则自动为有子项的菜单项添加指示箭头。
submenuClassString‘submenu’Menu如果autoAddSubmenuArrows为true, 这个类设置给菜单项中包含小箭头的<span>元素。
separatorClassString‘separator’Menu当某个菜单项含有此类,则在按键盘上下键切换菜单项时,该菜单项被跳过。
fadeInNumber200Menu菜单和子级菜单淡入的时间,单位为毫秒。
delayNumber300Menu鼠标移出父菜单项时,其子菜单隐藏的延迟时间,单位为毫秒。
keyDelayNumber100Menu上下键切换菜单项的延迟时间,单位为毫秒。
widthOverflowOffsetNumber0Menu可以在宽度溢出时使用。例如设置为20时,菜单和子菜单的右部总是离窗口右边界有20px的间距。
heightOverflowOffsetNumber0Menu可以在高度溢出时使用。例如设置为20时,菜单和子菜单的底部总是离窗口下边界有20px的间距。
submenuLeftOffsetNumber0Menu子菜单相对于父菜单的水平位移。如为-3,每个子菜单左部将有3px与父菜单重叠。
submenuTopOffsetNumber0Menu子菜单相对于父菜单的垂直位移。如为-3,每个子菜单将比其父菜单项高出3px。当然,在高度溢出的情况下,此值被忽略。
operaEventString‘dblclick’Menu在Opera的9.5以前老版本中浏览器右键菜单时是禁止重写的,这个事件用来定义在Opera中如何打开菜单。
eventStringundefinedMenu此项被设置时,定义的事件将用来取代右键打开菜单。优先于operaEvent属性。例如,设置为’click’将使用左键打开菜单。

Options callbacks

 

可设置以下4个回调:

onShowonHoveronSelectonHide

每个回调接收两个参数:e 和 context,e为该事件的来源元素,context为菜单弹出所在的区域。利用这些回调函数,可以用return false的方法取消菜单事件的默认行为。

onShowmenuRight-click on bound context.隐藏页面上所有菜单。在页面上删除所有处于active的菜单及菜单项的active类。为当前点击的内容添加active类。淡入菜单。
onHovermenu-itemMouseover on menu-item.定位并淡入子级菜单。
onSelectmenu-itemClick on menu-item.删除当前处于active的菜单或菜单项的active类。隐藏菜单。
onHidemenuClick on document.在页面上删除所有处于active的菜单及菜单项的active类。隐藏菜单。

4.JQUERY CONTEXT MENU SCRIPT-Dynamic Drive

Project Page: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm

jQuery右键菜单插件介绍-图片5
jQuery右键菜单插件介绍-图片5

jQuery Context Menu script

这也是一个简单的右键菜单,菜单内容同样用<ul>和<li>嵌套构造多级菜单。使用方法参看插件页面。

5.CONTEXT MENU-Chris Domigan

Project Page: http://www.trendskitchens.co.nz/jquery/contextmenu/

jQuery右键菜单插件介绍-图片6
jQuery右键菜单插件介绍-图片6

ContextMenu plugin

这也是一个名为Context Menu的插件。
使用:

参数:

menu_id

通过引用菜单的ID,你可以在多个元素上绑定相同的菜单。如:

$("table td").contextMenu("myMenu")

将会把ID为”myMenu”的菜单绑定到所有的表格单元格上。

settings

settings支持以下属性:

bindings包含”id”:function对的对象。提供的函数为点击时的动作。触发菜单的元素作为第一个参数传递给该句柄。
menuStyle包含styleName:value对的对象,定义菜单容器ul的样式。
itemStyle包含styleName:value对的对象,定义菜单项li的样式。
itemHoverStyle包含styleName:value对的对象,定义菜单项li的悬停样式。
shadow布尔值,默认为true。菜单是否显示阴影。
eventPosX允许你定义菜单弹出的位置,默认为pageX。IE6下需设置为clientX。
eventPosY允许你定义菜单弹出的位置,默认为pageX。IE6下需设置为clientY。
onContextMenu(event)在菜单显示前调用。如果返回false,将不显示菜单。
onShowMenu(event, menu)在菜单显示前调用。它将传递一个reference给菜单元素,并允许你在菜单显示之前手动修改输出,你可以在菜单显示给用户之前,显示或隐藏参数或其他任何东西。该函数必须返回menu

另外的,你可以调用:

$.contextMenu.defaults(settings)

为所有菜单定义一个默认样式。

6.JQUERY CONTEXTMENU PLUGIN-Matt Kruse

Project Page: http://www.javascripttoolbox.com/lib/contextmenu/index.php
这又是一个名叫ContextMenu的右键菜单插件。这个插件非常强大,作者写有一套Javascript Toolbox。

jQuery右键菜单插件介绍-图片7
jQuery右键菜单插件介绍-图片7

 

到零度科技查看原文:http://www.ldisp.com/a/jquery/2011/1059.shtml

上一篇:jQuery的表单校验插件validate
下一篇:jQuery插件开发介绍与方法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

619

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理