`
lynnlysh
  • 浏览: 179293 次
  • 性别: Icon_minigender_2
  • 来自: 天津
社区版块
存档分类
最新评论

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="#">任务指派</a></li>
								<li><a tabindex="-1" href="#">任务监听</a></li>
								<li><a tabindex="-1" href="#">任务表单</a></li>
								<li class="divider"></li>
								<li><a tabindex="-1" href="#">...</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用dropdown-menu实现上下文菜单

    详解bootstrap用dropdown-menu实现上下文菜单 写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通的...

    Bootstrap 下拉菜单(Dropdowns)

    这种设计模式常见于网页顶部导航、侧边栏菜单以及上下文操作区域,为用户提供了一种节省空间且易于操作的交互方式。 在Bootstrap中,创建一个基本的下拉菜单需要以下步骤: 1. **基础结构**: - 首先,你需要一个...

    基于Bootstrap的jQuery右键上下文菜单插件

    以上就是一个基本的基于Bootstrap和jQuery的右键上下文菜单实现。你可以根据需求调整菜单项、样式和行为,使其更加符合你的应用。此外,这个插件可以通过进一步封装和扩展,例如添加自定义事件、动态生成菜单等,来...

    鼠标右键上下文菜单配置js代码插件.zip

    在自定义上下文菜单时,可能会利用Bootstrap的类名,如`.dropdown-menu`来创建下拉菜单样式,`.dropdown-item`定义菜单项样式,以及`.dropdown-toggle`用于触发下拉菜单显示。 `js`目录可能包含的是JavaScript源...

    bootstrap树形下拉框 下拉框树形菜单

    "bootstrap树形下拉框 下拉框树形菜单"是指在Bootstrap的上下文菜单(Dropdown)中集成一个树形结构,使得用户可以在下拉选项中进行多级选择,这种功能在数据分类或层级关系展示时非常实用。 在Bootstrap中,下拉框...

    Bootstrap4 下拉菜单

    下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。 实例 Dropdown button Link 1 Link 2 Link 3 实例解析 .dropdown 类用来指定一个下拉菜单。 我们可以使用一个按钮或链接来打开下拉菜单, ...

    Bootstrap实现下拉菜单效果

    下拉菜单用于显示链接列表的可切换、有上下文的菜单。 1、案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码。 &lt;div class=dropdown&gt; &lt;button class=btn dropdown-toggle type...

    JS组件Bootstrap ContextMenu右键菜单使用方法

    Bootstrap ContextMenu 是一个基于 Bootstrap 框架的 JavaScript 插件,用于在网页上创建和管理自定义右键菜单,即上下文菜单。这种菜单可以在用户在页面上使用鼠标右键点击时触发,通常用于提供快捷操作或者对页面...

    Bootstrap风格的zTree右键菜单

    在实际应用中,zTree的右键菜单功能可以用于各种场景,如数据库管理、文件系统操作或任何需要树形结构并支持上下文操作的地方。用户可以通过右键点击节点来触发不同的功能,如刷新、创建、删除、移动等,大大提高了...

    jQuery右键点击指定区域下拉菜单代码.zip

    这通常涉及到阻止默认的右键菜单(浏览器自带的上下文菜单),然后动态定位并显示自定义的Bootstrap下拉菜单。代码可能类似以下示例: ```javascript $(document).on('contextmenu', '#yourElement', function(e) {...

    右键菜单BootstrapMenu.min.js

    在前端开发中,右键菜单通常用于提供上下文相关的操作选项,为用户提供更直观、便捷的交互体验。Bootstrap作为一款广泛使用的前端UI库,以其响应式设计和易于使用的组件而闻名,而BootstrapMenu.min.js则进一步扩展...

    bootstrap功能js

    只需添加`.dropdown`和`.dropdown-menu`类,并使用`.dropdown-toggle`来触发下拉菜单的显示和隐藏,即可实现这一功能。 第四,按钮组(Button Group)和按钮下拉(Button Dropdown)提供了将多个按钮组合在一起或者...

    详解Bootstrap的aria-label和aria-labelledby应用

    在Bootstrap的下拉菜单示例中,`aria-labelledby`属性引用了按钮的ID“dropdownMenu1”。这样,当用户聚焦到下拉菜单时,屏幕阅读器会读出与按钮相关的文本“选择您的职位”,而无需在`aria-label`中重复写入这一...

    dtree带漂亮的右键菜单

    当用户在dtree的某个节点上右击时,阻止默认的浏览器上下文菜单,然后显示自定义的菜单项。这可以通过以下代码实现: ```javascript $("#tree").on("contextmenu", ".dTreeNode", function(event) { event....

    jQuery右键点击指定区域下拉菜单特效代码

    其下拉菜单组件是Bootstrap中的一个核心组件,提供了创建导航菜单和上下文菜单的简便方法。 实现这个特效,首先需要在HTML页面中引入jQuery库和Bootstrap的CSS及JS文件。接着,需要定义一个具有特定类名的元素,...

    jQuery右键点击下拉菜单插件特效代码

    jQuery提供了一个强大的库,使得开发者能够轻松实现这样的功能,特别是通过结合Bootstrap的下拉菜单组件,可以创建出美观且易于使用的右键下拉菜单。下面我们将详细探讨如何利用jQuery和Bootstrap来构建这样的插件,...

Global site tag (gtag.js) - Google Analytics