No artigo anterior, usamos o easyui para criar uma estrutura para a página de back -end. Clique aqui para visualizá -lo. Nesta seção, usamos principalmente a tecnologia Easyui para simplesmente implementar o menu de back -end. Primeiro, criaremos funções simples e continuaremos a enriquecê -las mais tarde.
1. Implemente o menu esquerdo
Primeiro olhe para as renderizações:
Podemos clicar em "Operações básicas" e "outras operações" para alternar as opções de menu. Nas opções específicas, clique em diferentes conexões e será exibido à direita. Vamos fazer o menu à esquerda primeiro.
Existem dois conteúdos principais do menu à esquerda: "Gerenciamento de categorias" e "Gerenciamento de produtos". Sabemos que, na seção anterior, a estrutura da página de segundo plano deve ser construída em Aindex.jsp, então agora precisamos fazer esses dois hiperlinks e colocá -los na div correspondente em Aindex.jsp. Por isso, criamos primeiro um novo arquivo temp.jsp na pasta Webroot como um arquivo de desenvolvimento temporário, porque você pode medi -lo diretamente escrevendo JSP aqui. Depois que o efeito estiver disponível, copie o conteúdo para o local correspondente em Aindex.jsp.
A página temp.jsp é a seguinte:
<%@ página linguagem = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! {largura: 200px; /*borda: 1px vermelho sólido;*/} #menu ul {estilo de lista: nenhum; preenchimento: 0px; margem: 0px; } #Menu ul li {Border-Bottom: 1px Solid #fff; } #menu ul li a { /*Converta a tag A em um elemento de nível de bloco primeiro para definir a largura e o espaçamento interno* / display: block; Background-Color: #00A6AC; Cor: #FFF; preenchimento: 5px; Decoração de texto: Nenhum; } #menu ul li a: hover {background-color: #008792; } </style> </head> <body> <div id = "menu"> <ul> <li> <a href = "#"> gestão de categoria </a> <li> <a href = "#"> gerenciamento de produtos </a> </ul> </div> </body> </tiodle ">Existem apenas dois links no temp.jsp, encapsulados com Li e colocados em div. O CSS acima define o estilo desses dois links e, em seguida, habilitamos o Tomcat e testamos o efeito da seguinte maneira:
Depois de fazer esses dois hiperlinks, copiaremos o UL dos dois hiperlinks encapsulados para a posição de exibição do conteúdo do menu à esquerda em Aindex.jsp, e modificá -lo brevemente, da seguinte forma:
A parte CSS pode ser levada diretamente à etiqueta da cabeça do AIndex.jsp. Veja a tag A acima, que contém o atributo do título, não o HREF, porque não estamos pulando para a nova página, porque o easyui é apenas esta página, queremos colocar o visor de cliques na guia à direita, por isso primeiro escrevemos a ação do salto no atributo de título e depois alterá -lo mais tarde. Em seguida, queremos clicar em gerenciamento de categoria para apresentar a função de categorias específicas na guia à direita.
2. Implemente a guia da guia à direita
Para realizar a função de clicar na barra de menu esquerda para exibir a guia RETRANTE, você precisa adicionar código JS. A idéia de usar o easyui é: primeiro clique no hiperlink e obtenha o nome do hiperlink, porque o título da guia pop-up deve ser o mesmo que o nome do hiperlink, como "Gerenciamento de categoria"; Em seguida, determine se a guia Alterar o nome já existe, exibi -la se existir, crie -a se não existir e exibir o conteúdo a ser exibido. Vejamos o código na parte do JS:
<script type = "text/javascript"> $ (function () {$ ("a [title]"). clique (function () {var text = $ (this) .text (); var href = $ (this) .attr ("title"); // julga se existe uma guia correspondente na direita (#"#tt". $ ("#tt"). guias ("selecione", texto); o endereço da URL, mas é apenas a parte do corpo // href: 'send_category_query.action'}); </script> Vamos analisar esse código JS. Primeiro, pegue a tag A. Observe que esta uma tag é uma tag A com o atributo de título, que é o hiperlink "Gerenciamento de categorias" acima e clique, e há outra função no clique. O que essa função faz? Primeiro, obtenha o nome do link atual, ou seja, texto e, em seguida, obtenha o URL através do atributo de título (porque acabamos de escrever o URL no atributo do título). Em seguida, determine se existe uma opção (guia) para este nome. Se houver, a opção para esse nome será exibida e, se não houver, crie -a.
Vamos dar uma olhada na declaração em If. Primeiro, use "#TT" para obter o objeto jQuery à direita e, em seguida, chame o método de construção de guias para obter o objeto da guia. Se houver, ele retornará verdadeiro, caso contrário, retornará falso. Então, o que significam os dois parâmetros em tabs ()? Primeiro de tudo, o primeiro parâmetro é o nome do método e o segundo parâmetro é o parâmetro correspondente do primeiro parâmetro (método). guias ("existe", texto) significa chamar o método de existência do easyui. O parâmetro é o texto, ou seja, determinando se a guia com o texto do nome existe. Similarly, the following tabs("select", text) means selecting the tab with the name text to display, tabs("add", {}) means creating a new tab, and some properties of the newly added tab are added in {}: title means the name, closed:true means there is a close button, that is, the fork in the upper right corner, and content means where to get the content to be displayed. Posteriormente, o conteúdo de uma página é embalado com a tag <Iframe>. Esta página não pode ser acessada diretamente e é redirecionada através da ação. Pode ser visto a partir do nome da ação que é introduzido na página da web-inf/category/query.jsp. Se escrevermos algo casualmente na tag corporal na página e clique na barra de menus à esquerda, o conteúdo será exibido na guia Right. do seguinte modo:
Finalmente, coloque o código em Aindex.jsp aqui:
<%@ página linguagem = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! {largura: 60px; /*borda: 1px vermelho sólido;*/} #menu ul {estilo de lista: nenhum; preenchimento: 0px; margem: 0px; } #Menu ul li {Border-Bottom: 1px Solid #fff; } #menu ul li a { /*Converta a tag A em um elemento de nível de bloco primeiro para definir a largura e o espaçamento interno* / display: block; Background-Color: #00A6AC; Cor: #FFF; preenchimento: 5px; Decoração de texto: Nenhum; } #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"); // julga se existe uma guia correspondente (the ($ ($ ($ ("tt" tt ("title"); // julga se existe uma guia correspondente (the $ ($ ($ ("tt) (" tt "tt" tt "tt (" tt); $ ("#tt"). guias ("selecione", texto); endereço, mas é apenas a parte do corpo //href:'send_category_query.action '}); }); </script> </ad Head> <body> <div data-options = "Region: 'norte', título: 'Bem-vindo ao gerenciamento de backend yigou', divisão: true" style = "altura: 100px;"> </div> <div dados-options = "Region: 'West', title: 'System Operação', Split: True"> <!-O sistema está exibido-Menu é exibido-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Exibição-Título: 'Sistema', Split: True "> <!-O sistema é data-options = "icoNCls: 'ICON-SAVE'"> <ul> <li> <a href = "#"> gestão de categoria </a> <li> <a href = "#"> gestão do produto </a> </ul> </div <li> <a href = "#"> gerenciamento de produtos </a> </ul> </div> </div> </div> <div data-options = "região: 'Centro', título: 'backend operação página'" style = "padding: 1px; Background: #ee;"> <div id = "tt" Data-options "" FIT: "True:" O futuro (o tipo do sistema operacional atual, o nome de domínio do projeto atual, a configuração relacionada a hardware ou o relatório de exibição </div> </div> </div> </body> </html> Obviamente, o código não foi extraído e CSS e JS são misturados na mesma página JSP. Não importa, será extraído juntos mais tarde.
Até agora, concluímos a implementação do menu Easyui. Aqui, apenas concluímos o método de implementação e o conteúdo exibido específico será aprimorado de acordo com as necessidades específicas.
O endereço de download do código -fonte de todo o projeto: //www.vevb.com/article/86099.htm
Endereço original: http://blog.csdn.net/eson_15/article/details/51297705
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.