Today, let’s summarize the application of a widget of bootstrap. OK, don't talk nonsense, let's get to the point.
1. Introduction to ContextMenu
One requirement: table row ordering, supports multiple-select ordering, and can be discontinuous multiple-selected. What does it mean? Let’s take a look at the renderings that need to be implemented:
The requirement is: the selected lines 6, 8, and 9 need to be moved between row 2 and row 3. Putting aside the business, from a technical perspective, if you want to use the least operation to achieve the above effects, the blogger thought of the right-click function. If you can right-click the mouse on line 2 or line 3, and move the selected line to the corresponding position through the right-click menu function, isn't this the easiest? We just do it, so we look for the component and search for "bootstrap right-click menu". Finally, we found our ContextMenu component. After careful study, we felt that the effect was OK, so we shared it here for reference by gardeners who need to use it.
ContextMenu open source address: https://github.com/sydcanem/bootstrap-contextmenu
ContextMenu uses Demo: http://sydcanem.com/bootstrap-contextmenu/
2. ContextMenu effect
Initial right-click effect
Apply to the project
After executing the menu function
3. ContextMenu code example
Actually, it’s just such a simple thing, let’s take a look at how to use it.
1. Reference the corresponding file. The key is the two bootstrap-contextmenu.js and prettify.js
<script src="/Scripts/jquery-1.9.1.min.js"></script><script src="/Content/bootstrap/js/bootstrap.min.js"></script><script src="/Content/boottrap-contextmenu/bootstrap-contextmenu.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
2. HTML preparation
<div id="context-menu"> <ul role="menu"> <li><a tabindex="-1" href="#" operator="top">Insert above this line</a></li> <li><a tabindex="-1" href="#" operator="bottom">Insert below this line</a></li> </ul> </div>
3. JS initialization
The code is not difficult, it is just the logic of table row operations. Where to explain:
(1) After executing remove and insert in the table row, the right-click menu function needs to be re-initialized. Otherwise, after right-clicking once, it will no longer work.
(2) If there are many menu function items, you need to use dividing lines to group them. Just add <li></li> to get it done.
<div id="context-menu2"> <ul 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></li> <li><a tabindex="-1">Separated link</a></li> </div>
(3) If you want to move the mouse to the menu to display a blue background, you need to refer to another css file.
The code copy is as follows:<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
The effects are as follows:
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above are some simple uses of the bootstrap-ContextMenu component. It may not be perfect, but it can be solved well for the general right-click menu requirements.