DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS組件Bootstrap ContextMenu右鍵菜單使用方法
JS組件Bootstrap ContextMenu右鍵菜單使用方法
編輯:關於JavaScript     

今天來總結下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效果

初始右鍵效果

運用到項目中

執行菜單功能後

三、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">

效果如下:

如果大家還想深入學習,可以點擊這裡進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰教程

以上就是bootstrap-ContextMenu組件的一些簡單用法。可能不夠完美,但是對於一般的右鍵菜單需求能很好的解決。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved