右键菜单插件-contextmenu

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第1章 jQuery实现Ajax应用 1-1 使用load()方法异步请求数据 使用load()方法通过Ajax请...
    mo默22阅读 1,731评论 1 9
  • 一、表单验证插件——validate http://www.imooc.com/data/jquery.valid...
    blue_angel阅读 729评论 0 2
  • 表单验证插件—— validate 该插件自带包含必填、数字、URL 在内容的验证规则,即时显示异常信息,此外,还...
    孤佣阅读 484评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,008评论 25 708
  • 世间最美好的风景就是在你的眼中看到了自己的身影磨蚀。 即使风雨再大,时光荏苒,我依旧。 即使孤独终老,一意孤行,我...
    莫菁阅读 229评论 0 0