Home » jQuery 外掛

[jQ]ContextMenu r2

[ 日期： | 瀏覽：10,093 | 迴響：2 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

ContextMenu r2

有些應用程式的右鍵都有快捷的一些功能項目，如果想在網頁中也加入這樣的效果時，就要來試試這款 ContextMenu 套件。讓各位能快速輕鬆的加上各種自動的選單(每一個項目的功能還是要自己寫或找來用啦)。

套件名稱：ContextMenu
套件版本：r2
作者網站：http://www.trendskitchens.co.nz/jquery/contextmenu/
套件網址：N/A
發佈日期：2007-07-16
檔案大小：4.33 KB
檔案下載：jquery.contextmenu.r2.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

id(必填)
描述： 指定為選單的來源的 id
預設值： 無
 
menuStyle(選填)
描述： 選單 ul 的 css 樣式
預設值： { listStyle: 'none', padding: '1px', margin: '0px', backgroundColor: '#fff', border: '1px solid #999', width: '100px' }
 
itemStyle(選填)
描述： 選單 li 的 css 樣式
預設值： { margin: '0px', color: '#000', display: 'block', cursor: 'default', padding: '3px', border: '1px solid #fff', backgroundColor: 'transparent' }
 
itemHoverStyle(選填)
描述： 當滑鼠移到選單 li 上時的 css 樣式
預設值： { border: '1px solid #0a246a', backgroundColor: '#b6bdd2' }
 
shadow(選填)
描述： 設定選單右側是否有陰影的效果
預設值： true
 
eventPosX(選填)
描述： 按下右鍵時用來偵測滑鼠x座標屬性
預設值： 'pageX', 如果在 IE 6 有問題時則改成 'clientX'
 
eventPosY(選填)
描述： 按下右鍵時用來偵測滑鼠y座標屬性
預設值： 'pageY', 如果在 IE 6 有問題時則改成 'clientY'
 
onContextMenu(event)(選填)
描述： 當要顯示選單前所觸發的事件; 回傳 false 則不顯示選單，true 則會顯示選單
預設值： null
 
nShowMenu(event, menu)(選填)
描述： 當要顯示選單時所觸發的事件; menu 是選單本身的物件
預設值： null

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 變更 $.contextMenu 的全域屬性
$.contextMenu.defaults(settings);
 
// 加入 contextMenu 功能
$(selector).contextMenu(id[, settings]);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.contextmenu.r2.j"></script>
<style type="text/css">
	.demo {
		background-color: yellow;
		display: inline-block;
		border: 1px solid black;
		margin: 20px;
		padding: 5px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫.demo 加上右鍵選單 myMenu1
		$(".demo").contextMenu("myMenu1", {
			bindings: {
				"open": function(t){
					alert("你按下的是 "+t.id+" 的選單\n動作是 Open");
				},
				"email": function(t){
					alert("你按下的是 "+t.id+" 的選單\n動作是 Email");
				},
				"save": function(t){
					alert("你按下的是 "+t.id+" 的選單\n動作是 Save");
				},
				"close": function(t){
					alert("你按下的是 "+t.id+" 的選單\n動作是 close");
				}
			},
			onContextMenu: function(e){
				// 如果觸發右鍵選單的區塊是 demo2 則不顯示選單
				if($(e.target).attr("id")=="demo2") return false;
				return true;
			},
			onShowMenu: function(e, menu){
				// 如果觸發右鍵選單的區塊是 demo3 則不顯示 #email 及 #save 選單
				if($(e.target).attr("id") == "demo3"){
					$("#email, #save", menu).remove();
				}
				return menu;
			}
		});
	});
</script>
 
<body>
	<span id="demo1" class="demo">我是選單..請輕輕的對我點右鍵</span>
	<span id="demo2" class="demo">我沒有選單</span>
	<span id="demo3" class="demo">我是選單..但沒有 #email 及 #save</span>
 
	<div class="contextMenu" id="myMenu1">
		<ul>
			<li id="open"><img src="images/folder.png" /> Open</li>
			<li id="email"><img src="images/email.png" /> Email</li>
			<li id="save"><img src="images/disk.png" /> Save</li>
			<li id="close"><img src="images/cross.png" /> Close</li>
		</ul>
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

2 筆針對 [jQ]ContextMenu r2 的迴響

  1. 我原本會以為會有白木在這留言說: 老師下拉選單功能為什麼點了沒有用?!
    結果沒人敢這樣問耶!!!
    PS一定是因為"天才"還沒看到這篇...

發表迴響