Im vorherigen Artikel haben wir Easyui verwendet, um ein Framework für die Backend -Seite zu erstellen. Klicken Sie hier, um es anzuzeigen. In diesem Abschnitt verwenden wir hauptsächlich EasyUi -Technologien, um das Backend -Menü einfach zu implementieren. Wir werden zuerst einfache Funktionen erstellen und sie später weiterhin bereichern.
1. Implementieren Sie das linke Menü
Schauen Sie sich zunächst die Renderings an:
Wir können auf "Basic Operations" und "Andere Operationen" klicken, um die Menüoptionen zu wechseln. Klicken Sie in den spezifischen Optionen auf verschiedene Verbindungen und werden rechts angezeigt. Lassen Sie uns zuerst das Menü links erstellen.
Links sind zwei Hauptinhalte des Menüs: "Kategorieverwaltung" und "Produktmanagement". Wir wissen, dass im vorherigen Abschnitt der Framework der Hintergrundseite in aindex.jsp eingebaut werden sollte. Jetzt müssen wir jetzt nur diese beiden Hyperlinks erstellen und sie in die entsprechende DIV in aindex.jsp einfügen. Daher erstellen wir zuerst eine neue temp.jsp -Datei im Webroot -Ordner als temporäre Entwicklungsdatei, da Sie sie direkt messen können, indem Sie JSP hier schreiben. Nachdem der Effekt verfügbar ist, kopieren Sie den Inhalt in den entsprechenden Standort in aindex.jsp.
Die Seite temp.jsp lautet wie folgt:
<%@ page Language = "java" import = "java.util. {Breite: 200px; /*Rand: 1PX Solid Red;*/} #Menu ul {Listenstil: Keine; Polsterung: 0px; Rand: 0px; } #Menu ul li {Border-Bottom: 1px Solid #fff; } #Menu ul li a { /*das A-Tag in ein Element auf Blockebene konvertieren, um die Breite und den inneren Abstand zu setzen* / display: block; Hintergrundfarbe: #00A6AC; Farbe: #fff; Polsterung: 5px; Textdekoration: Keine; } #Menu ul li a: hover {Hintergrundfarbe: #008792; } </style> </head> <body> <div id = "mseu"> <ul> <li> <a href = "#"> Kategorieverwaltung </a> <li> <a href = "#"> Produktmanagement </a> </ul> </div> </body> </html>Es gibt nur zwei Links in temp.jsp, die mit Li eingekapselt und in Div platziert sind. Das obige CSS legt den Stil für diese beiden Links fest, und dann aktivieren wir Tomcat und testen den Effekt wie folgt:
Nachdem wir diese beiden Hyperlinks erstellt haben, kopieren wir die UL der eingekapselten zwei Hyperlinks in die Anzeigeposition des Menüinhalts links in aindex.jsp und modifizieren Sie sie kurz wie folgt:
Der CSS -Teil kann direkt zum Kopf -Tag von Aindex.jsp gebracht werden. Schauen Sie sich das A -Tag oben an, das das Titelsattribut enthält, nicht das HREF, da wir nicht zur neuen Seite springen, da EasyUi genau diese Seite ist. Wir möchten die angeklickte Anzeige auf der Registerkarte Registerkarte rechts einstellen. Als nächstes möchten wir auf Kategorieverwaltung klicken, um die Funktion bestimmter Kategorien auf der Registerkarte rechts zu überholen.
2. Implementieren Sie die Registerkarte Registerkarte rechts rechts
Um die Funktion des Klickens auf die linke Menüleiste zu erkennen, um die rechte Registerkarte zu erzielen, müssen Sie JS -Code hinzufügen. Die Idee, Easyui zu verwenden, lautet: Klicken Sie zuerst auf den Hyperlink und erhalten Sie den Namen des Hyperlinks, da der Titel der Registerkarte Popup mit dem Namen des Hyperlinks wie "Kategorieverwaltung" übereinstimmt. Stellen Sie dann fest, ob die Registerkarte "Name Änderung" bereits vorhanden ist, zeigen Sie ihn an, wenn er existiert, erstellen Sie ihn, wenn er nicht vorhanden ist, und zeigen Sie den zu angezeigten Inhalt an. Schauen wir uns den Code im JS -Teil an:
<script type = "text/javaScript"> $ (function () {$ ("a [title]"). click (function () {var text = $ (this) .Text (); var href = $ (this) .attr ("title"); // beurteilen, ob es eine entsprechende Registerkarte auf der jetzt auf der ($ (#tt "). $ ("#tt"). Tabs ("Select", Text); die URL -Adresse, aber nur der Körperteil // href: 'send_category_query.action'}); </script> Lassen Sie uns diesen JS -Code analysieren. Holen Sie sich zunächst das A -Tag. Beachten Sie, dass ein Tag ein Tag mit dem Title -Attribut ist, das oben "Kategorieverwaltung" ist, und dann klicken, und es gibt eine andere Funktion im Klick. Was macht diese Funktion? Holen Sie sich zuerst den Namen des aktuellen Links, dh Text, und dann die URL durch das Titelattribut (weil wir die URL gerade zum Titelattribut geschrieben haben). Bestimmen Sie als Nächstes, ob es eine Option (Registerkarte) für diesen Namen gibt. Wenn es vorhanden ist, wird die Option für diesen Namen angezeigt, und wenn es keine gibt, erstellen Sie ihn.
Schauen wir uns die Aussage in if an. Verwenden Sie zuerst "#TT", um das JQuery -Objekt auf der rechten Seite zu erhalten, und rufen Sie dann die Registerkarte Konstruktionsmethode auf, um das Registerkartenobjekt zu erhalten. Wenn dies der Fall ist, wird es wahr zurückgegeben, sonst gibt es false zurück. Was bedeuten die beiden Parameter in Tabs ()? Zunächst ist der erste Parameter der Methodenname, und der zweite Parameter ist der entsprechende Parameter des ersten Parameters (Methode). Registerkarten ("existiert", Text) bedeutet, die Existenzmethode von EasyUi aufzurufen. Der Parameter ist Text, dh festzustellen, ob die Registerkarte mit dem Namenstext vorhanden ist. In ähnlicher Weise bedeutet die folgende Registerkarten ("Select", Text), die Registerkarte mit dem zu angezeigten Namen zu auswählen, Registerkarten ("Hinzufügen", {}). Erstellen einer neuen Registerkarte und einige Eigenschaften der neu hinzugefügten Registerkarte werden in {} hinzugefügt. Der Titel bedeutet den Namen, geschlossen: True bedeutet, dass die Schaltfläche "In den rechten Rechten" -Intaste, in dem der Inhalt rechtzeitig ist. Später ist der Inhalt einer Seite mit dem <Iframe> -Tag verpackt. Diese Seite kann nicht direkt zugegriffen werden und wird durch Aktion umgeleitet. Aus dem Namen der Aktion ist er ersichtlich, dass es auf die Seite web-inf/category/query.jsp eingeführt wird. Wenn wir etwas beiläufig in das Körper Tag auf der Seite schreiben und dann links auf die Menüleiste klicken, wird der Inhalt auf der rechten Registerkarte angezeigt. wie folgt:
Geben Sie den Code schließlich hier in aindex.jsp ein:
<%@ page Language = "java" import = "java.util. {Breite: 60px; /*Rand: 1PX Solid Red;*/} #Menu ul {Listenstil: Keine; Polsterung: 0px; Rand: 0px; } #Menu ul li {Border-Bottom: 1px Solid #fff; } #Menu ul li a { /*das A-Tag in ein Element auf Blockebene konvertieren, um die Breite und den inneren Abstand zu setzen* / display: block; Hintergrundfarbe: #00A6AC; Farbe: #fff; Polsterung: 5px; Textdekoration: Keine; } #Menu ul li a: hover {Hintergrundfarbe: #008792; } </style> <script type = "text/javaScript"> $ (function () {$ ("a [title]"). click (function () {var text = $ (this) .Text (); var href = $ (this) .attr ("title"); // beurteilen, ob es einen entsprechenden Registerkarte "text). $ ("#tt"). Tabs ("Select", Text); Adresse, aber es ist nur der Körperteil //href:'Send_Category_query.Action '}); }); </script> </head> <body> <div dato-options = "Region: 'North', Titel: 'Willkommen bei Yigou Backend Management', split: true" style = "height: 100px;"> </div> <div-data-options = "Region: 'West', Titel: 'System Operation', Split: True"> <!-Das System-Menü wird hier angezeigt. data-options="iconCls:'icon-save'"> <ul> <li><a href="#">Category Management</a> <li><a href="#">Product Management</a> </ul> </div> <div data-options="iconCls:'icon-reload'"> <ul> <li><a href="#">Category Management</a> <li> <a href = "#"> Produktmanagement </a> </ul> </div> </div> </div> <div dato-options = "Region: 'Center', Titel: 'Backend-Operation Seite'" style = "padding: 1px; Hintergrund: #EEE; Die Zukunft (der Typ des aktuellen Betriebssystems, der Domänenname des aktuellen Projekts, die hardwarebezogene Konfiguration oder den Anzeigebericht </div> </div> </div> </body> </html> Offensichtlich wurde der Code nicht extrahiert und CSS und JS sind auf derselben JSP -Seite gemischt. Es spielt keine Rolle, es wird später zusammen extrahiert.
Bisher haben wir die Implementierung des EasyUi -Menüs abgeschlossen. Hier haben wir nur die Implementierungsmethode abgeschlossen, und der spezifische angezeigte Inhalt wird entsprechend den spezifischen Anforderungen verbessert.
Die Quellcode -Download -Adresse des gesamten Projekts: //www.vevb.com/article/86099.htm
Originaladresse: http://blog.csdn.net/eson_15/article/details/51297705
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.