"SSM personal Blog Project Combat 02" Easy UI to build a background management interface

In the previous section we have successfully built the SSM project environment, and the next thing we need to do is build the framework of our background management interface.
The effect diagram after the construction
build a background interface based on easy UI

The jquery Easyui is a set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags. (Easyui download address) 1, import easy UI related components

First we create a static folder in the WebApp directory of the project, this folder mainly exists one of our still resource files (JS,CSS, etc.), and then we download the easy UI on our website and copy the downloaded folder to the static folder.
The result is as shown
2, build Easyui environment 2.1. Extracting public Modules

1, in the WebApp interface under the new Admin folder, this folder mainly stored in our background management JSP file, and then in the admin interface under the new common file, this folder mainly stored in the background management JSP file Some common modules, such as the current EASYUI environment
2. Create a new HEAD.JSPF file in the common folder.

<%@ page language= "java" pageencoding= "UTF-8"%>
<%@ taglib uri= "Http://java.sun.com/jsp/jstl/core" Prefix= "C"%>
<c:set value= "${pagecontext.request.contextpath}" var= "blog"/>
<!--below is the EASYUI environment --
<link rel= "stylesheet" href= "${blog}/static/jquery-easyui-1.3.5/themes/icon.css" type= "Text/css" ></link>
<link rel= "stylesheet" href= "${blog}/static/jquery-easyui-1.3.5/themes/default/ Easyui.css "type=" Text/css "></link>
<script type=" Text/javascript "src=" ${blog}/static/ Jquery-easyui-1.3.5/jquery.min.js "></script>
<script type=" Text/javascript "src=" ${blog}/static/ Jquery-easyui-1.3.5/jquery.easyui.min.js "></script>
<script type=" Text/javascript "src=" ${blog}/ Static/jquery-easyui-1.3.5/locale/easyui-lang-zh_cn.js "></script>

Where we used the set directive in the JSTL core tag library to use the simplified code and then introduced the JS CSS file required by Easyui 2.2 to build the background frame

From the renderings we can see that the entire interface is divided into four parts, which are about four parts from top to bottom, and now we're using EASYUI to achieve this effect.
1. Open Easyui API Search layout

Where region represents position removal not part of it gets

<%@ page contenttype= "Text/html;charset=utf-8" language= "java"%>
 
The result is as shown

2. Open Easyui API Search accordion

Our classification options are really in west so add the code in the map in west

<div id= "AA" class= "easyui-accordion" style= "width:300px;height:200px;" >  
    <div title= "Title1" data-options= "iconcls: ' Icon-save '" style= "overflow:auto;padding:10px;" >  
        
 
3. Open Easyui API Search tabs

The result shows that our tabs is placed in the center of the
So add the figure code in the center

<div id= "tt" class= "Easyui-tabs" style= "width:500px;height:250px;" >  
    <div title= "Tab1" style= "Padding:20px;display:none;" >  
        tab1   
    </div>  
    <div title= "Tab2" data-options= "Closable:true" style= "overflow:auto;padding : 20px;display:none; " >  
        tab2   
    </div>  
    <div title= "Tab3" data-options= "iconcls: ' Icon-reload ', closable:true" style= "Padding:20px;display:none;" >  
        tab3   
    </div>  
</div>
 
3, the concrete effect realizes

1, so that the entire framework has come up next we will complete the Classification tab in West

We insert the following code in West

 <div class= "easyui-accordion" data-options= "Fit:true,border:false" > <div title= "Common operation" data-options= "Sele
               Cted:true,iconcls: ' Icon-item ' "style=" padding:10px "> <a href=" # "class=" Easyui-linkbutton " data-options= "Plain:true,iconcls: ' Icon-writeblog '" style= "width:150px" > Blogging </a> <a href= "#" CLA ss= "Easyui-linkbutton" data-options= "plain:true,iconcls: ' Icon-review '" style= "width:150px" > Review review &LT;/A&G
        T </div> <div title= "blog Management" data-options= "ICONCLS: ' Icon-bkgl '" style= "padding:10px;" > <a href= "#" class= "Easyui-linkbutton" data-options= "plain:true,iconcls: ' Icon-writeblog ' "Style=" width:150px; " > Write blog </a> <a href= "#" class= "Easyui-linkbutton" data-options= "PLAIN:TRUE,ICONCLS: ' IC On-bkgl ' "style=" width:150px; > Blog Information Management </a> </div> <div title= "blog category Management" data-options= "ICONCLS: ' ICON-BKLB' "style=" padding:10px "> <a href=" # "class=" Easyui-linkbutton "data-options=" plain:true,i Concls: ' icon-bklb ' "style=" width:150px; > Blog category information Management </a> </div> <div title= "Comment Management" data-options= "ICONCLS: ' Icon-plgl '" style= "padding : 10px "> <a href=" # "class=" Easyui-linkbutton "data-options=" plain:true,iconcls: ' Icon-revi EW ' "style=" width:150px "> Review review </a> <a href=" # "class=" Easyui-linkbutton "Data-optio ns= "Plain:true,iconcls: ' Icon-plgl '" style= "width:150px;" > Reviews Information Management </a> </div> <div title= "Personal information Management" data-options= "ICONCLS: ' Icon-grxx '" style= "padding : 10px "> <a href=" # "class=" Easyui-linkbutton "data-options=" plain:true,iconcls: ' Icon-grxx XG ' "style=" width:150px; " > Modify personal Information </a> </div> <div title= "System Management" data-options= "ICONCLS: ' Icon-system '" style= "padding
           : 10px "> <a href= "#" class= "Easyui-linkbutton" data-options= "plain:true,iconcls: ' Icon-link '" style= "width:150px "> Links Management </a> <a href=" # "class=" Easyui-linkbutton "data-options=" plain:true,iconcls : ' Icon-modifypassword ' "style=" width:150px; > Change Password </a> <a href= "#" class= "Easyui-linkbutton" data-options= "plain:true,iconcls: ' I Con-refresh ' "style=" width:150px;
               > Refresh System Cache </a> <a href= "#" class= "Easyui-linkbutton" data-options= "plain:true,iconcls: ' Icon-exit '" Style= "width:150px;" > Safe exit </a> </div> </div>
 
Which icocls in the icon of our custom icon so everyone may appear no icon phenomenon, we do not worry Easyui how to set the custom icon please see my other blog
Easyui Custom icon
2. Center Welcome interface

<div class= "Easyui-tabs" fit= "true" border= "false" id= "tabs" >
        <div title= "Home" data-options= "ICONCLS: ' Icon-home ' ">
            <div align=" center "style=" padding-top:100px "><font color=" Red "size=" ten "> Welcome < /font></div>
        </div>
    </div>
 
3, North South Processing
North

<table style= "padding:5px" width= "100%" >
        <tr>
            <td width= "50%" >
                
 
South

Div region= "South" style= "height:25px;padding:5px" align= "center" >
    copyright©2012-2017 Kumahira's SSM Blog system copyright
& Lt;/div>
 
Now republish the project and run it to get the renderings.

Finally special thanks to Nu Shen Wuhan University God