右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
例如,选中页面<textarea>元素,点击右键,弹出插件绑定的快捷菜单,点击菜单中的各个选项,便在页面中显示操作的对应名称。弹出插件绑定的快捷。
<body>
<div id="divtext">
<div class="title"><span class="fl">点击右键</span></div>
<div class="content">
<textarea id=:"textContent" cols="36" row="5"></textarea>
<div class="tip></div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li1"><img src="Imgages/new.png" alt=""/>新建</li>
<li id="Li2><img src="Imgages/folder.png" alt=""/>打开</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(fuction(){
$("textContent").contextMenu('sysMenu',
{bindings:
{"Li1:fuction(Item){
$('. tip").show().html("您点击了“”新建“”选项);
},
{"L2":fuction(Item){
$(". tip").show().html("您点击了“打开选项”);
}
}
});
</script>
</body>
当文本框与右键菜单通过插件contextmenu()方法绑定后,选中文本框,点击右键时,弹出快捷菜单,点击“新建”选项时,显示操作对应内容。