目录
一、什么是Easyui?
EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单html标签。
外文名:jQueryEasyUI
定义:基于jQuery的UI插件集合体
二. 搭建框架
2.1:导入css样式和js文件
2.2:在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">
2.3:在index.jsp界面包含
<%@ include file="common/head.jsp" %>
2.4:在index.jsp界面布局
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <%@ include file="common/head.jsp" %> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:50px;"> EasyUi后台管理系统 </div> <div data-options="region:'south',split:true" style="height:100px;"> Copyright@XXXX有限责任公司 </div> <div data-options="region:'west',title:'功能导航',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body> </html>