In the previous article, we used EasyUI to build a framework for the backend page. Click here to view it. In this section, we mainly use EasyUI technology to simply implement the backend menu. We will first create simple functions and continue to enrich them later.
1. Implement the left menu
First look at the renderings:
We can click "Basic Operations" and "Other Operations" to switch menu options. In the specific options, click on different connections and will be displayed on the right. Let's make the menu on the left first.
There are two main contents of the menu on the left: "Category Management" and "Product Management". We know that in the previous section, the framework of the background page should be built in aindex.jsp, so now we just need to make these two hyperlinks and put them into the corresponding div in aindex.jsp. So we first create a new temp.jsp file in the WebRoot folder as a temporary development file, because you can directly measure it by writing jsp here. After the effect is available, copy the content to the corresponding location in aindex.jsp.
The temp.jsp page is as follows:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <style type="text/css"> #menu { width:200px; /*border:1px solid red;*/ } #menu ul { list-style: none; padding: 0px; margin: 0px; } #menu ul li { border-bottom: 1px solid #fff; } #menu ul li a { /*Convert the a tag to a block-level element first to set the width and inner spacing*/ display: block; background-color: #00a6ac; color: #fff; padding: 5px; text-decoration: none; } #menu ul li a:hover { background-color: #008792; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">Category management</a> <li><a href="#">Product management</a> </ul> </div> </body> </html>There are only two links in temp.jsp, encapsulated with li and placed in div. The above css sets the style for these two links, and then we enable tomcat and test the effect as follows:
After making these two hyperlinks, we will copy the ul of the encapsulated two hyperlinks to the display position of the menu content on the left in aindex.jsp, and briefly modify it, as follows:
The css part can be directly taken to the head tag of aindex.jsp. Look at the a tag above, which contains the title attribute, not the href, because we are not jumping to the new page, because EasyUI is just this page, we want to put the clicked display on the tab tab on the right, so we first write the jump action in the title attribute and then change it later. Next, we want to click Category Management to pop up the function of specific categories in the tab on the right.
2. Implement the tab tab on the right
To realize the function of clicking on the left menu bar to pop up the right tab, you need to add js code. The idea of using EasyUI is: first click on the hyperlink and get the name of the hyperlink, because the title of the pop-up tab should be the same as the name of the hyperlink, such as "Category Management"; then determine whether the name change tab already exists, display it if it exists, create it if it does not exist, and display the content to be displayed. Let's look at the code in the js part:
<script type="text/javascript"> $(function(){ $("a[title]").click(function(){ var text = $(this).text(); var href = $(this).attr("title"); //Judge whether there is a corresponding tab on the right now if($("#tt").tabs("exists", text)) { $("#tt").tabs("select", text); } else { //Create a new tab if not, otherwise switch to the current tag $("#tt").tabs("add",{ title:text, closed:true, content:'<iframe title=' + text + 'src=' + href + 'frameborder="0" />' //href: By default, the remote page is loaded through the url address, but it is only the body part//href:'send_category_query.action' }); } }); }); </script> Let’s analyze this js code. First, get the a tag. Note that this a tag is an a tag with the title attribute, which is the “Category Management” hyperlink above, and then click, and there is another function in the click. What does this function do? First, get the name of the current link, that is, text, and then get the url through the title attribute (because we just wrote the url to the title attribute). Next, determine whether there is an option (tab) for this name. If there is, the option for that name will be displayed, and if there is no, create it.
Let's take a look at the statement in if. First, use "#tt" to get the jquery object on the right, and then call the tabs construction method to get the tab object. If there is, it will return true, otherwise it will return false. So what do the two parameters in tabs() mean? First of all, the first parameter is the method name, and the second parameter is the corresponding parameter of the first parameter (method). tabs("exists", text) means calling the existence method of EasyUI. The parameter is text, that is, determining whether the tab with the name text exists. 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. Later, the content of a page is packaged with the <iframe> tag. This page cannot be accessed directly and is redirected through action. It can be seen from the name of action that it is introduced to the WEB-INF/category/query.jsp page. If we write something casually in the body tag on the page, and then click on the menu bar on the left, the content will be displayed in the right tab. as follows:
Finally, put the code in aindex.jsp here:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <style type="text/css"> #menu { width:60px; /*border:1px solid red;*/ } #menu ul { list-style: none; padding: 0px; margin: 0px; } #menu ul li { border-bottom: 1px solid #fff; } #menu ul li a { /*Convert the a tag to a block-level element first to set the width and inner spacing*/ display: block; background-color: #00a6ac; color: #fff; padding: 5px; text-decoration: none; } #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"); //Judge whether there is a corresponding tab on the right now if($("#tt").tabs("exists", text)) { $("#tt").tabs("select", text); } else { //Create a new tab if not, otherwise switch to the current tag $("#tt").tabs("add",{ title:text, closed:true, content:'<iframe src="send_category_query.action" frameborder="0" />' //href: The remote page is loaded by default through the URL address, but it is only the body part //href:'send_category_query.action' }); } }); }); }); </script> </head> <body> <div data-options="region:'north',title:'Welcome to Yigou backend management',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'System Operation',split:true"> <!-- The system menu is displayed here--> <div id="menu" data-options="fit:true"> <div 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="#">Product Management</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;"> The corresponding system information is displayed in the future (the type of the current operating system, the domain name of the current project, the hardware related configuration or the display report</div> </div> </div> </body> </html> Obviously, the code has not been extracted, and css and js are mixed in the same jsp page. It doesn’t matter, it will be extracted together later.
So far, we have completed the implementation of the EasyUI menu. Here we have only completed the implementation method, and the specific displayed content will be improved according to the specific needs.
The source code download address of the entire project: //www.VeVB.COM/article/86099.htm
Original address: http://blog.csdn.net/eson_15/article/details/51297705
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.