基于jQury的UI框架 easyUI
基于jQury的UI框架 easyUI
2015年8月6日
2015年9月25日重构
2015年10月15日属性事件读写
1 目标：在页面构造类似桌面的控件，生成易于使用和布局的界面。
2 原理：使用jQuery和javascript、CSS、HTML构造不同标签的样式模仿桌面控件。
3 流程:加入easyUI的js库和css样式，构建控件。
3.1 加入css和js。
<link href="easyUI/themes/default/easyui.css" rel="stylesheet"/>
<link href="easyUI/themes/icon.css"rel="stylesheet" />
<link href="easyUI/themes/color.css" rel="stylesheet"/>
<script src= "easyUI/jquery.min.js"type="text/javascript"> </script>
<script src= "easyUI/jquery.easyui.min.js"type="text/javascript"> </script>
3.2 构建easyUI的容器：以easy-控件名为class的div。
示例：
<divclass="easyui-layout" style="height:100%;width:100%">
<div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>
<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>
<div data-options="region:'east',title:'easttitle',split:true" style="width:100px">east</div>
<div data-options="region:'west',title:'westtitle',split:true" style="width:100px">west</div>
<div data-options="region:'center',title:'centertitle'" >
<div class="test">this iscenter</div>
</div>
</div>
3.3 设置属性：data-options兼容html5的属性（从V1.3开始）。
data-options中以JSON格式设置。
示例：
<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>
4 方法：组织架构：jQuery标准插件格式。
参见：jQuery.docx插件部件。
所有控件由属性、方法和事件组成。
4.1 属性和事件作为控件的属性存在。事件以onEvent函数存在。两者的默认实现都在$.fn.plugin.defaults下定义。
参考：http://blog.csdn.net/baronyang/article/details/44706257
4.1.1属性读取：$(id).easyui-type（‘options’）[属性]
$('#showcharts').linkbutton('options')['selected']
4.1.2属性设置：$(id).easyui-type（｛属性：值｝）
$('#showcharts').linkbutton({
iconCls : 'icon-add',
text : '显示图表'
})
4.1.3事件设置：属性设置或bind（jquery模式）
4.1.3.1 属性设置（推荐）：$(id).easyuiType({事件名：响应函数})
$('#pg').propertygrid({onLoadSuccess:function(e){}});
4.1.3.2 jQuery绑定：$(id).常用事件（响应函数)或者$(id).bind(通用事件，响应函数)
$('#showcharts').click(showCharts);
$('#showcharts').bind('click',showCharts);
示例：
console.debug($.fn.dialog.defaults)
示例：linkbutton属性读写、事件绑定
//easyUITest.html
<!DOCTYPE html">
<!--
@author: [email protected]
@date: 2015-10-14 15:03
-->
<html>
<head>
<metacontent="text/html; charset=utf-8" />
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>
<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->
<linkrel="stylesheet" type="text/css"href="css/home.css" />
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<scripttype="text/javascript" src="js/home.js"></script>
<scripttype="text/javascript"src="js/highcharts.js"></script>
<scripttype="text/javascript"src="js/highcharts-3d.js"></script>
<title>Insert titlehere</title>
</head>
<body>
<a id="showcharts"class="easyui-linkbutton"
style="width: 100px; float: right;"
data-options="disabled:false,toggle:true,selected:false,iconCls:'icon-add'">显示图表</a>
<script type="text/javascript">
$(document).ready(function() {
//toggle pie
// $('#showcharts').click(showCharts);
$('#showcharts').bind('click',showCharts);
});
function showCharts() {
if($('#showcharts').linkbutton('options')['selected']) {
$('#showcharts').linkbutton({
iconCls :'icon-add',
text : '显示图表'
});
} else {
$('#showcharts').linkbutton({
iconCls : 'icon-remove',
text : '隐藏图表'
});
}
}
</script>
</body>
</html>
4.2 所有的方法由$.fn.plugin.methods定义，可以扩展。格式为function(jq,args)。调用格式为$.pluginName(methodName,args)。
示例：
console.debug($.fn.dialog.methods)
参考：http://www.jeasyui.com/documentation/index.php
4.3 使用easy构建框架：href加载其它页面
加载的HTML页面只加载body中的内容；如果无HTML结构，则全部加载。因此推荐将加载页面去掉HTML结构。
加载JSP时，可以将JSP代码正常加入。
参考：
http://zhidao.baidu.com/link?url=TSl4cd-EofsVQKFqJvp7mGm3GO6mJaX6SnTjkTXeuLhkLHIfv3mutoF8qcgjk_RG29t8fGaETYx3u7u_vfphBK
4.4 图标iconCls:指定icon的class属性
所有的icon的class属性在themes\icon.css文件中指定。图标文件在themes\icons目录中。
参考：
http://zhidao.baidu.com/link?url=DMWiUGzMLbNkPDL33We0FzX27jpFdNqvb4dqYOafiV3rNDGQDP-A_ph-JKllkvDcgi2lC_g7x_PGRjXgKtIOuECAatWPXaJk13tzw44Ts7i
//icons目录
//icons.css
.icon-blank{
background:url('icons/blank.gif') no-repeat center center;
}
.icon-add{
background:url('icons/edit_add.png') no-repeat center center;
}
.icon-edit{
background:url('icons/pencil.png') no-repeat center center;
}
.icon-clear{
background:url('icons/clear.png') no-repeat center center;
}
.icon-remove{
background:url('icons/edit_remove.png') no-repeat centercenter;
}
.icon-save{
background:url('icons/filesave.png') no-repeat center center;
}
.icon-cut{
background:url('icons/cut.png') no-repeat center center;
}
.icon-ok{
background:url('icons/ok.png') no-repeat center center;
}
.icon-no{
background:url('icons/no.png') no-repeat center center;
}
.icon-cancel{
background:url('icons/cancel.png') no-repeat center center;
}
.icon-reload{
background:url('icons/reload.png') no-repeat center center;
}
.icon-search{
background:url('icons/search.png') no-repeat center center;
}
.icon-print{
background:url('icons/print.png') no-repeat center center;
}
.icon-help{
background:url('icons/help.png') no-repeat center center;
}
.icon-undo{
background:url('icons/undo.png') no-repeat center center;
}
.icon-redo{
background:url('icons/redo.png') no-repeat center center;
}
.icon-back{
background:url('icons/back.png') no-repeat center center;
}
.icon-sum{
background:url('icons/sum.png') no-repeat center center;
}
.icon-tip{
background:url('icons/tip.png') no-repeat center center;
}
.icon-filter{
background:url('icons/filter.png') no-repeat center center;
}
.icon-man{
background:url('icons/man.png') no-repeat center center;
}
.icon-lock{
background:url('icons/lock.png') no-repeat center center;
}
.icon-more{
background:url('icons/more.png') no-repeat center center;
}
.icon-mini-add{
background:url('icons/mini_add.png') no-repeat center center;
}
.icon-mini-edit{
background:url('icons/mini_edit.png') no-repeat center center;
}
.icon-mini-refresh{
background:url('icons/mini_refresh.png') no-repeat centercenter;
}
.icon-large-picture{
background:url('icons/large_picture.png') no-repeat centercenter;
}
.icon-large-clipart{
background:url('icons/large_clipart.png') no-repeat centercenter;
}
.icon-large-shapes{
background:url('icons/large_shapes.png') no-repeat centercenter;
}
.icon-large-smartart{
background:url('icons/large_smartart.png') no-repeat centercenter;
}
.icon-large-chart{
background:url('icons/large_chart.png') no-repeat centercenter;
}
4.5 示例：动态加载jsp页面（包含高德地图js）。
//home.html
<!doctypehtml>
<html>
<head>
<metacontent="text/html; charset=utf-8" />
<linkrel="stylesheet" type="text/css"href="easyui/1.3.4/themes/default/easyui.css" />
<linkrel="stylesheet" type="text/css"href="css/home.css" />
<scripttype="text/javascript"src="js/jquery-1.8.0.min.js"></script>
<scripttype="text/javascript"src="easyui/1.3.4/jquery.easyui.min.js"></script>
<scripttype="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
<scripttype="text/javascript" src="js/home.js"></script>
<title>thbd</title>
</head>
<body>
<divid="header">
<div id="header-left">
<img src="icons_thbd/thbd.png"alt="thbd">
</div>
<div id="header-center">
<divid="cljk" class="menuBlock">
<divid="cljk_png" class="menuPNG"style="'background-color:rgb(18,138,222)'">
<imgsrc="icons_thbd/topicon0.png" alt="thbd"><br>
<spanstyle="color:#FFF">车辆监控</span>
</div>
</div>
<div id="yytj"class="menuBlock">
<divclass="menuPNG">
<imgsrc="icons_thbd/topicon1.png" alt="thbd"><br>
<spanstyle="color:#FFF">运营统计</span>
</div>
<div class="menuItem"style="display:none;">
<divid="arrow"></div>
<div>
<ul class="menuBack">
<li class="menu_li"><a href="">用户管理</a></li>
<liclass="menu_li"><a href="">行驶记录仪</a></li>
<liclass="menu_li"><a href="">轨迹回放</a></li>
<liclass="menu_li"><a href="">运营违规统计</a></li>
<liclass="menu_li"><a href="">行驶里程统计</a></li>
<liclass="menu_li"><a href="">车辆上线率统计</a></li>
<liclass="menu_li"><a href="">车辆上下线统计</a></li>
<liclass="menu_li"><a href="">车辆不在线统计</a></li>
<liclass="menu_li"><a href="">危险驾驶统计</a></li>
<liclass="menu_li"><a href="">油耗统计</a></li>
<liclass="menu_li"><a href="">设备状态查询</a></li>
<liclass="menu_li"><a href="">终端属性查询</a></li>
</ul>
</div>
</div>
</div>
<div id="yygl"class="menuBlock">
<divclass="menuPNG">
<imgsrc="icons_thbd/topicon2.png" alt="thbd"><br>
<spanstyle="color:#FFF">运营管理</span>
</div>
<div class="menuItem"style="display:none;">
<divid="arrow"></div>
<div>
<ul class="menuBack">
<li class="menu_li"><a href="">操作日志查询</a></li>
<liclass="menu_li"><a href="">调度信息查询</a></li>
<liclass="menu_li"><a href="">多媒体查询</a></li>
<liclass="menu_li"><a href="">车辆上下线查询</a></li>
<liclass="menu_li"><a href="">用户在线情况查询</a></li>
<liclass="menu_li"><a href="">车辆在线查询</a></li>
<liclass="menu_li"><a href="">电子运单查询</a></li>
<liclass="menu_li"><a href="">提问消息查询</a></li>
<liclass="menu_li"><a href="">信息点播</a></li>
<liclass="menu_li"><a href="">区域协查</a></li>
<liclass="menu_li"><a href="">数据透传</a></li>
</ul>
</div>
</div>
</div>
<div id="ywzc"class="menuBlock">
<divclass="menuPNG">
<imgsrc="icons_thbd/topicon3.png" alt="thbd"><br>
<spanstyle="color:#FFF">业务支撑</span>
</div>
<div class="menuItem"style="display:none;">
<divid="arrow"></div>
<div>
<ul class="menuBack">
<li class="menu_li"><a href="">快速开户</a></li>
<liclass="menu_li"><a href="">组织管理</a></li>
<liclass="menu_li"><a href="">车辆管理</a></li>
<liclass="menu_li"><a href="">终端管理</a></li>
<liclass="menu_li"><a href="">SIM卡管理</a></li>
<liclass="menu_li"><a href="">驾驶员管理</a></li>
<liclass="menu_li"><a href="">驾驶员IC卡管理</a></li>
<liclass="menu_li"><a href="">终端参数设置</a></li>
<liclass="menu_li"><a href="">用户管理</a></li>
<liclass="menu_li"><a href="">权限管理</a></li>
<liclass="menu_li"><a href="">线路&围栏管理</a></li>
<liclass="menu_li"><a href="">触发拍照设置</a></li>
<liclass="menu_li"><a href="">电话本设置</a></li>
<liclass="menu_li"><a href="">事件设置</a></li>
</ul>
</div>
</div>
</div>
<div id="jgff"class="menuBlock">
<divclass="menuPNG">
<imgsrc="icons_thbd/topicon5.png" alt="thbd"><br>
<spanstyle="color:#FFF">监管服务</span>
</div>
<div class="menuItem"style="display:none;">
<divid="arrow"></div>
<div>
<ul class="menuBack">
<li class="menu_li"><a href="">链路管理</a></li>
<liclass="menu_li"><a href="">定位数据补传</a></li>
<liclass="menu_li"><a href="">定位信息交换</a></li>
<liclass="menu_li"><a href="">下级平台上报</a></li>
<liclass="menu_li"><a href="">上级请求-自动应答</a></li>
<liclass="menu_li"><a href="">上级请求-人工应答</a></li>
<liclass="menu_li"><a href="">上级请求-无需应答</a></li>
</ul>
</div>
</div>
</div>
<div id="xtgl"class="menuBlock">
<divclass="menuPNG">
<imgsrc="icons_thbd/topicon4.png" alt="thbd"><br>
<spanstyle="color:#FFF">系统管理</span>
</div>
</div>
</div>
<divid="header-right">
<labelid="time"></label>
</div>
</div>
<divid="content" class="easyui-layout"data-options="fit:true">
<div id="west_area" data-options="region:'west',split:true,title:'West'"style="position:relative;"> </div>
<div id="south_area"data-options="region:'south',border:false"style="height:100px;background:#A9FACD;padding:10px;">southregion</div>
<divid="center_area" data-options="region:'center',title:'Center',href:'amap2.jsp'"></div>
</div>
</body>
</html>
//amap2.jsp
<%-- jsp --%>
<%@ pagecontentType="text/html;charset=GBK" language="java"errorPage="" %>
<%!
//add a member
public int count;
public String info(){
return "this is background info.";
}
%>
<%-- html--%>
<styletype="text/css">
#map { height:100%;width:100%; }
</style>
<div id="map"data-options="region:'center',title:'Center',href:'amap2.jsp'"></div>
<%-- javascript --%>
<scripttype="text/javascript">
$(document).ready(function(){
//dynamic load baidu map js lib
$.getScript("http://webapi.amap.com/maps?v=1.3&key=416a43c96936f23269f63b3148a84ab9",function(data, status, jqxhr) {
mapInit();
});
//map function
var mapObj;
function mapInit()
{
//create map
var opt = {
level:13,//level
center:new AMap.LngLat(116.397428,39.90923),//center point
doubleClickZoom:true,//zoom when double click
scrollWheel:true//zoom when scroll wheel
}
mapObj = new AMap.Map("map",opt);
//predefined plugin
mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){
var t=new AMap.ToolBar(mapObj);
mapObj.addControl(t);
var o=new AMap.OverView({isOpen:false});//true:openoverview when init
mapObj.addControl(o);
var s=new AMap.Scale();
mapObj.addControl(s);
});
//add car marker
var car=new AMap.Marker({
id:"test01",
position:new AMap.LngLat(116.397428,39.90923),
icon:"images/car.png",
map:mapObj
});
AMap.event.addListener(car,"click",carClick);
var car2=new AMap.Marker({
id:"test02",
position:new AMap.LngLat(116.387428,39.90823),
icon:"images/car2.png",
map:mapObj
});
AMap.event.addListener(car2,"click",carClick);
//add marker cluster
var carArray=[car,car2];
varcarClustererStyles=[{url:"images/m1.png",size:newAMap.Size(53,52),offset:newAMap.Pixel(0,-26)},{url:"images/m2.png",size:new AMap.Size(56,55)}];
mapObj.plugin(["AMap.MarkerClusterer"],function(){
var carClusterer=newAMap.MarkerClusterer(mapObj,carArray,{styles:carClustererStyles,averageCenter:true});
});
}
function carClick(e){
//$.get(url,data,callback),use ajax to get background data
console.debug("click="+e.lnglat+","+e.pixel+","+e.type+e.target);
var info="<%=info()%>";
var infoWin=createInfoWindow(info);
infoWin.open(mapObj,e.lnglat);
}
function createInfoWindow(strInfo){
var infoWin=new AMap.InfoWindow({
content:"<h1>this isinfoWindow</h1><p>"+strInfo+"</p>"
});
return infoWin;
}
});
</script>
5 方法：控件
5.1 布局：整体布局eaayui-layout,面板eaysui-panel
5.1.1整体布局easyui-layout：页面切分，整个界面的划分。
5.1.1.1 目标：将整个页面划分为不同的区域，整体控制。
5.1.1.2 原理：整体div划分为不同的区域，每个区域指定大小。
5.1.1.3 流程：设置easyui-layout目标div，指定每个分区域div。
注意:必须设置HTML的DOCTPYE版本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
示例：分区域
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">
<html>
<head>
<link href="easyUI/themes/default/easyui.css" rel="stylesheet"/>
<link href="easyUI/themes/icon.css"rel="stylesheet" />
<link href="easyUI/themes/color.css"rel="stylesheet" />
<script src= "easyUI/jquery.min.js"type="text/javascript"> </script>
<script src= "easyUI/jquery.easyui.min.js"type="text/javascript"> </script>
<title>easyUI Test</title>
</head>
<body>
<divclass="easyui-layout" style="height:100%;width:100%">
<divdata-options="region:'north',title:'north title',split:true"style="height:20%">north</div>
<divdata-options="region:'south',title:'south title',split:true"style="height:200px">south</div>
<divdata-options="region:'east',title:'east title',split:true"style="width:100px">east</div>
<divdata-options="region:'west',title:'west title',split:true"style="width:100px">west</div>
<divdata-options="region:'center',title:'center title'" >
<divclass="test">this is center</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
5.1.1.4 方法：使用easyui-layout设置目标区域，然后在其中设置分区域。
设置整体div：class="easyui-layout"
分区域region：north,south,west,east,center(必须)：data-options="region:'north'"。
标题：title。
可以推拉分割split: data-options="split:true"。
指定页面href: data-options="href:'plugin.htm'"。
折叠按钮：collapsible。
折叠：collapse，注意，所有的方法都是仅对layout控件起作用，其分区域是panel。
更多属性和方法参见API。
5.1.1.5 示例：分区域，并在不同的区域中加载指定页面。
//easyUI.htm
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link href="easyUI/themes/default/easyui.css" rel="stylesheet"/>
<link href="easyUI/themes/icon.css"rel="stylesheet" />
<link href="easyUI/themes/color.css"rel="stylesheet" />
<script src= "easyUI/jquery.min.js"type="text/javascript"> </script>
<script src= "easyUI/jquery.easyui.min.js"type="text/javascript"> </script>
<title>easyUI Test</title>
</head>
<body>
<div class="easyui-layout"style="height:100%;width:100%">
<div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>
<div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>
<div data-options="region:'east',title:'easttitle',split:true" style="width:100px">east</div>
<div data-options="region:'west',title:'westtitle',split:true" style="width:100px">west</div>
<divdata-options="region:'center',title:'center title',href:'plugin.htm'">
<div class="test">this iscenter</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
//plugin.htm
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
Hello World!
<h2>This is a pluginHTML.</h2>
</body>
</html>
5.1.2面板：easyui-panel,基本容器，模拟基本窗口。
<div id='panel'class='easyui-panel' title='mypanel' data-options="closable:true,
collapsible:true,minimizable:true,maximizable:true">
this is panel.
<p>panel content</p>
</div>
5.1.2.1 使用面板居中显示：data-options="style:{margin:'0 auto'}"
参考：http://www.jeasyui.com/forum/index.php?topic=2054.0
http://stackoverflow.com/questions/2392563/what-is-the-difference-between-using-aligncenter-and-margin-0-auto-to-cent
<div class="easyui-panel" data-options="style:{margin:'0 auto'}"style="width:600px;">
<table id="pg"class="easyui-propertygrid" style="width:536px;"></table>
</div>
5.1.3选项卡：easyui-tabs,带工具条的选项卡。
方法：定义div为easyui-tabs，子div为tab。
选项卡标题位置：tabPostion:’left’、’top’,’bottom’,’right’。
选项卡的大小：tabWidth,tabHeight。
工具条：设置工具条的内容，在tabs中指定tools为工具条的#id。
参考：http://www.jeasyui.net/demo/561.html
示例：工具条设置
<divid='tabs' class='easyui-tabs' title='mypanel' style="width:100%" data-options="closable:true">
<div title="Tab1">this is tab1</div>
<div title="Tab2">this is tab2</div>
</div>
<div id="tab-tools">
<a href="#"class="easyui-linkbutton" plain="true"iconCls="icon-add"></a>
<a href="#"class="easyui-linkbutton" plain="true"iconCls="icon-save"></a>
</div>
<script type="text/javascript">
$(document).ready(function(){
console.debug("debug");
$('#tabs').tabs({
tools:'#tab-tools'
});
});
</script>
示例：左侧tab
//easyUITest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN"
<html>
<head>
<metacharset="UTF-8">
<!-- easyUI library -->
<link rel="stylesheet"type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>
<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/color.css"/>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<div class="easyui-tabs" style="width: 100%;height: 930px;" data-options="tabPosition:'left',tabHeight:100">
<div title="参数设置"data-options="closable:false,href:'/thbd/pages/xtgl/cssz.html'"style="overflow:auto;text-align:center;">tab1</div>
<div title="报警设置"data-options="closable:false,href:'/thbd/pages/xtgl/bjsz.html'"style="overflow:auto;">tab2</div>
<div title="其它设置"data-options="closable:false,href:'/thbd/pages/xtgl/qtsz.html'"style="overflow:auto;">tab2</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</body>
</html>
5.1.4分类卡：easyui-accordin,折叠选项卡。
<div id='acc' class='easyui-accordion'title='myaccordion' style="width:100%"
data-options="iconCls:'icon-save'">
<div title="acc1">this is acc1</div>
<div title="acc2">this is acc2</div>
</div>
5.2 窗体和对话框：各种对话框，窗体等。
5.2.1窗体：easyui-window,模拟窗体，可移动等。
<div id='win' class='easyui-window' title='my win' style="width:300px;height:100px"
data-options="iconCls:'icon-save'">
all contents here.
</div>
5.2.2对话框：easyui-dialog,带工具栏和按钮的对话框。
<div id='dlg' class='easyui-dialog' title='my dialog' style="width:300px;height:150px"
data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:[{
text:'tb1',
iconCls:'icon-edit',
handler:function(){
console.debug('tb1=click.');
}
},{
text:'tb2',
iconCls:'icon-help',
handler:function(){
console.debug('tb2=click.');
}
}],
buttons:[{
text:'btn1',
handler:function(){
console.debug('button1=click.');
}
},{
text:'btn2',
handler:function(){
console.debug('button2=click.');
}
}]
">
all contents here.
</div>
5.2.3消息对话框：$.messager，各种消息对话框，目标是与用户进行交互。
通知消息：$.messager.show。
警告：$.messager.alert。
确认：$.messager.conform。
信息输入：$.message.prompt。
进度：$.messager.progress。
示例：点击显示消息框，2秒后淡出。
<input type='button' value='collapse' id='cp' />
<script type="text/javascript">
$(document).ready(function(){
console.debug("debug");
$('#cp').click(function(){
$.messager.show({
title:"my show",
msg:"this is show messager",
timeout:2000,
showType:"fade"
})
});
});
</script>
5.2.4表单：$(‘’).form，ajax提交表单。
5.2.5打开文件：easyui-filebox。
5.3 常用控件：按钮、输入框、下拉框。
5.3.1按钮：easyui-linkbutton,按钮，包括普通按钮，超链接按钮，checkbox,radiobox。
5.3.1.1 按钮：使用超链接按钮easyui-linkbutton,能够使用图标或文字。
只能有一个按钮能够选中：group。
按下和弹起两种状态:toggle。
<a class="easyui-linkbutton"href="plugin.htm">linkbutton</a>
<a class="easyui-linkbutton"href="#">bun</a>
<aclass="easyui-linkbutton" href="#"data-options="toggle:true">check</a><!--checkbox-->
<aclass="easyui-linkbutton" href="#" data-options="group:'r',toggle:true">r1</a><!--radiobox-->
<aclass="easyui-linkbutton" href="#"data-options="group:'r',toggle:true">r2</a>
<input type='button' value='collapse' id='cp' />
<a class="easyui-linkbutton"
style="width: 80%; height: 40px; margin-top:10px; margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">参数设置</a><br/>
<a class="easyui-linkbutton"
style="width: 80%; height: 40px;margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">报警设置</a><br/>
<a class="easyui-linkbutton"
style="width: 80%; height: 40px;margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">其它设置</a><br/>
5.3.1.2 checkbox:easyui中无此控件，使用标准控件。
获取状态：$(“input:checkbox:[key=value]:状态。
参考：http://www.poluoluo.com/jzxy/201402/261608.html
示例：
//easyuiTest.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<!-- easyUI library -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>
<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/color.css"/>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<inputtype="checkbox" name="ck" value="1" />a
<inputtype="checkbox" name="ck" value="2" />b
<inputtype="checkbox" name="ck2" value="3" />c
<inputtype="checkbox" name="ck2" value="4" />d
<script type="text/javascript">
$(document).ready(function() {
console.debug("ready");
$("input:checkbox[name='ck']").click(function(e){
var ck = $("input:checkbox[name='ck']:checked").val();
console.debug(ck);
});
})
</script>
</body>
</html>
5.3.2用户输入框:文本框等用于输入的控件
5.3.2.1 验证框：easyui-validbox,验证用户输入。
5.3.2.2 文本框：easyui-textbox,用户输入框。
可以指定带有按钮。
<inputclass="easyui-textbox" data-options="iconCls:'icon-search'"style="width:100px"></input>
5.3.2.3 数值框：easyui-numberbox,用户输入数字。
5.3.2.4 日期框：easyui-datebox。
5.3.2.5 日期时间框：easyui-datetimebox。
使用input创建。
<inputclass="easyui-datetimebox" data-options=""style="width:150px;"/>
5.3.2.6 日历：easyui-calendar。
5.3.2.7 微调框：easyui-spinner。
5.3.2.8 日期时间微调框：easyui-datetimespinner。
5.3.2.9 时间微调框：easyui-timespinner。
5.3.2.10 数值微调框：easyui-numberspinner。
5.3.3下拉框
5.3.3.1 自定义下拉框：$(‘’).combo(),不能通过标签创建。
5.3.3.2 列表下拉框：easyui-combobox。
静态创建：select填充。
动态创建：input 指定JSON文件的URL。
JSON格式：数组，每个item包含id和text属性。id表示item编号，text为显示内容。
示例：
//html
<input class="easyui-combobox"
style="width:150px"
data-options="validFild:'id',textField:'text',url:'/thbd/pages/BusinessStatistics/datatype.json'"/>
//datetype.json
[
{"id":1,"text":"事故疑点信息"},
{"id":2,"text":"指定行驶速度"},
{"id":3,"text":"累计行驶里程"},
{"id":4,"text":"疲劳驾驶信息"},
{"id":5,"text":"车辆基本信息"},
{"id":6,"text":"驾驶员信息"},
{"id":7,"text":"记录仪脉冲系数"},
{"id":8,"text":"记录仪时间"}
]
5.3.3.3 树形下拉框：easyui-combotree。
5.3.3.4 数据表格下拉框：easyui-combogrid。
5.4 菜单、工具栏：各种格式的菜单和工具栏。
5.4.1菜单：easyui-menu,菜单，包括多级菜单。
菜单创建后是隐藏的，需要显示的调用显示函数使其显示出来。或者将菜单指定为按钮的菜单属性，从而在鼠标移动到按钮时显示菜单项，实现类似菜单的效果（推荐，参见菜单按钮：easyui-menubutoon,模拟菜单栏。）。
示例：自定义显示菜单
<div id='mm' class='easyui-menu' style='width:300px;'>
<div data-options="iconCls:'icon-save'">menu0</div>
<divdata-options="href:'plugin.htm'">menu1
<div>
<div>menu1.0</div>
<div>menu1.1</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
console.debug("debug");
$('#mm').menu('show',{
left:200,
top:100
});
$('#mm').click(
function(item){
console.debug(item.target.innerText);
}
);
});
</script>
5.4.2菜单按钮：easyui-menubutoon,模拟菜单栏。
鼠标移动到按钮的时显示菜单项。
<a class="easyui-menubutton"href="javascript:void(0)" data-options="menu:'#mm'">menu</a>
<div id='mm' class='easyui-menu' style='width:200px;'>
<divdata-options="iconCls:'icon-save'">menu0</div>
<divdata-options="href:'plugin.htm'">menu1
<div>
<div>menu1.0</div>
<div>menu1.1</div>
</div>
</div>
</div>
5.4.3菜单分区按钮：easyui-menubutoon,模拟菜单栏。
鼠标移动到按钮的下拉箭头时才显示菜单项，如果移动到文本上不显示菜单项（菜单分为不同的功能区域）。
<a class="easyui-splitbutton"href="javascript:void(0)"data-options="menu:'#mm'">menu</a>
<div id='mm' class='easyui-menu' style='width:200px;'>
<div data-options="iconCls:'icon-save'">menu0</div>
<divdata-options="href:'plugin.htm'">menu1
<div>
<div>menu1.0</div>
<div>menu1.1</div>
</div>
</div>
</div>
5.4.4分页导航栏：easyui-pagination，导航条，根据导航页数构建url并刷新显示。
使用div定义。
总数total：总数据量。
单页数量pageSize：每页的大小。
当前页面前后文本beforePageText,afterPageText：显示在当前页面文本框前后。
页面提示信息displayMsg:可以使用from,to,total变量。
示例：
<div class="easyui-pagination"data-options="total:2000,pageSize:10,beforePageText:'before222xx',afterPageText:'afxxx1',displayMsg:'disp:x2x3:{from}-{to}={total}'"style=""></div>
5.4.5搜索框：easyui-searchbox，搜索框，根据用户输入的内容和查找的范围（menu菜单选择）调用查询函数searcher。
目标：根据不同的搜索级别，调用搜索函数搜索用户输入。
原理：设置input为搜索框，绑定一个div为搜索菜单，此菜单为div列表。
流程：设置搜索框，设置搜索菜单，绑定搜索菜单到搜索框。设置搜索函数。
方法：
设置搜索框：设置input的class为easyui-searchbox。
设置搜索菜单：一个div下的div列表。每个子div都需要设置name属性作为搜索范围。
绑定菜单：指定div的id为searchbox的menu属性。
设置搜索函数：设置searcher属性为一个funtion(value,name)。value是输入值，name是菜单的name属性。
示例：
//easyUITest.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<!-- easyUI library -->
<link rel="stylesheet"type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>
<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/color.css"/>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<inputclass="easyui-searchbox"
data-options="searcher:sc,prompt:'input name',menu:'#mm'"></input>
<divid="mm">
<div data-options="name:'all',iconCls:'icon-ok'">allnews</div>
<divdata-options="name:'sports'">sp</div>
</div>
<script type="text/javascript">
functionsc(value, name) {
console.debug(value);
console.debug(name);
}
</script>
</body>
</html>
5.4.6进度条：easyui-progressbar，进度条，根据进度值（百分数）显示进度。
5.4.7滑动条：easyui-slider。
5.5 树形列表：各种样式的树形列表及其数据操作。
5.5.1树形列表：easyui-tree。
目标：数据以树表列表展示，具有选中状态，折叠、拖拽、异步加载等功能。
原理：ul元素的扩展封装。
流程：创建tree控件，设置样式，设置数据。
方法：
创建tree控件：ul设置class为easyui-tree。
设置样式：整体样式使用ul的dataoptions,单项样式使用json的属性。
设置数据：使用json填充ul（推荐）或直接填充ul的标签。
示例：
//easyUITest.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<!-- easyUI library -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>
<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->
<linkrel="stylesheet" type="text/css"
href="easyui/jquery-easyui-1.4.3/themes/color.css"/>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<scripttype="text/javascript"
src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
<title>This is a testpage for easyUI</title>
</head>
<body>
<ulid="tt" class="easyui-tree"data-options="checkbox:true,url:'/thbd/pages/BusinessStatistics/tree.json'">
</ul>
</body>
</html>
//tree.json
[{
"id":"tt",
"text":"Root",
"children":[{
"text":"1.1"
},{
"text":"1.2",
"state":"closed",
"children":[{
"text":"1.2.1",
"checked":true
},
{
"text":"1.2.2"
},
{
"text":"1.2.3"
}]
}]
}]
5.5.2树形数据列表：easyui-treegrid
5.6 数据表格：各种样式的数据表格及样式、数据操作。
5.6.1数据表格：datagrid。
参见：easyUI-数据表格datagrid.docx
5.6.2属性表格：easyui-propertygrid,datagrid的派生类。
参见：easyUI-数据表格datagrid.docx属性表格部分
6 附件:API文档
API：
7 方法：基本功能
7.1 解析easyUI：$.parse.parse(【’#cc’】)。
7.2 设置easyUI路径：easyloader.base=目录。
7.3 加载easyUI模块：easyloader.loader(‘name’,callbackfun);
7.4 加载脚本：using(‘脚本路径’，callbackfun);
8 方法：基本控件
8.1 可拖动控件：easyui-draggable。
8.2 可放置区域：easyui-droppable。
8.3 可调整大小控件：easyui-resizable。
8.4 鼠标提示控件：easyui-tooltip。
9 方法：扩展功能
包括Ribbon，可编辑的树、表格等。