详解bootstrap用dropdown-menu实现上下文菜单
详解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(); });
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍Bootstrap CSS组件之下拉菜单(dropdown)，包括了Bootstrap CSS组件之下拉菜单(dropdown)的使用技巧和注意事项，需要的朋友参考一下 Bootstrap下拉菜单，常用在开发项目中，今天为大家介绍介绍 dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu 例子见下拉菜单.htm
-
Overview Quick setup Plugin configuration Overview This plugin allows adding a configurable dropdown menu to the table's column headers. The dropdown menu acts like the Context Menu, but is triggered
-
描述 (Description) 下拉菜单插件用于在主菜单下创建子菜单。 data-dropdown-menu属性有助于将嵌套菜单转换为下拉菜单列表。 下表描述了不同类型的下拉菜单以及说明。 Sr.No. 功能和描述 1 Horizontal 通过将属性data-dropdown-menu和类下拉列表包含在菜单容器中来设置下拉列表。 2 Vertical 通过将类垂直包含在顶级菜单中，可以垂直显示
-
描述 (Description) 下拉菜单用于以列表格式显示链接。 例子 (Example) 以下示例演示了在Foundation中使用dropdown menu - <!doctype html> <head> <meta charset = "utf-8" /> <meta http-equiv = "x-ua-compatible" content = "ie
-
下拉选择。 Usage 全部引入 import { Dropdown } from 'beeshell'; 按需引入 import { Dropdown } from 'beeshell/dist/modules/Dropdown'; Examples Code 详细 Code import { Dropdown } from 'beeshell'; <Dropdown ref={(c)
-
Toggle contextual overlays for displaying lists of links and more with the LCUI dropdown component. Overview Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’
-
Dropdown 下拉菜单 1.6.3 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 使用前说明： 该组件必须结合u-dorpdown和u-dropdown-item一起使用，展开的内容由u-dropdown-item通过传递参数或者slot提供 组件的菜单栏标题由u-dropdown-item通过title参数提供
-
将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上，展开更多操作。 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-