右键菜单插件-contextmenu

2017-11-25  本文已影响0人  你说我的笑绽放在过去

右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:

$(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()方法绑定后,选中文本框,点击右键时,弹出快捷菜单,点击“新建”选项时,显示操作对应内容。

上一篇 下一篇

猜你喜欢

热点阅读