點擊這裡體驗效果
如果要屏蔽頁面原來的右鍵菜單，請設置disable_native_context_menu:true
以下是源代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery右鍵菜單，上下文菜單-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.8.2.min.js"
charset="utf-8"></script>
<style type="text/css" media="screen">
html, body
{
height: 100%;
}
body
{
font-family: 'lucida grande' , tahoma, verdana;
font-size: 15px;
color: #555;
width: 700px;
margin: 0 auto;
padding: 30px 0;
}
h1, h2
{
color: #222;
}
ul
{
list-style-type: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
/* all context menus have this class */
.context-menu
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #f2f2f2;
border: 1px solid #999;
list-style-type: none;
margin: 0;
padding: 0;
}
.context-menu a
{
display: block;
padding: 3px;
text-decoration: none;
color: #333;
}
.context-menu a:hover
{
background-color: #666;
color: white;
}
/* second context menu */
#context-menu-2
{
border: 1px solid #333;
background-color: orange;
margin: 0;
padding: 0;
}
.target1, .target2 li, .target3 li
{
background-color: #ddd;
color: #333;
border: 1px solid #c6c6c6;
padding: 5px;
}
.target1
{
width: 130px;
}
.target2 li, .target3 li
{
margin-top: 5px;
}
.target1 li.green, .target2 li.green, .target3 li.green
{
background-color: green;
color: #fff;
}
.big-font
{
font-size: 25px;
}
</style>
</head>
<body>
<h1>
jQuery右鍵菜單示例·</h1>
<h2>
例 1</h2>
<p>
單個div的上下文菜單。 Note that the native context menu is disabled by passing {disable_native_context_menu:
true} as the options hash and last argument of the plugin. The native context menu
is enabled by default.
</p>
<div class="target1">
右擊我</div>
<h2>
例 2 - 使用鼠標左鍵點擊</h2>
<p>
You can use the same syntax, but use any other selector to target multiple elements
with the same context menu. Notice the leftClick: true which indicates that it should
trigger on left click instead of right click.
</p>
<ul class="target2">
<li>請左擊我，右擊沒效果。</li>
<li>請左擊我，右擊沒效果。</li>
<li>請左擊我，右擊沒效果。</li>
</ul>
<a href ="http:///a/bjac/qjaheda1.htm" target="_blank">原文</a><br />
<h2>
例 3 - 突出當前點擊項</h2>
<p>
You can use the showMenu and hideMenu options to highlight the current context menu
target.
</p>
<ul class="target3">
<li>右擊我</li>
<li>右擊我</li>
<li>右擊我</li>
</ul>
<div>
本插件的不足之處就是不支持jquery1.9以上版本。</div>
<script src="http:///keleyi/phtml/jqplug/8/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
//例1
$('.target1').contextMenu('context-menu-1', {
'右鍵菜單項1': {
click: function (element) { // element is the jquery obj clicked on when context menu launched
alert('點擊了右鍵菜單項');
},
klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
},
'右鍵菜單項2': {
click: function (element) { alert('點擊了第二項'); },
klass: "second-menu-item"
}, '返回首頁': { click: function (element) { location.href = "http://"; } }
});
//例2
$('.target2 li').contextMenu('context-menu-2', {
'彩上綠色!': {
click: function (element) { // element is the jquery obj clicked on when context menu launched
element.addClass('green');
},
klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
},
'變大!': {
click: function (element) { element.addClass('big-font') },
klass: "second-menu-item"
}, '打開原文': { click: function (element) { window.open("http:///a/bjac/qjaheda1.htm"); } }
}, { disable_native_context_menu: true, leftClick: true }
);
//例3
$('.target3 li').contextMenu('context-menu-2', {
'變大!': {
click: function (element) { element.addClass('big-font') },
klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
}
}, {
disable_native_context_menu: true,
showMenu: function (element) { element.addClass('green'); },
hideMenu: function (element) { element.removeClass('green'); }
});
});
</script>
</body>
</html>