1<!DOCTYPE html> 2<html> 3<head> 4<title>jQuery右鍵菜單，上下文菜單-柯樂義</title> 5<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js" 6charset="utf-8"></script> 7<style type="text/css" media="screen"> 8html, body
9{ 10height: 100%; 11} 12 13body
14{ 15font-family: 'lucida grande' , tahoma, verdana; 16font-size: 15px; 17color: #555; 18width: 700px; 19margin: 0 auto; 20padding: 30px 0; 21} 22 23h1, h2
24{ 25color: #222; 26} 27 28ul
29{ 30list-style-type: none; 31list-style-position: inside; 32margin: 0; 33padding: 0; 34} 35 36/* all context menus have this class */ 37.context-menu
38{ 39-webkit-border-radius: 5px; 40-moz-border-radius: 5px; 41border-radius: 5px; 42background-color: #f2f2f2; 43border: 1px solid #999; 44list-style-type: none; 45margin: 0; 46padding: 0; 47} 48.context-menu a
49{ 50display: block; 51padding: 3px; 52text-decoration: none; 53color: #333; 54} 55.context-menu a:hover
56{ 57background-color: #666; 58color: white; 59} 60 61/* second context menu */ 62#context-menu-2
63{ 64border: 1px solid #333; 65background-color: orange; 66margin: 0; 67padding: 0; 68} 69 70 71.target1, .target2 li, .target3 li
72{ 73background-color: #ddd; 74color: #333; 75border: 1px solid #c6c6c6; 76padding: 5px; 77} 78 79.target1
80{ 81width: 130px; 82} 83 84.target2 li, .target3 li
85{ 86margin-top: 5px; 87} 88 89.target1 li.green, .target2 li.green, .target3 li.green
90{ 91background-color: green; 92color: #fff; 93} 94 95.big-font
96{ 97font-size: 25px; 98} 99</style>100</head>101<body>102<h1>103 jQuery右鍵菜單示例·柯樂義</h1>104<h2>105 例 1</h2>106<p>107單個div的上下文菜單。 Note that the native context menu is disabled by passing {disable_native_context_menu:
108true} as the options hash and last argument of the plugin. The native context menu
109is enabled by default.
110</p>111<div class="target1">112 右擊我</div>113<h2>114 例 2 - 使用鼠標左鍵點擊</h2>115<p>116You can use the same syntax, but use any other selector to target multiple elements
117with the same context menu. Notice the leftClick: true which indicates that it should
118trigger on left click instead of right click.
119</p>120<ul class="target2">121<li>請左擊我，右擊沒效果。</li>122<li>請左擊我，右擊沒效果。</li>123<li>請左擊我，右擊沒效果。</li>124</ul>125<a href ="http://keleyi.com/a/bjac/qjaheda1.htm" target="_blank">原文</a><br />126<h2>127 例 3 - 突出當前點擊項</h2>128<p>129You can use the showMenu and hideMenu options to highlight the current context menu
130target.
131</p>132<ul class="target3">133<li>右擊我</li>134<li>右擊我</li>135<li>右擊我</li>136</ul>137<div>138 本插件的不足支出就是不支持jquery1.9以上版本。</div>139<script src="http://keleyi.com/keleyi/phtml/jqplug/8/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script>140<script type="text/javascript" charset="utf-8">141$(document).ready(function () {
142//例1143$('.target1').contextMenu('context-menu-1', {
144'右鍵菜單項1': {
145click: function (element) { // element is the jquery obj clicked on when context menu launched146alert('點擊了右鍵菜單項');
147},
148klass: "menu-item-1"// a custom css class for this menu item (usable for styling)149},
150'右鍵菜單項2': {
151click: function (element) { alert('點擊了第二項'); },
152klass: "second-menu-item"153}, '返回首頁': { click: function (element) { location.href ="http://keleyi.com"; } }
154});
155//例2156$('.target2 li').contextMenu('context-menu-2', {
157'彩上綠色!': {
158click: function (element) { // element is the jquery obj clicked on when context menu launched159element.addClass('green');
160},
161klass: "menu-item-1"// a custom css class for this menu item (usable for styling)162},
163'變大!': {
164click: function (element) { element.addClass('big-font') },
165klass: "second-menu-item"166}, '打開原文': { click: function (element) { window.open("http://keleyi.com/a/bjac/qjaheda1.htm"); } }
167}, { disable_native_context_menu: true, leftClick: true }
168);
169//例3170$('.target3 li').contextMenu('context-menu-2', {
171'變大!': {
172click: function (element) { element.addClass('big-font') },
173klass: "menu-item-1"// a custom css class for this menu item (usable for styling)174}
175}, {
176disable_native_context_menu: true,
177showMenu: function (element) { element.addClass('green'); },
178hideMenu: function (element) { element.removeClass('green'); }
179});
180});
181</script>182</body>183</html>
