简单好用的JQ右键弹出菜单
妙网小编 发表于2016年12月31日 13:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航——点击弹出内容</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.content{margin:0 auto;width:360px;}
.content p{margin:20px 0 0 0;border:solid 1px #C5D8FF;background:#EDF2FF;padding:10px;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201311/jiaoben1612/js/jquery.contextmenu.r2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('.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');
}
}
});
$('.demo2').contextMenu('myMenu2',{
menuStyle:{
border: '2px solid #000'
},
itemStyle :{
fontFamily: 'verdana',
backgroundColor: '#666',
color: 'white',
border: 'none',
padding: '1px'
},
itemHoverStyle: {
color: '#fff',
backgroundColor: '#0f0',
border: 'none'
}
});
$('.demo3').contextMenu('myMenu3',{
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>
<div class="contextMenu" id="myMenu1">
<ul>
<li id="open"> Open</li>
<li id="email">Email</li>
<li id="save">Save</li>
<li id="delete">Delete</li>
</ul>
</div>
<div class="contextMenu" id="myMenu2">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>
<li id="item_5">Item 5</li>
<li id="item_6">Item 6</li>
<li id="item_7">Item 7</li>
<li id="item_8">Item 8</li>
</ul>
</div>
<div class="contextMenu" id="myMenu3">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
</ul>
</div>
<div class="content">
<p class="demo1"><b>演示</b> 右键单击我的! !</p>
<p class="demo2">在这个段落里面右键点击触发菜单</p>
<p style="font-weight: bold;">
<span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">不显示菜单</span>
<span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">显示第一项</span>
<span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">全部显示</span>
</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航——点击弹出内容</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.content{margin:0 auto;width:360px;}
.content p{margin:20px 0 0 0;border:solid 1px #C5D8FF;background:#EDF2FF;padding:10px;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201311/jiaoben1612/js/jquery.contextmenu.r2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('.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');
}
}
});
$('.demo2').contextMenu('myMenu2',{
menuStyle:{
border: '2px solid #000'
},
itemStyle :{
fontFamily: 'verdana',
backgroundColor: '#666',
color: 'white',
border: 'none',
padding: '1px'
},
itemHoverStyle: {
color: '#fff',
backgroundColor: '#0f0',
border: 'none'
}
});
$('.demo3').contextMenu('myMenu3',{
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>
<div class="contextMenu" id="myMenu1">
<ul>
<li id="open"> Open</li>
<li id="email">Email</li>
<li id="save">Save</li>
<li id="delete">Delete</li>
</ul>
</div>
<div class="contextMenu" id="myMenu2">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>
<li id="item_5">Item 5</li>
<li id="item_6">Item 6</li>
<li id="item_7">Item 7</li>
<li id="item_8">Item 8</li>
</ul>
</div>
<div class="contextMenu" id="myMenu3">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
</ul>
</div>
<div class="content">
<p class="demo1"><b>演示</b> 右键单击我的! !</p>
<p class="demo2">在这个段落里面右键点击触发菜单</p>
<p style="font-weight: bold;">
<span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">不显示菜单</span>
<span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">显示第一项</span>
<span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">全部显示</span>
</p>
</div>
</body>
</html>
共有3560阅 / 0评我要评论
- 还没有评论呢，快抢沙发~
发表你的评论吧返回顶部
!评论内容需包含中文