Dans l'article précédent, nous avons utilisé EasyUi pour créer un cadre pour la page backend. Cliquez ici pour le voir. Dans cette section, nous utilisons principalement la technologie EasyUI pour simplement implémenter le menu backend. Nous allons d'abord créer des fonctions simples et continuerons à les enrichir plus tard.
1. Implémentez le menu de gauche
Premièrement, regardez les rendus:
Nous pouvons cliquer sur "Opérations de base" et "autres opérations" pour changer d'options de menu. Dans les options spécifiques, cliquez sur différentes connexions et s'affichera à droite. Faisons d'abord le menu à gauche.
Il existe deux contenus principaux du menu à gauche: "Gestion des catégories" et "Gestion des produits". Nous savons que dans la section précédente, le cadre de la page d'arrière-plan doit être construit dans Aindex.jsp, nous avons donc maintenant besoin de faire ces deux hyperliens et de les mettre dans la div correspondante dans Aindex.jsp. Nous créons donc d'abord un nouveau fichier temp.jsp dans le dossier webroot en tant que fichier de développement temporaire, car vous pouvez le mesurer directement en écrivant JSP ici. Une fois l'effet disponible, copiez le contenu à l'emplacement correspondant dans Aindex.jsp.
La page temp.jsp est la suivante:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! Doctype Html public "- // w3c // dtd html 4.01 transitional // en"> <html> {Largeur: 200px; / * Border: 1px Solid Red; * /} #Menu UL {list-style: Aucun; rembourrage: 0px; marge: 0px; } #menu ul li {border-bottom: 1px solide #fff; } #menu ul li a {/ * Convertir la balise A en un élément de niveau de bloc d'abord pour définir la largeur et l'espacement intérieur * / affichage: bloc; Color en arrière-plan: # 00A6AC; Couleur: #FFF; rembourrage: 5px; Décoration du texte: aucune; } #menu ul li a: hover {background-color: # 008792; } </ style> </ head> <body> <div id = "menu"> <ul> <li> <a href = "#"> Gestion de catégorie </a> <li> <a href = "#"> Gestion des produits </a> </ul> </div> </ body> </html>Il n'y a que deux liens dans Temp.jsp, encapsulés avec Li et placés dans Div. Le CSS ci-dessus définit le style de ces deux liens, puis nous activons Tomcat et testons l'effet comme suit:
Après avoir fait ces deux hyperliens, nous copierons l'UL des deux hyperliens encapsulés sur la position d'affichage du contenu du menu à gauche dans Aindex.jsp, et le modifiez brièvement, comme suit:
La pièce CSS peut être directement prise sur la balise de tête d'Aindex.jsp. Regardez la balise A ci-dessus, qui contient l'attribut de titre, pas le HREF, car nous ne sautons pas sur la nouvelle page, car EasyUi n'est que cette page, nous voulons mettre l'affichage cliqué sur l'onglet Onglet à droite, donc nous écrivons d'abord l'action Jump dans l'attribut de titre, puis changez-le plus tard. Ensuite, nous voulons cliquer sur la gestion des catégories pour faire apparaître la fonction de catégories spécifiques dans l'onglet à droite.
2. Implémentez l'onglet Tab à droite
Pour réaliser la fonction de cliquer sur la barre de menu de gauche pour faire apparaître l'onglet droite, vous devez ajouter du code JS. L'idée d'utiliser EasyUi est: Cliquez d'abord sur l'hyperlien et obtenez le nom de l'hyperlien, car le titre de l'onglet pop-up doit être le même que le nom de l'hyperlien, tel que la "gestion des catégories"; Déterminez ensuite si l'onglet Changement de nom existe déjà, affichez-le s'il existe, créez-le s'il n'existe pas et affichez le contenu à afficher. Regardons le code dans la partie JS:
<script type = "text / javascript"> $ (function () {$ ("a [title]"). cliquez (function () {var text = $ (this) .text (); var href = $ (this) .attr ("title"); // juge s'il existe un onglet correspondant sur le maintenant if ($ ("# tt"). $ ("# tt"). onglets ("select", text);} else {// Créer un nouvel onglet Si ce n'est pas, sinon passer à la balise actuelle $ ("# tt"). Adresse URL, mais ce n'est que la partie du corps // href: 'send_category_query.action'});}}); </cript> Analysons ce code JS. Tout d'abord, obtenez la balise A. Notez que cette balise est une balise A avec l'attribut de titre, qui est l'hyperlien de «gestion de catégorie» ci-dessus, puis cliquez, et il y a une autre fonction dans le clic. Que fait cette fonction? Tout d'abord, obtenez le nom du lien actuel, c'est-à-dire du texte, puis obtenez l'URL via l'attribut de titre (car nous venons d'écrire l'URL à l'attribut de titre). Ensuite, déterminez s'il existe une option (onglet) pour ce nom. S'il y en a, l'option pour ce nom sera affichée et s'il n'y a pas, créez-le.
Jetons un coup d'œil à la déclaration dans If. Tout d'abord, utilisez "#tt" pour obtenir l'objet jQuery à droite, puis appelez la méthode de construction des onglets pour obtenir l'objet Tab. S'il y en a, il reviendra vrai, sinon il reviendra faux. Alors, que signifie les deux paramètres dans TABS ()? Tout d'abord, le premier paramètre est le nom de la méthode, et le deuxième paramètre est le paramètre correspondant du premier paramètre (méthode). Les onglets ("existe", texte) signifie appeler la méthode d'existence d'EasyUi. Le paramètre est le texte, c'est-à-dire déterminer si l'onglet avec le texte du nom existe. De même, les onglets suivants ("SELECT", Texte) signifie sélectionner l'onglet avec le texte du nom à afficher, les onglets ("ADD", {}) signifient la création d'un nouvel onglet, et certaines propriétés de l'onglet nouvellement ajouté sont ajoutées dans {}: le titre signifie le nom, fermé: True signifie qu'il y a un bouton Close, c'est-à-dire la fourche dans le coin supérieur droit et le contenu signifie où amener le contenu à afficher. Plus tard, le contenu d'une page est emballé avec la balise <frame>. Cette page ne peut pas être accessible directement et est redirigea par l'action. On peut voir à partir du nom de l'action qu'il est présenté à la page Web-inf / catégorie / query.jsp. Si nous écrivons quelque chose avec désinvolture dans la balise corporelle sur la page, puis cliquez sur la barre de menu à gauche, le contenu sera affiché dans l'onglet droite. comme suit:
Enfin, mettez le code dans Aindex.jsp ici:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! Doctype Html public "- // w3c // dtd html 4.01 transitional // en"> <html> {Largeur: 60px; / * Border: 1px Solid Red; * /} #Menu UL {list-style: Aucun; rembourrage: 0px; marge: 0px; } #menu ul li {border-bottom: 1px solide #fff; } #menu ul li a {/ * Convertir la balise A en un élément de niveau de bloc d'abord pour définir la largeur et l'espacement intérieur * / affichage: bloc; Color en arrière-plan: # 00A6AC; Couleur: #FFF; rembourrage: 5px; Décoration du texte: aucune; } #menu ul li a: hover {background-color: # 008792; } </ style> <script type = "text / javascript"> $ (function () {$ ("a [title]"). cliquez (function () {var text = $ (this) .text (); var href = $ (this) .attr ("title"); // juge s'il y a un onglet correspondant sur le tout maintenant ($ ("# tt"). $ ("# tt"). onglets ("select", texte);} else {// Créer un nouvel onglet Si ce n'est pas, sinon passer à la balise actuelle $ ("# TT"). mais c'est seulement la partie du corps //href:'send_category_query.action '});}}); }); </cript> </-head> <body> <div data-options = "Region: 'North', Titre: 'Bienvenue à Yigou Backend Management', Split: True" Style = "Height: 100px;"> </div> <div Data-Options = "Region: 'West', Title: 'System Operation', Split: True"> <! data-options = "iConcls: 'icon-save'"> <ul> <li> <a href = "#"> Gestion de catégorie </a> <li> <a href = "#"> Gestion des produits </a> </ul> </v> <div data-options = "iConcls: 'icon-reload'> <ul> <li> <a Href =" # "" <li> <a href = "#"> Gestion des produits </a> </ul> </div> </div> </div> <div data-options = "Region: 'Center', Title: 'Backend Operation Page'" Style = "Padding: 1PX; Background: #eee;"> <div id = "TT" Data-Options = "Fit: true"> <div style = "Padding: 10px; Affiché à l'avenir (type du système d'exploitation actuel, nom de domaine du projet actuel, configuration liée au matériel ou rapport d'affichage </div> </div> </div> </ body> </html> De toute évidence, le code n'a pas été extrait, et CSS et JS sont mélangés dans la même page JSP. Peu importe, il sera extrait ensemble plus tard.
Jusqu'à présent, nous avons terminé la mise en œuvre du menu EasyUi. Ici, nous avons seulement terminé la méthode d'implémentation et le contenu affiché spécifique sera amélioré en fonction des besoins spécifiques.
L'adresse de téléchargement du code source de l'intégralité du projet: //www.vevb.com/article/86099.htm
Adresse originale: http://blog.csdn.net/eson_15/article/details/51297705
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.