详解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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP新手上路(十二)
2006/10/09 PHP
php 删除记录实现代码
2009/03/12 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
Using the TextRange Object
2006/10/14 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
python实现事件驱动
2018/11/21 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python的slice notation的特殊用法详解
2019/12/27 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
文明演讲稿范文
2014/05/12 职场文书
毕业论文致谢信
2015/05/14 职场文书
谢师宴学生致辞
2015/07/27 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
新手入门Mysql--sql执行过程
2021/06/20 MySQL
一起来学习Python的元组和列表
2022/03/13 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
Python保存并浏览用户的历史记录
2022/04/29 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server