Usage
$(elements).contextMenu(String menu_id [, Object settings]);
You define your menu structure in your HTML markup. For each menu, place an unordered list in a div with class "contextMenu" and the id you will refer to it by (see the examples). The div can be placed anywhere as it will automatically be hidden by the plugin.
You can have as many menus defined on a page as you like. Each <li> element will act as an option on the menu. Give each <li> a unique id so that actions can be bound to it.
Note: ContextMenu does not currently support nested menus. This feature may be in an upcoming release.
Parameters
menu_id
The id of the menu as defined in your markup. You can bind one or more elements to a menu. Eg $("table td").contextMenu("myMenu")
will bind the menu with id "myMenu" to all table cells.
Note: This behaviour has changed from r1 where you needed a "#" before the id
settings
ContextMenu takes an optional settings object that lets you style your menu and bind click handlers to each option. ContextMenu supports the following properties in the settings object:
Note: This behaviour has changed from r1 where you needed a "#" before the id
Defaults to true
Defaults to: 'pageX'
Defaults to: 'pageY'
Changing defaults
In addition to passing style information for each menu via the settings object, you can extend the default options for all menus by calling $.contextMenu.defaults(settings). Every setting except bindings can be used as a default.
Example:
$.contextMenu.defaults({ menuStyle : { border : "2px solid green" }, shadow: false, onContextMenu: function(e) { alert('Did someone asked for a context menu?!'); } });
Examples
Example 1 - Basic usage with bindings
RIGHT CLICK FOR DEMO THIS WORKS TOO
Html
<div class="contextMenu" id="myMenu1"> <ul> <li id="open"><img src="folder.png" /> Open</li> <li id="email"><img src="email.png" /> Email</li> <li id="save"><img src="disk.png" /> Save</li> <li id="close"><img src="cross.png" /> Close</li> </ul> </div>
Javascript
$('span.demo1').contextMenu('myMenu1', { bindings: { 'open': function(t) { alert('Trigger was '+t.id+'\nAction was Open'); }, 'email': function(t) { alert('Trigger was '+t.id+'\nAction was Email'); }, 'save': function(t) { alert('Trigger was '+t.id+'\nAction was Save'); }, 'delete': function(t) { alert('Trigger was '+t.id+'\nAction was Delete'); } } });
The preceding code binds the context menu "myMenu1" to all span elements of class "demo1".
Example 2 - Basic styling
Right clicking anywhere in this paragraph will trigger the context menu.
Html
<div class="contextMenu" id="myMenu2"> <ul> <li id="item_1">Item 1</li> <li id="item_2">Item 2</li> <li id="item_3">Item 3</li> <li id="item_4">Item 4</li> <!-- etc... --> </ul> </div>
Javascript
$('#demo2').contextMenu('myMenu2', { menuStyle: { border: '2px solid #000' }, itemStyle: { fontFamily : 'verdana', backgroundColor : '#666', color: 'white', border: 'none', padding: '1px' }, itemHoverStyle: { color: '#fff', backgroundColor: '#0f0', border: 'none' } });
The preceding code binds the context menu "myMenu2" to the element with id "demo2".
Example 3 - Advanced usage with callbacks
Don't show menu Just first item Show all
Html
<div class="contextMenu" id="myMenu3"> <ul> <li id="item_1">Item 1</li> <li id="item_2">Item 2</li> <li id="item_3">Item 3</li> </ul> </div>
Javascript
$('span.demo3').contextMenu('myMenu3', { onContextMenu: function(e) { if ($(e.target).attr('id') == 'dontShow') return false; else return true; }, onShowMenu: function(e, menu) { if ($(e.target).attr('id') == 'showOne') { $('#item_2, #item_3', menu).remove(); } return menu; } });
Notes
It is worth noting that by overriding the browser's right click menu this plugin provides a behaviour that is different from what most users will expect. This plugin may be best suited for intranet web applications, where the developer is working in a more controlled environment.
Credits
- A big thanks to John Resig for creating jQuery, and to the excellent development team who continues to make this the best javascript library in town.
- Thanks also to Joern Zaefferer - his Tooltip plugin provided great insight and inspiration.
- Dan G. Switzer, II, for his contributions
相关推荐
使用步骤,引用js,css。然后根据选择器标签,为其创建菜单即可,选择器方法同Jquery类似引用。demo.js中有对div,进行设置的demo.引用方法有说明,很容易可以看得懂。
jquery-menu是一款简单的jquery右键菜单插件。通过jquery-menu右键菜单插件,你可以在指定的页面区域内制作右键菜单或左键菜单效果,非常方便。
Jquery右键菜单插件(RightMenu)修正
jQuery右键菜单插件context.js.zip
插件下载地址: ... 压缩版: ...Jquery主页: http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 代码如下: <HTML> ... JQuery右键菜单 </TITLE>
用于创建右键弹出菜单的jQuery插件。 标签:jQuery
contextmenufunction.js jquery-1.4.2.js jquery.contextmenu.css jquery.contextmenu.js 里面的内容就这些。
基于jquery的鼠标右键菜单插件,修改方便,适用于一般项目中
Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发,也可以配合Font Awesome字体图标一起使用,非常的方便。
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点。
关于右键菜单,我们介绍得并不多,目前只有介绍过一款jQuery Bootstrap右键菜单 带点击菜单...今天要继续为大家分享一款高大上的jQuery右键菜单,这款右键菜单可以让使用者自定义菜单弹出的区域,因此非常灵活和实用。
jQuery右键菜单插件context js是一款轻量级的网页右键菜单插件context js。
Jquery-右键菜单插件 插件等文件都在里面,里面还有demo教你如何应用非常好用
jQuery右键菜单插件context.js是一款轻量级的网页右键菜单插件context.js。
花生米AJAX-UI系列之:基于JQUERY的右键菜单0.1版 可以对表格,列表,"树",或者单个DOM容器进行右键绑定 菜单项的文字、图标样式,调用方法均可自定义 菜单中分隔符的多少和位置也可自定义 提供了菜单项中那一项被...