右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
<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("您点击了“保存”项"+Item.nodeName);
},
'Li4': function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
});
</script>
</body>
需要注意的是:
1、function(Item)中Item是什么意思?
在这个例子里边item参数没有作用,类似于一个对象,它作用是向匿名函数里传递你当前点击的元素。
如果把代码改为:
$(".tip").show().html("您点击了“"+Item.nodeName+"”项");
这样点击之后,会提示你点击的标签名input。
2、$("#btnSubmit").contextMenu("sysMenu", { bindings}的"sysMenu"是取 id="sysMenu"。
3、ID为contextMenu的这个div为什么不显示?
jquery内部已经设置好.contextMenu的css属性:display:none