JQuery EasyUI 学习——使用EasyUI 页面布局
2015-04-10 10:37
309 查看
最近做项目，使用到了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、整体
四、折叠面板默认图标修改
我们可以通过CSS修改默认的折叠面板图标，即导航显示的图片，如下
//此处结束
一、官网下载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;
}//此处结束
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- easyui学习笔记2：页面布局，layout插件
- 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
- jQuery EasyUI使用教程之创建Web页面的边框布局
- 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
- 使用jquery easyui实现一个基本的页面布局
- easyui学习笔记2：页面布局，layout插件
- [导入] 转[教程] 学习如何使用有趣的自定义标记来布局页面！
- 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
- PhoneGap/Cordova学习笔记--4.使用HTML5进行页面布局
- JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据
- EasyUI学习-如何使用jQuery EasyUI？
- MonoRail学习笔记十二：layout布局的使用
- Flex 学习笔记 之 flex 页面布局
- 学习ExtJS fit布局使用说明
- 使用Grid来对WPF页面进行布局排版
- 使用Grid来对WPF页面进行布局排版
- 改变页面使用的CSS文件，使网页进行布局或色调等改变
- 使用Ext Viewport进行页面布局时Panel中的sumit按钮无法提交表单数据
- Ext JS 学习(8) Ext.FormPanel 组件的使用第五式(FormPanel的综合使用,提交页面到后台)
- 学习web标准一:居中兼容IE5.5+/FF/谷歌浏览器的一个页面布局