如何使用JS组件的Bootstrap ContextMenu的右键菜单

今天，我们将总结bootstrap的一个小组件的应用。好了，让我们废话少说，言归正传。

1.介绍上下文菜单。

一个要求：表行重新排序，支持多选，可以间断多选。你什么意思？让我们首先看看需要实现的渲染：

是：所选的第6、8和9行需要在第二行和第三行之间移动。业务不谈，从技术角度来说，博主想用最少的操作达到以上效果，就想到了右键功能。如果他可以在第二行或者第三行点击鼠标右键，那么通过右键菜单功能将选中的行移动到对应的位置会不会是最简单的呢？照你说的做，找到组件，搜索“bootstrap右键菜单”。最后，我们找到了我们的上下文菜单组件。经过仔细研究，发现效果还可以，在这里分享一下，供需要使用的园林朋友参考。

上下文菜单开放源代码地址：https://github.com/sydcanem/bootstrap-contextmenu.

菜单使用演示：http://sydcanem.com/bootstrap-contextmenu/.

第二，上下文菜单效果。

初始右键单击效果

应用于项目。

执行菜单功能后，

第三，ContextMenu代码示例其实就是这么简单的一个东西，我们来看看如何使用它。

1、引用相应的文件。关键是两个bootstrap-contextmenu.js和prettify.js

script src=' http :/Scripts/jquery-1 . 9 . 1 . min . js '/script script src=' http :/Content/bootstrap/js/bootstrap . min . js '/script script src=' http :/Content/bootstrap-context menu/bootstrap-context menu . js '/script script src=' http :http://cdnjs . cloudflare.com/Ajax/libs/pretify/r 222

div id=' context-menu ' ul class=' drop down-menu ' role=' menu ' liatabindex='-1 ' href=' # ' operator=' top '在此行上方插入/a/Li liatabindex='-1 ' href=' # ' operator=' bottom '插入此行。

代码不难，只是表行操作的逻辑。需要说明的地方：

(1)移除并插入表格行后，需要重新初始化右键菜单功能；否则，右键单击一次后将不再工作。

(2)如果菜单功能项较多，需要用分隔线进行分组。只需添加li class='分频器'/li。

div id=' context-menu 2 ' ul class=' drop down-menu '角色=' menu ' lia tabindex='-1 ' Action/a/Li lia tabindex='-1 '另一个操作/a/Litabindex='-1 '此处还有其他内容/a/Li Li class=' divider '/Li Litabindex='-1 '分隔链接/a/li/ul/div (3)如果要将鼠标移动到菜单以显示蓝色背景，则需要引用另一个css文件。

复制的代码如下： link href=' http://netdna . bootstrapcn.com/Twitter-bootstrap/2 . 3 . 2/CSS/bootstrap-combined . min . CSS ' rel='样式表'。

效果如下：

如果你还想深入学习，可以点击这里学习，然后为你附上两个精彩的话题：Bootstrap学习教程Bootstrap实用教程。

以上是bootstrap-ContextMenu组件的一些简单用法。它可能并不完美，但可以很好地解决一般的右键菜单需求。