Aujourd'hui, résumons l'application d'un widget de bootstrap. Ok, ne parlez pas de bêtises, passons au point.
1. Introduction à ContextMenu
Une exigence: la commande de ligne de table, prend en charge la commande à sélection multiple et peut être sélectionnée à plusieurs sélections. Qu'est-ce que ça veut dire? Jetons un coup d'œil aux rendus qui doivent être mis en œuvre:
L'exigence est: les lignes sélectionnées 6, 8 et 9 doivent être déplacées entre la ligne 2 et la ligne 3. Mettre de côté l'entreprise, d'un point de vue technique, si vous souhaitez utiliser la moindre opération pour réaliser les effets ci-dessus, le blogueur a pensé à la fonction de clic droit. Si vous pouvez cliquer avec le bouton droit sur la souris sur la ligne 2 ou la ligne 3 et déplacer la ligne sélectionnée vers la position correspondante via la fonction de menu avec le bouton droit, n'est-ce pas le plus facile? Nous le faisons simplement, nous recherchons donc le composant et recherchons "Bootstrap Right-Click Menu". Enfin, nous avons trouvé notre composant ContextMenu. Après une étude minutieuse, nous avons estimé que l'effet était OK, nous l'avons donc partagé ici pour référence par les jardiniers qui ont besoin de l'utiliser.
Adresse open source de ContextMenu: https://github.com/sydcanem/bootstrap-contextmenu
ContextMenu utilise la démo: http://sydcanem.com/bootstrap-contextmenu/
2. Effet de contexte
Effet de clic droit initial
Postuler au projet
Après avoir exécuté la fonction de menu
3. Exemple de code ContextMenu
En fait, c'est juste une chose si simple, jetons un coup d'œil à l'utiliser.
1. Référence du fichier correspondant. La clé est les deux bootstrap-contextMenu.js et Prettify.js
<script src = "/ scripts / jquery-1.9.1.min.js"> </ script> <script src = "/ contenu / bootstrap / js / bootstrap.min.js"> </ script> <script src = teneur src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </ script>
2. Préparation HTML
<div id = "context-menu"> <ul role = "menu"> <li> <a tabindex = "- 1" href = "#" operator = "top"> insérer au-dessus de cette ligne </a> </li> <li> <a tabindex = "- 1" href = "#" Operator = "Bottom"> insert sous cette ligne </a> </li> </ul> </ div>
3. Initialisation JS
Le code n'est pas difficile, c'est juste la logique des opérations de la ligne de table. Où expliquer:
(1) Après avoir exécuté Supprimer et insérer dans la ligne de table, la fonction de menu-cliquez avec le bouton droit doit être réinitialisé. Sinon, après un clic droit une fois, cela ne fonctionnera plus.
(2) S'il existe de nombreux éléments de fonction de menu, vous devez utiliser des lignes de division pour les regrouper. Ajoutez simplement <li> </li> pour le faire.
<div id = "context-menu2"> <ul role = "menu"> <li> <a tabindex = "- 1"> action </a> </li> <li> <a tabindex = "- 1"> une autre action </a> </li> <li> <a tabindex = "- 1"> autre chose ici </a> </li> <li> </li> lien </a> </li> </div>
(3) Si vous souhaitez déplacer la souris vers le menu pour afficher un arrière-plan bleu, vous devez vous référer à un autre fichier CSS.
La copie de code est la suivante: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "Stylesheet">
Les effets sont les suivants:
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède est quelques utilisations simples du composant bootstrap-contextMenu. Il n'est peut-être pas parfait, mais il peut être bien résolu pour les exigences du menu de clic droit général.