JQuery EasyUI 学习——使用EasyUI 页面布局

         最近做项目，使用到了JQuery EasyUI来页面布局以及一系列效果的实现，总体来说，慢慢使用起来越来越觉得得心应手，而且很好用。我使用的JQuery EasyUI版本是1.4.1，目前的最新版本是1.4.2，其实使用方法差不多。

一、官网下载JQuery EasyUI

       点击JQuery EasyUI 1.4.2，下载最新版EasyUI，此处我使用的是1.4.1

二、导入CSS和JS文件

       往自己所建的项目中导入EasyUI所需的JS和CSS文件，如下：

     注意：jquery包一定要在jquery.easuui.min.js前面导入。此处我导入的是default主题，EasyUI为我们提供了几种主题颜色效果，如下：

三、页面布局

      此处我使用easyui 折叠面板（Accordion）作左侧导航效果，中间使用 easyui 创建一个 Tabs 组件，整个页面布局分上、下、左、右。每个部分代码如下

     1、整体

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
     
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    



    
	 

	    
	 
	 

	    
	  
	  

	      

	         

	               
                  
	      
	   
	   
	 

            
版权所有 违者必究
         

  

     2、顶部

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	

  
  
  
     

		

		  

		    
 
		    

		       小区物业综合管理系统
		       （管理员界面）
		    
		    
 
		    

		       修改密码
		       注销 
		    
		  
		
		

	
  
  
  

      3、左侧

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	

  
  
  
     
   
      

         

	        

	           住户综合管理
	        
          
       
       

         

	           

	                房产综合管理
	           
          
       
       

          

	           

	                停车位综合管理
	           
          
       
       

          

	           

                  维修综合管理 
               
          
       
       

          

	         

	            缴费管理
	         
          
       
     
  

    效果图如下：

   

四、折叠面板默认图标修改

      我们可以通过CSS修改默认的折叠面板图标，即导航显示的图片，如下

.icon-sys {
	background: url('../images/tabicons.png') no-repeat;
	width: 18px;
	line-height: 18px;
	display: inline-block;
	background-position: 0px -200px;
}

.icon-nav {
	background: url('../images/tabicons.png') no-repeat;
	width: 18px;
	line-height: 18px;
	display: inline-block;
	background-position: -100px -20px;
}

//此处结束