JQuery右鍵菜單插件ContextMenu使用指南
插件下載地址:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
壓縮版:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js
Jquery主頁(yè): http://jquery.com/
通過(guò)此插件可以在不同的html元素內(nèi)建立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;">
右鍵點(diǎn)此
</span>
<hr />
<div id="demo2">
右鍵點(diǎn)此
</div>
<hr />
<div class="demo3" id="dontShow">
不顯示
</div>
<hr />
<div class="demo3" id="showOne">
顯示第一項(xiàng)
</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" /> 關(guān)閉</li>
</ul>
</div>
<div class="contextMenu" id="myMenu2">
<ul>
<li id="item_1">選項(xiàng)一</li>
<li id="item_2">選項(xiàng)二</li>
<li id="item_3">選項(xiàng)三</li>
<li id="item_4">選項(xiàng)四</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標(biāo)簽都會(huì)綁定此右鍵菜單
$('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'
},
//菜單項(xiàng)樣式
itemStyle: {
fontFamily : 'verdana',
backgroundColor : 'green',
color: 'white',
border: 'none',
padding: '1px'
},
//菜單項(xiàng)鼠標(biāo)放在上面樣式
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標(biāo)簽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>
效果圖:
很好玩很炫酷的功能吧,小伙伴們自己美化下,加入到自己的項(xiàng)目中去吧
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- jQuery簡(jiǎn)單實(shí)現(xiàn)禁用右鍵菜單
- jquery 簡(jiǎn)短右鍵菜單 多瀏覽器兼容
- jQuery右鍵菜單contextMenu使用實(shí)例
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- 基于jQuery的動(dòng)態(tài)增刪改查表格信息,可左鍵/右鍵提示(原創(chuàng)自Zjmainstay)
- jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果
- jquery禁用右鍵單擊功能屏蔽F5刷新
- jQuery檢測(cè)鼠標(biāo)左鍵和右鍵點(diǎn)擊的方法
- JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能
相關(guān)文章
jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-08-08JQuery用戶名校驗(yàn)的具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了JQuery用戶名校驗(yàn)的具體實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2016-03-03Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼,實(shí)現(xiàn)滑動(dòng)緩沖的方式實(shí)現(xiàn)頁(yè)內(nèi)導(dǎo)航,用戶體驗(yàn)大大提升需要的朋友可以參考下2015-04-04jQuery刪除節(jié)點(diǎn)用法示例(remove方法)
這篇文章主要介紹了jQuery刪除節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了remove方法進(jìn)行頁(yè)面元素刪除的相關(guān)使用技巧,需要的朋友可以參考下2016-09-09