JS元件系列,Bootstrap右鍵選單解決方案
前言:有段時間沒發表隨筆了,過個年人都變得懶了。新年剛來上班,今天正好得空,將去年遺留的兩個小元件總結記錄下。有朋友跟我說:你的 bootstrap元件要能夠形成一個可以滿足一般專案需求的系列元件,才有真正的實用價值。想想說得在理。這不今天來總結下bootstrap的一個小 元件的應用。好了,不說廢話,進入正題吧。
一、ContextMenu介紹
年前,博主接到一個需求:表格行調序,支援多選調序,並且可以不連續多選。什麼意思呢?先來看看需要實現的效果圖:
需求是:需要將選中的6、8、9行移動到第2行和第3行之間。撇開業務不說,單純從技術層面來說,要想使用最少操作達到上述效果,博主想到了右鍵功 能,如果能夠在第2行或者第3行上面點選滑鼠右鍵,通過右鍵選單功能將選中的行移動到相應的位置,這樣是不是最簡單呢。說做咱就做,於是找元件,搜尋 “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-ContextMenu元件的一些簡單用法。可能不夠完美,但是對於一般的右鍵選單需求能很好的解決。