easyui01---基本布局

概述

What？

jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富并且美观的UI界面

Why？

①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面

②.easyui 是个完美支持 HTML5 网页的完整框架

③.easyui 能节省网页开发的时间和规模

④.easyui 很简单但功能很强大，容易上手

Where？

后台管理界面

 准备工作

①.下载easyui

EasyUI - helps you build your web pages easilyEasyUI is a complete framework for HTML5 web page. It provides easy to use components for building modern, interactive, javascript applications that work on pc and mobile devices.http://www.jeasyui.com/

②.页面中引入库

引入EasyUI（jquery.easyui.min.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

引入JQuery（jquery.min.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

引入EasyUI的样式文件（/themes/default/easyui.css）

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>

引入EasyUI的图标样式文件（/themes/icon.css）

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

使用 

两种方式：[Demo] [API文档]----使用布局组件-Layout搭建后台框架

第一种【APL文档】

第二种demo文件夹

 进行优化（提取公共部分）

注释：因为我们很多页面都需要用到前面的准备方法，所有这边我们封装一个页面，然后再到要用到的界面调用就可以节省很多重复的代码的编写

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	//获取路径
	String path=request.getContextPath();
	request.setAttribute("ctx", path);
	
%>  
<script type="text/javascript">
	var ctx='${ctx}';  
</script>
	
<!-- 引入EasyUI的样式文件（/themes/default/easyui.css） -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>

<!-- 引入EasyUI的图标样式文件（/themes/icon.css） -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>

<!-- 引入JQuery（jquery.min.js） -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

<!-- 引入EasyUI（jquery.easyui.min.js） -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js） -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

为了防止报404错误，所有我们每个js都使用了绝对路径的方法

---

页面调用

<!-- 引入head -->   
<%@ include file="common/head.jsp" %>

引入即可，注意路径！！！！！！