En el artículo anterior, utilizamos EasyUI para crear un marco para la página de backend. Haga clic aquí para verlo. En esta sección, utilizamos principalmente la tecnología EasyUI para simplemente implementar el menú de backend. Primero crearemos funciones simples y continuaremos enriqueciéndolas más tarde.
1. Implemente el menú izquierdo
Primera mira a las representaciones:
Podemos hacer clic en "Operaciones básicas" y "otras operaciones" para cambiar las opciones de menú. En las opciones específicas, haga clic en diferentes conexiones y se mostrará a la derecha. Hagamos primero el menú a la izquierda.
Hay dos contenidos principales del menú a la izquierda: "Gestión de categorías" y "Gestión de productos". Sabemos que en la sección anterior, el marco de la página de fondo debe construirse en aindex.jsp, por lo que ahora solo necesitamos hacer estos dos hipervínculos y ponerlos en el DIV correspondiente en aindex.jsp. Por lo tanto, primero creamos un nuevo archivo temp.jsp en la carpeta Webroot como un archivo de desarrollo temporal, porque puede medirlo directamente escribiendo JSP aquí. Una vez que el efecto esté disponible, copie el contenido a la ubicación correspondiente en aindex.jsp.
La página temp.jsp es la siguiente:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transición // en"> <html> <fead> <%@ include file = "/public/head.jspf"%> <type de estilo = "text/" {ancho: 200px; /*borde: 1px sólido rojo;*/} #menu ul {list-style: none; relleno: 0px; margen: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*Convierta la etiqueta A a un elemento de nivel de bloque primero para establecer el ancho y el espacio interno* / Display: Block; Color de fondo: #00A6AC; Color: #fff; relleno: 5px; Decoración de texto: ninguna; } #menu ul li a: hover {background-color: #008792; } </style> </head> <body> <div id = "menú"> <ul> <li> <a href = "#"> Gestión de categorías </a> <li> <a href = "#"> Gestión de productos </a> </ul> </div> </body> </html>Solo hay dos enlaces en temp.jsp, encapsulados con Li y colocados en div. El CSS anterior establece el estilo para estos dos enlaces, y luego habilitamos TomCat y probamos el efecto de la siguiente manera:
Después de hacer estos dos hipervínculos, copiaremos el UL de los dos hipervínculos encapsulados a la posición de visualización del contenido del menú a la izquierda en aindex.jsp, y modificaremos brevemente, de la siguiente manera:
La parte CSS se puede llevar directamente a la etiqueta de cabeza de aindex.jsp. Mire la etiqueta A de arriba, que contiene el atributo de título, no el href, porque no estamos saltando a la nueva página, porque EasyUi es solo esta página, queremos colocar la pantalla haciendo clic en la pestaña de la derecha, por lo que primero escribimos la acción de salto en el atributo de título y luego lo cambiamos más tarde. A continuación, queremos hacer clic en la administración de categorías para recoger la función de categorías específicas en la pestaña de la derecha.
2. Implemente la pestaña de pestaña a la derecha
Para realizar la función de hacer clic en la barra de menú izquierda para aparecer la pestaña derecha, debe agregar el código JS. La idea de usar EasyUI es: primero haga clic en el hipervínculo y obtenga el nombre del hipervínculo, porque el título de la pestaña emergente debe ser el mismo que el nombre del hipervínculo, como "Gestión de categorías"; Luego, determine si la pestaña Cambio de nombre ya existe, muestrela si existe, cree si no existe y muestra el contenido que se mostrará. Veamos el código en la parte JS:
<script type = "text/javaScript"> $ (function () {$ ("a [title]"). Click (function () {var text = $ (this) .Text (); var href = $ (this) .attr ("title"); // juzga si hay una pestaña correspondiente en el ahora ahora if ($ ("#tt"). Tabs ("exists", text))))) $ ("#tt"). Tabs ("Seleccionar", texto); dirección de url, pero es solo la parte del cuerpo // href: 'send_category_query.action'}); </script> Analicemos este código JS. Primero, obtenga la etiqueta A. Tenga en cuenta que esta es una etiqueta es una etiqueta A con el atributo de título, que es el hipervínculo "Gestión de categorías" arriba, y luego haga clic, y hay otra función en el clic. ¿Qué hace esta función? Primero, obtenga el nombre del enlace actual, es decir, texto, y luego obtenga la URL a través del atributo del título (porque acabamos de escribir la URL al atributo del título). A continuación, determine si hay una opción (pestaña) para este nombre. Si lo hay, se mostrará la opción para ese nombre, y si no hay, creala.
Echemos un vistazo a la declaración en IF. Primero, use "#TT" para obtener el objeto jQuery a la derecha, y luego llame al método de construcción de pestañas para obtener el objeto Tab. Si lo hay, devolverá verdadero, de lo contrario devolverá False. Entonces, ¿qué significan los dos parámetros en Tabs ()? En primer lugar, el primer parámetro es el nombre del método, y el segundo parámetro es el parámetro correspondiente del primer parámetro (método). Tabs ("existe", texto) significa llamar al método de existencia de EasyUi. El parámetro es el texto, es decir, determinar si la pestaña con el nombre del texto existe. Del mismo modo, las siguientes pestañas ("Seleccionar", texto) significa seleccionar la pestaña con el texto de nombre para mostrar, pestañas ("agregar", {}) significa crear una nueva pestaña, y algunas propiedades de la pestaña recién agregada se agregan en {}: Título significa el nombre, Cerrado: Verdad Más tarde, el contenido de una página está empaquetado con la etiqueta <iframe>. No se puede acceder directamente a esta página y se redirige a través de la acción. Se puede ver desde el nombre de la acción que se introduce en la página web-inf/categoría/consulta.jsp. Si escribimos algo casualmente en la etiqueta del cuerpo en la página y luego haga clic en la barra de menú a la izquierda, el contenido se mostrará en la pestaña correcta. como sigue:
Finalmente, coloque el código en aindex.jsp aquí:
<%@ page lenguaje = "java" import = "java.util.*" pageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transición // en"> <html> <fead> <%@ include file = "/public/head.jspf"%> <type de estilo = "text/" {ancho: 60px; /*borde: 1px sólido rojo;*/} #menu ul {list-style: none; relleno: 0px; margen: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*Convierta la etiqueta A a un elemento de nivel de bloque primero para establecer el ancho y el espacio interno* / Display: Block; Color de fondo: #00A6AC; Color: #fff; relleno: 5px; Decoración de texto: ninguna; } #menu ul li a: hover {background-color: #008792; } </style> <script type = "text/javaScript"> $ (function () {$ ("a [title]"). Click (function () {var text = $ (this) .Text (); var href = $ (this) .attr ("title"); // juzga si hay una pestaña correspondiente en el tiempo en el momento if ($ ("#tt").) $ ("#tt"). Tabs ("select", texto); pero es solo la parte del cuerpo //href:'send_category_query.action '}); }); </script> </head> <body> <div data-options = "región: 'norte', título: 'bienvenido a yigou backend gestión', división: true" style = "altura: 100px;"> </div> <div data-options = "región: 'oeste', título: 'operación del sistema', división: true"> < data-options = "icOncls: 'icon-save'"> <ul> <li> <a href = "#"> gestión de categorías </a> <li> <a href = "#"> gestión de productos </a> </ul> </div> <d div data-options = "icOncls: 'icon-reload'"> <li> <li> <a href = "#"#" <li> <a href = "#"> Gestión de productos </a> </ul> </div> </div> </div> <div data-options = "región: 'centro', título: 'página de operación de backend'" style = "relling: 1px; fondo: #eee;"> <div id = "tt" data-options = "ajuste: verdadero"> <div style = "Padding: 10px; El futuro (el tipo de sistema operativo actual, el nombre de dominio del proyecto actual, la configuración relacionada con el hardware o el informe de visualización </div> </div> </div> </body> </html> Obviamente, el código no se ha extraído, y CSS y JS se mezclan en la misma página JSP. No importa, se extraerá más tarde.
Hasta ahora, hemos completado la implementación del menú EasyUI. Aquí solo hemos completado el método de implementación, y el contenido específico que se muestra se mejorará de acuerdo con las necesidades específicas.
La dirección de descarga del código fuente de todo el proyecto: //www.vevb.com/article/86099.htm
Dirección original: http://blog.csdn.net/eson_15/article/details/51297705
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.