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 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
layui table设置某一行的字体颜色方法
Sep 05 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jquery实现的树形目录实例
2015/06/26 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Javascript之高级数组API的使用实例
2019/03/08 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
报纸媒体创意广告词
2014/03/17 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL