慕粉3397896
2017-03-15 00:52
<body>
<div id="divtest">
<div class="title"><span class="fl">点击右键</span></div>
<div class="content">
<input id="btnSubmit" type="button" value="提交" />
<div class="tip"></div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
<li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#divtest").contextMenu("sysMenu",
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您点击了“保存”项");
},
'Li4': function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
看清题目,它就是个右键点击显示自定义菜单的插件!
<!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>
<title>右键菜单插件</title>
<link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title"><span class="fl">点击右键</span></div>
<div class="content">
<input id="btnSubmit" type="button" value="提交" />
<div class="tip"></div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
<li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnSubmit").contextMenu('sysMenu',
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您点击了“保存”项");
},
'Li4': function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
});
</script>
</body>
</html>
为什么没效果啊
自己实现可以绑定鼠标点击事件,如果为右键点击,显示该li、、、
另一个问答解释 了,css里设置了#contextMenu{display:none;}
jQuery基础(五)一Ajax应用与常用插件
69100 学习 · 400 问题
相似问题