最近做项目,使用到了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; }