How to use the JS component Bootstrap ContextMenu right-click menu_javascript skills

Today I will summarize the application of a small component of bootstrap. Okay, without further ado, let’s get to the point.

1. Introduction to ContextMenu

One requirement: Table row ordering, support for multi-selection ordering, and non-consecutive multi-selection. What does it mean? Let’s first take a look at the renderings that need to be achieved:

The requirement is: the selected rows 6, 8, and 9 need to be moved to between rows 2 and 3. Business aside, from a purely technical perspective, in order to achieve the above effect with the least amount of operations, the blogger thought of the right-click function. If you can right-click the mouse on the 2nd or 3rd line, you can select the selected item through the right-click menu function. Isn't this the simplest way to move the rows to the corresponding positions? Let's do it, so we looked for the component and searched for "bootstrap right-click menu". Finally, we found our ContextMenu component. After careful study, I felt that the effect was okay, so I shared it here for the reference of gardeners who need to use it.

ContextMenu open source address: https://github.com/sydcanem/bootstrap-contextmenu

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

2. ContextMenu effect

Initial right-click effect

Apply to projects

After executing the menu function

3. ContextMenu code example
In fact, it’s such a simple thing, let’s see how to use it.

1. Quote the corresponding documents. The key ones are 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/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">插入此行上面</a></li>
      <li><a tabindex="-1" href="#" operator="bottom">插入此行下面</a></li>
    </ul>
  </div>

3. JS initialization

The code is not difficult, just some table row operation logic. Things that need explanation:

(1) After performing remove and insert on a table row, the right-click menu function needs to be reinitialized, otherwise, it will no longer work after right-clicking once.

(2) If there are many menu function items, you need to use dividing lines to group them. Just add

<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 to the menu to display a blue background, you need to reference another css file.

The effect is as follows:

The above are some simple usages of bootstrap-ContextMenu component. It may not be perfect, but it can solve the general right-click menu needs very well.