JQuery之ContextMenu(右键菜单)
生活随笔
收集整理的這篇文章主要介紹了
JQuery之ContextMenu(右键菜单)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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主頁:???http://jquery.com/
插件中的參數說明:
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> //------------------------------------------
關于JQuery的serialize方法.讓我崩潰一天的問題解決了
??????? 這幾天做一個Ajax像服務器動態提交的表單然后給出即時反饋.這些表單內容都是一系列的.內容大同小異.所以代碼和頁面結構也是大同小異.但是其中有一個頁面使用AJAX始終無法提取到服務器值.反而將此頁的整個render出來的頁面顯示出來.關鍵代碼如下:
?
????$(document).ready(function()?{
????????$("#Submit").click(function()?{
????????????var?a?=?$("#aspnetForm").serialize();
/*因為使用了masterpage,所以頁面form的ID為aspnetForm*/
????????????$.ajax({
??????????????url:?"xxx.aspx",
??????????????type:?"get",
??????????????data:?a,
??????????????success:?function(data){
????????????????$("#result").html(data);
??????????????}
????????????});
????????});
????});
????
后臺代碼簡略如下.只是為了讓大家明白意思:
?
????protected?void?Page_Load(object?sender,?EventArgs?e)
????{
????????if?(Request.QueryString["length"]?!=?null)
????????{
????????????Response.Clear();
????????????Response.Write("這里是回傳的數據");
????????????Response.End();
????????}
???????
????}
轉載于:https://www.cnblogs.com/fx2008/archive/2011/12/12/2284396.html
總結
以上是生活随笔為你收集整理的JQuery之ContextMenu(右键菜单)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SmartQuery WebPart 2
- 下一篇： cocos2d-x plist使用