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


Posted in Javascript onApril 17, 2016

今天来总结下bootstrap的一个小组件的应用。好了,不说废话,进入正题吧。

一、ContextMenu介绍

一个需求:表格行调序,支持多选调序,并且可以不连续多选。什么意思呢?先来看看需要实现的效果图:

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

需求是:需要将选中的6、8、9行移动到第2行和第3行之间。撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢。说做咱就做,于是找组件,搜索“bootstrap 右键菜单”。最终找到了我们的ContextMenu组件,仔细研究之后,觉得效果还行,所以在此分享出来供需要使用的园友参考。

ContextMenu开源地址:https://github.com/sydcanem/bootstrap-contextmenu

ContextMenu使用Demo:http://sydcanem.com/bootstrap-contextmenu/

二、ContextMenu效果

初始右键效果

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

运用到项目中

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

执行菜单功能后

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

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

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

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="/Content/boostrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

2、html准备

<div id="context-menu">
  <ul class="dropdown-menu" role="menu">
   <li><a tabindex="-1" href="#" operator="top">插入此行上面</a></li>
   <li><a tabindex="-1" href="#" operator="bottom">插入此行下面</a></li>
  </ul>
 </div>

3、JS初始化

 代码不难,就是些表格行操作的逻辑。需要说明的地方:

(1)表格行执行remove和insert之后,需要重新初始化右键菜单功能,否则,右键一次之后,就不再起作用。

(2)如果菜单功能项比较多,需要使用分割线来分组。只需要加<li class="divider"></li>就能搞定。

<div id="context-menu2">
   <ul class="dropdown-menu" role="menu">
    <li><a tabindex="-1">Action</a></li>
    <li><a tabindex="-1">Another action</a></li>
    <li><a tabindex="-1">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1">Separated link</a></li>
   </ul>
  </div>

(3)如果想要实现鼠标移动到菜单上面显示蓝色背景,则需要引用另一个css文件即可。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

效果如下:

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是bootstrap-ContextMenu组件的一些简单用法。可能不够完美,但是对于一般的右键菜单需求能很好的解决。

Javascript 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
vue-hook-form使用详解
Apr 07 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
js实现select二级联动下拉菜单
Apr 17 #Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 #Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
node.js的事件机制
2017/02/08 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Django中使用Celery的方法示例
2018/11/29 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
开学典礼演讲稿
2014/05/23 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
思品教学工作总结
2015/08/10 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python