本文给大家介绍一款非常强大并且非常简单容易上手的是jQuery右键菜单插件,jeegoocontext插件,下面看看该插件的使用及其配置参数
菜单可以通过以下两种方法初始化:
$('selector').jeegoocontext('menu_id');
$('selector').jeegoocontext('menu_id', 'options');
“selector”为菜单组建要绑定的内容,可以是任何jQuery选择器。
“menu_id”为菜单ID(没有 “#”)。
“options”为对象,可以配置属性和回调函数。
所有菜单内容都可以从菜单解绑,只需调用: 零度科技
$('context').nojeegoocontext();
Options properties:
| | | | |
livequery | Boolean | undefined | Menu | 如为true, 菜单内容通过livequery生成并动态加载。 |
hoverClass | String | ‘hover’ | Menu | 这个CSS类在鼠标悬停在菜单项或其直接子项时被设置。 |
activeClass | String | ‘active’ | Global | 这个CSS类设置给当前活动的菜单 (右键点击会弹出菜单的区域)。 这个变量是全局的,在使用多个菜单时只需要设置一次。如果重复设置,其值为最后提供的。 |
menuClass | String | ‘jeegoocontext’ | Global | 所有的菜单都必须包含这个CSS类。这个变量是全局的,在使用多个菜单时只需要设置一次。如果重复设置,其值为最后提供的。 |
autoAddSubmenuArrows | Boolean | true | Menu | 如为true,则自动为有子项的菜单项添加指示箭头。 |
submenuClass | String | ‘submenu’ | Menu | 如果autoAddSubmenuArrows为true, 这个类设置给菜单项中包含小箭头的<span>元素。 |
separatorClass | String | ‘separator’ | Menu | 当某个菜单项含有此类,则在按键盘上下键切换菜单项时,该菜单项被跳过。 |
fadeIn | Number | 200 | Menu | 菜单和子级菜单淡入的时间,单位为毫秒。 |
delay | Number | 300 | Menu | 鼠标移出父菜单项时,其子菜单隐藏的延迟时间,单位为毫秒。 |
keyDelay | Number | 100 | Menu | 上下键切换菜单项的延迟时间,单位为毫秒。 |
widthOverflowOffset | Number | 0 | Menu | 可以在宽度溢出时使用。例如设置为20时,菜单和子菜单的右部总是离窗口右边界有20px的间距。 |
heightOverflowOffset | Number | 0 | Menu | 可以在高度溢出时使用。例如设置为20时,菜单和子菜单的底部总是离窗口下边界有20px的间距。 |
submenuLeftOffset | Number | 0 | Menu | 子菜单相对于父菜单的水平位移。如为-3,每个子菜单左部将有3px与父菜单重叠。 |
submenuTopOffset | Number | 0 | Menu | 子菜单相对于父菜单的垂直位移。如为-3,每个子菜单将比其父菜单项高出3px。当然,在高度溢出的情况下,此值被忽略。 |
operaEvent | String | ‘dblclick’ | Menu | 在Opera的9.5以前老版本中浏览器右键菜单时是禁止重写的,这个事件用来定义在Opera中如何打开菜单。 |
event | String | undefined | Menu | 此项被设置时,定义的事件将用来取代右键打开菜单。优先于operaEvent属性。例如,设置为’click’将使用左键打开菜单。 |
Options callbacks
可设置以下4个回调: 内容来自www.00isp.com
onShowonHoveronSelectonHide 零度科技提供技术支持
每个回调接收两个参数:e 和 context,e为该事件的来源元素,context为菜单弹出所在的区域。利用这些回调函数,可以用return false的方法取消菜单事件的默认行为。 copyright www.00isp.com
| | | |
onShow | menu | Right-click on bound context. | 隐藏页面上所有菜单。在页面上删除所有处于active的菜单及菜单项的active类。为当前点击的内容添加active类。淡入菜单。 |
onHover | menu-item | Mouseover on menu-item. | 定位并淡入子级菜单。 |
onSelect | menu-item | Click on menu-item. | 删除当前处于active的菜单或菜单项的active类。隐藏菜单。 |
onHide | menu | Click on document. | 在页面上删除所有处于active的菜单及菜单项的active类。隐藏菜单。 |