概述
目录
一、介绍Easyui
什么是Easyui？
优点是什么？
二、搭建框架
搭建框架的几个步骤：
三、layout的使用
目录结构
四、创建布局
引入必要的js和css样式文件
路径问题
五、框架优化
一、介绍Easyui
什么是Easyui？
基于jquery的页面组件集合，提供了丰富的组件的集合。
优点是什么？
1）easyui是个完美支持HTML5网页的完整框架
2）easyui节省网页开发的时间和规模
3）easyui很简单但功能强大
二、搭建框架
搭建框架的几个步骤：
1）打开eclipse，创建一个web工程。注意：为了防止出现乱码问题，建议先检查一下eclipse的工作空间的编码问题， window -> preferences -> Genernal -> workspace；
设置初始编码方式：window -> preferences -> web -> jsp Files
2） 创建web工程
3） 创建目录结构。 dao, action, model, util等
4） 导入mvc等必要的包，lib包
5） 拷入需要的配置文件，config.xml，jdbc.properties
6） 在web.xml配置中文编码过滤器，中央控制器等（如果在mvc中通过java注解配置中央控制器，此处可以不在web.xml中配置）， web.xml
7） 检查数据库是否能正常连接，将工程部署检查是否能正常启动。
三、layout的使用
目录结构
四、创建布局
引入必要的js和css样式文件
1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的样式文件（/themes/default/easyui.css）
5）引入EasyUI的图标样式文件（/themes/icon.css）
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>路径问题
1 相对路径/绝对路径(推荐)
2 base标签
思路：使用一个公用的head.jsp页面来统一引入需要的资源，其他页面使用include进行引入，便于管理。
在webapp下创建common目录， head.jsp
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<!--页面缓存-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">在index页面中使用使用通用的head.jsp页面：
<head>
<%@ include file="common/head.jsp" %>
</head>五、框架优化
可以查看“jQuery EasyUI 1.5API 中文版“， 在其中找到layout组件。
拷贝代码放入index.jsp页面，运行系统，查看效果。可以根据需要来调整页面布局。
<body class="easyui-layout">
<div data-options="region:'north',split:true" style=" font-size: 40px;padding:10px;">
EasyUi后台管理系统
</div>
<div data-options="region:'south',split:true" style=" text-align:center;background: #E0ECFF" class="panel-title">
Copyright@XXXX有限责任公司
</div>
<div data-options="region:'west',title:'功能导航',split:true" style=""></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>初识Easyui就分享到这了，希望能对大家有所帮助！
最后
以上就是拼搏玉米为你收集整理的初识Easyui目录一、介绍Easyui二、搭建框架三、layout的使用四、创建布局五、框架优化的全部内容，希望文章能够帮你解决初识Easyui目录一、介绍Easyui二、搭建框架三、layout的使用四、创建布局五、框架优化所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复