详解bootstrap用dropdown-menu实现上下文菜单


Posted in Javascript onSeptember 22, 2017

详解bootstrap用dropdown-menu实现上下文菜单

写在前面:

所谓上下文菜单,它与一般菜单的区别在于:

通过右键触发显示在鼠标右键点击处

鼠标在别处点击后,该菜单消失

实现方法:

在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现。

代码:

<div id="settingInGraph"> 
              <ul class="dropdown-menu" role="menu" 
                aria-labelledby="dropdownMenu" id="contextMenu"> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务指派</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务监听</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务表单</a></li> 
                <li class="divider"></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a></li> 
              </ul> 
            </div>
$("#settingInGraph").mousedown(function(e) { 
if (3 == e.which) { 
     document.oncontextmenu = function() {return false;} 
     $("#contextMenu").hide(); 
     $("#contextMenu").attr("style","display: block; position: fixed; top:" 
     + e.pageY 
     + "px; left:" 
     + e.pageX 
     + "px; width: 180px;"); 
     $("#contextMenu").show(); 
     } 
}); 
$("#settingInGraph").click(function(e) { 
$("#contextMenu").hide();              });

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
js编写的treeview使用方法
Nov 11 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
javascript计算渐变颜色的实例
Sep 22 #Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 #Javascript
原生JS实现日历组件的示例代码
Sep 22 #Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 #Javascript
Bootstrap Table 删除和批量删除
Sep 22 #Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 #Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 #Javascript
You might like
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python实现图片转字符画的完整代码
2021/02/21 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
入党自我评价优缺点
2014/01/25 职场文书
小组合作学习反思
2014/02/18 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
电子工程求职信
2014/07/17 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
高二语文教学反思
2016/02/16 职场文书