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 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
js控制table合并具体实现
Feb 20 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
详解php中 === 的使用
2016/10/24 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
Vue实现购物车功能
2017/04/27 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python实现飞机大战
2018/09/11 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
毕业生自我推荐
2013/11/04 职场文书
酒店端午节促销方案
2014/02/18 职场文书
七匹狼男装广告词
2014/03/21 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
写给领导的感谢信
2015/01/22 职场文书
创业计划书之物流运送
2019/09/17 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Java的Object类的九种方法
2022/04/13 Java/Android