Lassen Sie uns heute die Anwendung eines Bootstrap -Widgets zusammenfassen. Ok, rede nicht unsinn, lass uns auf den Punkt kommen.
1. Einführung in den Kontextmenu
Eine Anforderung: Bestellung für Tabellenzeile, unterstützt mehrere Selekten und kann diskontinuierliche Mehrfach ausgewählt werden. Was bedeutet es? Schauen wir uns die Renderings an, die implementiert werden müssen:
Die Anforderung lautet: Die ausgewählten Linien 6, 8 und 9 müssen zwischen Reihe 2 und Reihe 3 bewegt werden. Abgesehen von der technischen Sicht, wenn Sie den geringsten Betrieb verwenden möchten, um die oben genannten Effekte zu erzielen, dachte der Blogger über die Rechtsklick-Funktion nach. Wenn Sie mit der rechten Maustaste in Zeile 2 oder Zeile 3 auf die Maus klicken und die ausgewählte Zeile über die Funktion mit der Rechtsklickmenü in die entsprechende Position verschieben können, ist dies nicht die einfachste? Wir machen es einfach, also suchen wir nach der Komponente und suchen nach "Bootstrap-Klickmenü". Schließlich fanden wir unsere KontextmENU -Komponente. Nach sorgfältigem Studium waren wir der Meinung, dass der Effekt in Ordnung war, also teilten wir es hier als Referenz von Gärtnern, die ihn verwenden müssen.
ContextMenu Open Source-Adresse: https://github.com/sydcanem/bootstrap-contextMenu
ContextMenu verwendet Demo: http://sydcanem.com/bootstrap-contextmenu/
2. Kontextmenu -Effekt
Erstklicker Effekt
Bewerben Sie sich für das Projekt
Nach der Ausführung der Menüfunktion
A.
Eigentlich ist es einfach so einfach, dass wir uns ansehen, wie man es benutzt.
1. Verweisen Sie auf die entsprechende Datei. Der Schlüssel sind die beiden Bootstrap-ContextMenu.js und 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" src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. HTML -Zubereitung
<div id = "context-menu"> <ul rollen = "Menü"> <li> <a tabindex = "-1" href = "#" operator = "top"> oberhalb dieser Zeile einfügen </a> </li> <li> <a tabIndex = "-1" href = "#" operator = "bodens.
1. JS -Initialisierung
Der Code ist nicht schwierig, es ist nur die Logik der Tabellenzeilenvorgänge. Wo zu erklären:
(1) Nach dem Ausführen von Entfernen und Einfügen in die Tabellenzeile muss die Funktion mit der rechten Klick-Menü erneut initialisiert werden. Andernfalls funktioniert es nach der rechten Maustaste nicht mehr.
(2) Wenn es viele Menüfunktionselemente gibt, müssen Sie sich angeben, um sie zu teilen. Fügen Sie einfach <li> </li> hinzu, um es zu erledigen.
<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) Wenn Sie die Maus in das Menü verschieben möchten, um einen blauen Hintergrund anzuzeigen, müssen Sie sich auf eine andere CSS -Datei verweisen.
Die Codekopie lautet wie folgt: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "Stylesheet">
Die Effekte sind wie folgt:
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Die oben genannten sind einige einfache Verwendungen der Bootstrap-ContextMenu-Komponente. Es ist vielleicht nicht perfekt, kann aber für die allgemeinen Klickmenüanforderungen gut gelöst werden.