Comment utiliser le composant JS Bootstrap ContextMenu, clic droit menu_javascript skills

Aujourd'hui, je vais résumer l'application d'un petit composant de bootstrap. Bon, sans plus tarder, venons-en au fait.

1. Introduction au menu contextuel

Une exigence : ordre des lignes du tableau, prise en charge de l'ordre des sélections multiples et de la sélection multiple non consécutive. Qu'est-ce que ça veut dire? Voyons d'abord les rendus à réaliser :

La condition est la suivante : les lignes sélectionnées 6, 8 et 9 doivent être déplacées entre les lignes 2 et 3. Mis à part les affaires, d'un point de vue purement technique, afin d'obtenir l'effet ci-dessus avec le moins d'opérations, le blogueur a pensé à la fonction de clic droit. Si vous pouvez cliquer avec le bouton droit de la souris sur la 2ème ou la 3ème ligne, vous le pouvez. sélectionnez l'élément sélectionné via la fonction de menu contextuel. N'est-ce pas le moyen le plus simple de déplacer les lignes vers les positions correspondantes ? Faisons-le, nous avons donc recherché le composant et recherché "menu contextuel d'amorçage". Enfin, nous avons trouvé notre composant ContextMenu Après une étude approfondie, j'ai estimé que l'effet était correct, je l'ai donc partagé ici pour référence des jardiniers qui ont besoin de l'utiliser.

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

ContextMenu utilisant la démo : http://sydcanem.com/bootstrap-contextmenu/

2. Effet Menu contextuel

Effet initial du clic droit

Postuler aux projets

Après avoir exécuté la fonction de menu

3. Exemple de code ContextMenu
En fait, c’est tellement simple, voyons comment l’utiliser.

1. Citez les documents correspondants. Les principaux sont bootstrap-contextmenu.js et 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. Préparation 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. Initialisation JS

Le code n'est pas difficile, juste une logique de fonctionnement des lignes du tableau. Choses qui nécessitent une explication :

(1) Après avoir effectué une suppression et une insertion sur une ligne du tableau, la fonction du menu contextuel doit être réinitialisée, sinon elle ne fonctionnera plus après un clic droit une fois.

(2) S'il existe de nombreux éléments de fonction de menu, vous devez utiliser des lignes de séparation pour les regrouper. Ajoutez simplement 9d1f934341079c21cf67f67b315c4d5ebed06894275b65c1ab86501b08a632eb et ce sera fait.

<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) Si vous souhaitez afficher un fond bleu lorsque la souris passe sur le menu, vous devez référencer un autre fichier css.

Copier le code Le code est le suivant :

af3f8f426158fc334a0c19291c2a75c7

L'effet est le suivant :

Ce qui précède sont quelques utilisations simples du composant bootstrap-ContextMenu. Ce n'est peut-être pas parfait, mais cela peut très bien résoudre les besoins généraux du menu contextuel.