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

最新推荐文章于 2024-04-12 03:03:32 发布

NIITYZU

最新推荐文章于 2024-04-12 03:03:32 发布

阅读量2.2k

点赞数 1

分类专栏： JQuery EasyUI 1.4.1

本文链接：https://blog.csdn.net/NIITYZU/article/details/44976161

版权

JQuery EasyUI 1.4.1 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做项目，使用到了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文件，如下：

    <link rel="stylesheet" href="js/easyui/themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/icon.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/default/linkbutton.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/default/messager.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/default/dialog.css" type="text/css"></link>
    
    <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/easyui/datagrid-detailview.js"></script>

注意：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+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
     <title>小区物业综合管理系统</title>
   
    <link rel="stylesheet" href="js/easyui/themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="css/back.css" type="text/css"></link>
    <link rel="stylesheet" href="css/common.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/icon.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/default/linkbutton.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/default/messager.css" type="text/css"></link>
    <link rel="stylesheet" href="js/easyui/themes/default/dialog.css" type="text/css"></link>
    
    
    <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="js/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/easyui/datagrid-detailview.js"></script>
    <script type="text/javascript" src="js/fileupload/ajaxfileupload.js"></script>
    <script type="text/javascript" src="js/fileCheck.js"></script>
    <script type="text/javascript" src="js/excanvas.js"></script>
    <script type="text/javascript" src="js/coolclock.js"></script>
    <script type="text/javascript" src="js/moreskins.js"></script>
</head>

<body class="easyui-layout" >
    
	 <div data-options="region:'north',split:true" style="height:80px;" class="top-bg">
	    <jsp:include page="rolepages/entryClerk_top.jsp" />
	 </div>
	 <div data-options="region:'west',title:'导航菜单',split:true" style="width:210px;" >
	    <jsp:include page="rolepages/entryClerk_left.jsp" />
	  </div>
	  <div data-options="region:'center'" style="padding:5px;background:#eee;">
	      <div id="tab" fit="true" class="easyui-tabs" style="height:250px;">
	         <div title="首页" style="padding:20px;">
	               
                  </div>
	      </div>
	   </div>
	   
	 <div data-options="region:'south'" border="true" split="true" style="overflow: hidden; height: 30px;background: #D2E0F2;" >
            <div class="southfooter">版权所有 违者必究</div>
         </div>
</body>
  <script>
             $('div ul ').tree({
                onClick:function(node){
                    if($("#tab").tabs("exists",node.text)){
                        $("#tab").tabs("select",node.text);
                    }else
                    {
                        $('#tab').tabs('add',{
                            title:node.text,
                            closable:true,
                            href:node.attributes.src,
                            fit:true
                        });
                    }
                }
            });
        
    </script>
</html>

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+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'manager_Top.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
     <div class="divimage" style="width: 100%;height: 100%">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
		  <tr>
		    <td width="40px" height="60px"> </td>
		    <td width="500px">
		       <font style="font-size: 25px;font-family: '楷体','楷体_GB2312';font-weight: bold;color: #06482a">小区物业综合管理系统</font>
		       <font style="font-size: 18px;color: #FF8010;font-weight: bold;">（管理员界面）</font>
		    </td>
		    <td > </td>
		    <td width="150px" align="right">
		      <a href="javascript:void(0)" id="updPerPwd"><img alt="" src="images/key.png" width="13px" height="13px"> 修改密码</a>
		      <a href="javascript:void(0)" id="loginOut" ><img alt="" src="images/exit.png" width="12px" height="12px"> 注销</a> 
		    </td>
		  </tr>
		</table>
		<div id="updatePerPwd"></div>
	</div>
  </body>
  <script type="text/javascript">
    //注销登录
	$("#loginOut").click(function() {

       $.messager.confirm("提示", "您确定要退出系统吗？", function (res) {
         if (res) {
             window.open("users/loginOut.action", "_top");
          }
       });
       
	});
	
	$("#updPerPwd").click(function(){
	
	  $('#updatePerPwd').dialog({    
					    title: '密码修改',    
					    width: 500,    
					    height: 300,    
					    closed: false,    
					    cache: false,    
					    href: 'user/updUserPwd.jsp',    
					    modal: true   
	   });    
	});
    </script>
  </body>
</html>

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+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'manager_left.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
     <div id="aa" class="easyui-accordion" style="height: 100%">   
      <div title="住户管理" data-options="iconCls:'icon-sys'" style="overflow:auto;padding:10px; ">
         <ul  class="easyui-tree">
	        <li data-options="attributes:{src:'user/userMain.jsp'},iconCls:'icon-nav'" >
	           <span>住户综合管理</span>
	        </li>
          </ul>
       </div>
       <div title="房产管理" data-options="iconCls:'icon-sys'" style="overflow:auto;padding:10px; ">
         <ul  class="easyui-tree">
	           <li data-options="attributes:{src:'houses/houseMange.jsp'},iconCls:'icon-nav'" >
	                <span>房产综合管理</span>
	           </li>
          </ul>
       </div>
       <div title="停车位管理" data-options="iconCls:'icon-sys'" style="overflow:auto;padding:10px;">
          <ul  class="easyui-tree">
	           <li data-options="attributes:{src:'parks/showParks.jsp'},iconCls:'icon-nav'" >
	                <span>停车位综合管理</span>
	           </li>
          </ul>
       </div>
       <div title="维修管理" data-options="iconCls:'icon-sys'" style="overflow:auto;padding:10px;">
          <ul  class="easyui-tree">
	           <li data-options="attributes:{src:'repairs/repairManage.jsp'},iconCls:'icon-nav'">
                  <span>维修综合管理 </span>
               </li>
          </ul>
       </div>
       <div title="费用管理" data-options="iconCls:'icon-sys'" style="overflow:auto;padding:10px;">
          <ul  class="easyui-tree">
	         <li data-options="attributes:{src:'costs/costMain.jsp'},iconCls:'icon-nav'">
	            <span>缴费管理</span>
	         </li>
          </ul>
       </div>
     </div>
  </body>
</html>

效果图如下：

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

我们可以通过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;
}

//此处结束