JS component Bootstrap ContextMenu right-click menu usage, contextmenu right-click menu

JS component Bootstrap ContextMenu right-click menu usage, contextmenu right-click menu

Today we will summarize the application of a small component of bootstrap. Okay. Let's get started.

1. ContextMenu Introduction

One requirement: Table row order adjustment, supports multi-select order, and can be multiple consecutive selections. What does it mean? Let's take a look at the implementation:

Required: you need to move the selected rows 6, 8, and 9 to the range of rows 2nd and 3rd. In terms of technology, if you want to use at least one operation to achieve the above effect, the blogger thought of the right-click function. If you can right-click on lines 10 or 2nd, right-click the menu to move the selected row to the corresponding position. Is this the easiest way. Let's just do it. Then, find the component and search for "bootstrap right-click menu ". Finally, we found our ContextMenu component. After careful research, we thought the effect was okay. So I would like to share it with you for reference.

ContextMenu Open Source Address: https://github.com/sydcanem/bootstrap-contextmenu

ContextMenu uses Demo: http://sydcanem.com/bootstrap-contextmenu/

Ii. ContextMenu Effect

Initial context menu

Apply to project

After the menu function is executed

3. ContextMenu code example
In fact, let's look at how to use it.

1. reference the corresponding file. The key is on two bootstrap-contextmenu.js and pretpipeline. 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 preparation

<Div id = "context-menu"> <ul class = "dropdown-menu" role = "menu"> <li> <a tabindex = "-1" href = "# "operator =" top "> insert this row </a> </li> <a tabindex ="-1 "href =" # "operator =" bottom "> insert the following row </a> </li> </ul> </div>

3. JS Initialization

The code is not difficult, but the logic of some table row operations. Description:

(1) After the table rows are removed and inserted, you need to re-initialize the right-click menu function. Otherwise, after the right-click operation, it will no longer work.

(2) If there are many menu functions, You need to group them by dividing lines. You only need to add <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) If you want to move the mouse over the menu to display a blue background, you need to reference another css file.

Copy codeThe Code is as follows: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "stylesheet">

The effect is as follows:

The above are some simple usage of the bootstrap-ContextMenu component. It may not be perfect, but it can be well solved for general right-click menu requirements.