
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:


bindings

An object containing "id":function pairs. The supplied function is the action to be performed when the associated item is clicked. The element that triggered the current menu is passed to this handler as the first parameter.

Note: This behaviour has changed from r1 where you needed a "#" before the id

menuStyle

An object containing styleName:value pairs for styling the containing <ul> menu.

itemStyle

An object containing styleName:value pairs for styling the <li> elements.

itemHoverStyle

An object containing styleName:value pairs for styling the hover behaviour of <li> elements.

shadow

Boolean: display a basic drop shadow on the menu.

Defaults to true

eventPosX

Allows you to define which click event is used to determine where to place the menu. There are possibly times (particularly in IE6) where you will need to set this to "clientX".

Defaults to: 'pageX'

eventPosY

Allows you to define which click event is used to determine where to place the menu. There are possibly times (particularly in IE6) where you will need to set this to "clientY".

Defaults to: 'pageY'

onContextMenu(event)

A custom event function which runs before the context menu is displayed. If the function returns false the menu is not displayed. This allows you to attach the context menu to a large block element (or the entire document) and then filter on right click whether or not the context menu should be shown.

onShowMenu(event, menu)

A custom event function which runs before the menu is displayed. It is passed a reference to the menu element and allows you to manipulate the output before the menu is shown. This allows you to hide/show options or anything else you can think of before showing the context menu to the user. This function must return the menu.

通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.

<HTML>

<HEAD>

<TITLE> JQuery右键菜单 </TITLE>

<script src="jquery-1.2.6.min.js"></script>

<script src="jquery.contextmenu.r2.js"></script>

</HEAD>


<BODY>

<span class="demo1" style="color:green;">

右键点此

</span>

<hr />

<div id="demo2">

右键点此

</div>

<hr />

<div class="demo3" id="dontShow">

不显示

</div>

<hr />

<div class="demo3" id="showOne">

显示第一项

</div>

<hr />

<div class="demo3" id="showAll">

显示全部

</div>


<hr />

<!--右键菜单的源-->

<div class="contextMenu" id="myMenu1">

<ul>

<li id="open"><img src="folder.png" /> 打开</li>

<li id="email"><img src="email.png" /> 邮件</li>

<li id="save"><img src="disk.png" /> 保存</li>

<li id="delete"><img src="cross.png" /> 关闭</li>

</ul>

</div>


<div class="contextMenu" id="myMenu2">

<ul>

<li id="item_1">选项一</li>

<li id="item_2">选项二</li>

<li id="item_3">选项三</li>

<li id="item_4">选项四</li>

</ul>

</div>

<div class="contextMenu" id="myMenu3">

<ul>

<li id="item_1">csdn</li>

<li id="item_2">javaeye</li>

<li id="item_3">itpub</li>

</ul>

</div>

</BODY>

<script>

//所有class为demo1的span标签都会绑定此右键菜单

$('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');

}

}


});

//所有html元素id为demo2的绑定此右键菜单

$('#demo2').contextMenu('myMenu2', {

//菜单样式

menuStyle: {

border: '2px solid #000'

},

//菜单项样式

itemStyle: {

fontFamily : 'verdana',

backgroundColor : 'green',

color: 'white',

border: 'none',

padding: '1px'


},

//菜单项鼠标放在上面样式

itemHoverStyle: {

color: 'blue',

backgroundColor: 'red',

border: 'none'

},

//事件

bindings:

{

'item_1': function(t) {

alert('Trigger was '+t.id+'\nAction was item_1');

},

'item_2': function(t) {

alert('Trigger was '+t.id+'\nAction was item_2');

},

'item_3': function(t) {

alert('Trigger was '+t.id+'\nAction was item_3');

},

'item_4': function(t) {

alert('Trigger was '+t.id+'\nAction was item_4');

}

}

});

//所有div标签class为demo3的绑定此右键菜单

$('div.demo3').contextMenu('myMenu3', {

//重写onContextMenu和onShowMenu事件

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;

}


});




</script>

</HTML>

- BZOJ.1076.[SCOI2008]奖励关(概率DP 倒推)
题目链接 BZOJ 洛谷 真的题意不明啊.. \(Description\) 你有k次选择的机会,每次将从n种物品中随机一件给你,你可以选择选或不选.选择它会获得这种物品的价值:选择一件物品前需要先选 ...
- 【BZOJ-3532】Lis 最小割 + 退流
3532: [Sdoi2014]Lis Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 704 Solved: 264[Submit][Status] ...
- 強大的jQuery Chart组件-Highcharts
Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图 ...
- .NET 4.0中使用内存映射文件实现进程通讯
操作系统很早就开始使用内存映射文件(Memory Mapped File)来作为进程间的共享存储区,这是一种非常高效的进程通讯手段.Win32 API中也包含有创建内存映射文件的函数,然而,这些函数都 ...
- 微软为何选择在 Github 上开源 .NET 核心?
本文来自微软开源.NET 的一篇公告 ,文中阐述了微软为何选择在 Github 开源.NET,以及微软对开源和开源社区方面的认识的变迁. 对于.NET来说,今天(2014/11/12)是个大日子! 我 ...
- c#开发activex注册问题
最近使用c#开发activex,遇到一个问题,生成的dll文件在本地可以嵌入到web里面,但是到其他机器上就会出现activex无法加载的情况,页面里面出现一个红色的X.mfc开发的activex是使 ...
- ASP.NET MVC与Sql Server建立连接
用惯了使用Entity Framework连接数据库,本篇就来体验使用SqlConnection连接数据库. 打开Sql Server 2008,创建数据库,创建如下表: create table P ...
- 将 nginx 安装成 windows 的方法
服务器这几天不稳定,经常性的重启(硬件问题),而且是windows环境,在其上跑了nginx,每次重启后需要手动启动nginx方能是整个系统正常. 所以就查找了下一种方法,能否将nginx做成wind ...
- UITabBarController 详解之 hidesBottomBarWhenPushed的正确用法
今天说的是在TabBar嵌套Nav时,进行Push的时候隐藏TabBar的问题. 之前项目也需要这么做,那时候iOS7还没出,也是各种搜罗,后来的解决方法是当push操作的时候自己隐藏Tabbar,p ...
- linux内核netfilter模块分析之:HOOKs点的注册及调用
转自;http://blog.csdn.net/suiyuan19840208/article/details/19684883 -1: 为什么要写这个东西?最近在找工作,之前netfilter 这一 ...