jQueryEasyUI
- jQuery EasyUI是一组基于jQuery的UI插件集合体,目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
- 开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
- Query EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。 用户可以组合使用这些组件，也可以单独使用其中一个。
EasyUI特点
Query EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。
特点：
- 基于jquery用户界面插件的集合
- 为一些当前用于交互的js应用提供必要的功能
- EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）
- 开发产品时可节省时间和资源
- 简单，但很强大
- 支持扩展，可根据自己的需求扩展控件
jQuery EasyUI 离线简体中文（可下载的离线文档）
http://download.csdn.net/album/detail/343
EasyUI实例
layout布局
导入需要的外部资源文件（js和css）以及jar包
EasyUI实例所需要用到的jar文件
引入js文件和css文件
新建一个jsp页面在<head>引入js文件和css样式</head>（切记query.min.js一定得在jquery.easyui.min.js上，顺序不能颠倒）
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3 <title>Insert title here</title>
4 <!-- Ctrl+Shift+r -->
5 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">
6 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">
7 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>
8 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
9 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
10 </head>
layout布局案例
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>Insert title here</title>
8 <!-- Ctrl+Shift+r -->
9 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">
10 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">
11 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>
12 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
13 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
14 </head>
15 <body class="easyui-layout">
16 <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
17 <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
18 </div>
19 <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
20 <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
21 <div data-options="region:'center',title:'Center'">
22 <div id="menuTab" class="easyui-tabs" style="">
23 <div title="首页" style="padding:20px;display:none;">
24 欢迎
25 </div>
26 </div>
27 </div>
28 </body>
29 </html>
效果图