寫(xiě)在前面：jQuery EasyUI 是一個(gè)基于 jQuery 的前端ui框架，集成了各種用戶界面插件?？赡苡行┩瑢W(xué)覺(jué)得都什么年代了這個(gè)應(yīng)該快被淘汰了，但不可否認(rèn)的是仍有許多it公司用jQueryEasyUI來(lái)快速開(kāi)發(fā)后臺(tái)管理系統(tǒng),因?yàn)橄噍^與一些mvvm框架構(gòu)建的ui系統(tǒng)jQuery EasyUI兼容性更好，適合一些兼容性較高的場(chǎng)景使用，也非常適合一些主要從事后端工作的同學(xué)快速搭建前端頁(yè)面。同時(shí)它提供建立現(xiàn)代化的具有交互性的 javascript 應(yīng)用的必要的功能，使用 easyui，不需要寫(xiě)太多 javascript 代碼，一般情況下只需要使用一些 html 標(biāo)記來(lái)定義用戶界面。
一.jQuery EasyUI快速入門demo
首先先下載easyui
然后直接上代碼:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="jquery.easyui.min.js"></script>
</head>
<body>
<div class='easyui-draggable'>拖動(dòng)<div>
</body>
</html>
只要一行代碼easyui-draggable這個(gè)div元素就能實(shí)現(xiàn)鼠標(biāo)拖動(dòng)效果了。
二.jQuery EasyUI優(yōu)缺點(diǎn)
jQuery EasyUI為提供了大多數(shù)UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一個(gè)前臺(tái)ui界面的插件，功能相對(duì)沒(méi)extjs強(qiáng)大，但頁(yè)面也是相當(dāng)好看的，同時(shí)頁(yè)面支持各種themes以滿足使用者對(duì)于頁(yè)面不同風(fēng)格的喜好。一些功能也足夠開(kāi)發(fā)者使用，相對(duì)于extjs更輕量。
jQuery EasyUI特點(diǎn)：
1.基于jquery用戶界面插件的集合;
2.為一些當(dāng)前用于交互的js應(yīng)用提供必要的功能;
3.EasyUI支持兩種渲染方式分別為javascript方式（如：4.$('#p').panel({...})）和html標(biāo)記方式（如：class="easyui-panel"）;
5.支持HTML5（通過(guò)data-options屬性）;
6.開(kāi)發(fā)產(chǎn)品時(shí)可節(jié)省時(shí)間和資源;
7.簡(jiǎn)單，但很強(qiáng)大;
8.支持?jǐn)U展，可根據(jù)自己的需求擴(kuò)展控件;
9.目前各項(xiàng)不足正以版本遞增的方式不斷完善.
二.jQuery EasyUI基礎(chǔ)組件
1.Draggable
通過(guò)標(biāo)簽創(chuàng)建一個(gè)可拖動(dòng)的元素。需要給標(biāo)簽添加一個(gè)class類，值為easyui-draggable.
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div></div>
也可以通過(guò)javascript來(lái)創(chuàng)建。
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});
draggable的一個(gè)重要屬性proxy，在拖動(dòng)的時(shí)候使用的代理元素，當(dāng)使用'clone'的時(shí)候，將使用該元素的一個(gè)復(fù)制元素來(lái)作為替代元素。如果指定了一個(gè)函數(shù),它將返回一個(gè)jquery對(duì)象。
$('#dd2').draggable({ // 克隆一個(gè)元素讓它可以移動(dòng)
proxy:'clone'
});
$('#dd3').draggable({
proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}
});
2.Droppable
通過(guò)標(biāo)簽創(chuàng)建一個(gè)可放置的元素。需要給標(biāo)簽添加一個(gè)class類，值為easyui-droppable。
<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>
也可以通過(guò)javascript創(chuàng)建。
<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({
accept:'#d1,#d3' //可以接受d1、d3
});
3.SearchBox
搜索框提示用戶需要輸入搜索的值。它可以結(jié)合一個(gè)菜單，允許用戶選擇不同的搜索類別。在用戶按下回車鍵或點(diǎn)擊組件右邊的搜索按鈕的時(shí)候會(huì)執(zhí)行搜索操作。
![運(yùn)行結(jié)果.png . . .]
1. 使用標(biāo)簽創(chuàng)建。添加'easyui-searchbox'類到< input >標(biāo)簽。
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:qq,prompt:'Please Input Value'"></input>
2.通過(guò)javascript創(chuàng)建
<input id="ss"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
$('#ss').searchbox({
searcher:function(value,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'Please Input Value'
});
我們可以通過(guò)它的setValue與getValue來(lái)設(shè)置或都返回一個(gè)搜索值。
$('#ss').searchbox('setValue','123');
$('#ss').searchbox('getValue',"");
4.Resizable
我們通過(guò)給< div >標(biāo)簽添加class="easyui-resizable" 屬性來(lái)創(chuàng)建一個(gè)可以調(diào)整大小的窗口。
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
也可以通過(guò)javascript來(lái)創(chuàng)建。
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({
maxWidth:800, //當(dāng)調(diào)整大小時(shí)候的最大寬度
maxHeight:600 //當(dāng)調(diào)整大小時(shí)候的最大高度
});
5.pagination
分頁(yè)控件允許用戶導(dǎo)航頁(yè)面的數(shù)據(jù)。它支持頁(yè)面導(dǎo)航和頁(yè)面長(zhǎng)度選擇的選項(xiàng)設(shè)置。用戶可以在分頁(yè)控件上添加自定義按鈕，以增強(qiáng)其功能。
分頁(yè)控件可以通過(guò)標(biāo)簽來(lái)創(chuàng)建，我們通過(guò)設(shè)置< div >標(biāo)簽的class=‘easyui-pagination’來(lái)創(chuàng)建。
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
我們更多的是通過(guò)javascript來(lái)創(chuàng)建。
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000, //總記錄數(shù)，在分頁(yè)控件創(chuàng)建時(shí)初始的值。
pageSize:10 //頁(yè)面大小
});
6.ProgressBar
進(jìn)度條提供了一個(gè)反饋顯示一個(gè)長(zhǎng)時(shí)間運(yùn)行的操作進(jìn)展?？梢愿碌倪M(jìn)展條，讓用戶知道當(dāng)前正在執(zhí)行操作。
創(chuàng)建進(jìn)度條比較簡(jiǎn)單，可以用下面的兩種方式來(lái)創(chuàng)建。
1.從標(biāo)簽創(chuàng)建更加簡(jiǎn)單，添加'easyui-progressbar'類到< div >標(biāo)簽。
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
2.使用Javascript創(chuàng)建進(jìn)度條。
<div id="p" style="width:400px;"></div>
$('#p').progressbar({
value: 60
});
獲取當(dāng)前值和設(shè)置一個(gè)新的值到進(jìn)度條控件。
var value = $('#p').progressbar('getValue'); //獲取進(jìn)度條的值
if (value < 100){
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value); //設(shè)置進(jìn)度條的值
}
7.Tooltip
當(dāng)用戶將鼠標(biāo)移動(dòng)到元素上的時(shí)候，將會(huì)顯示一個(gè)消息提示框。提示框的內(nèi)容可以是頁(yè)面中任何一個(gè)HTML元素或者通過(guò)Ajax發(fā)送后臺(tái)請(qǐng)求以獲取提示框內(nèi)容。
1.通過(guò)標(biāo)簽創(chuàng)建提示框，給元素添加一個(gè)"easyui-tooltip"的類名，無(wú)需任何Javascript代碼。
<a href="javascript:void(0)" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
2.通過(guò)Javascript創(chuàng)建提示框。
<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({
position: 'right', //顯示的位置
content: '<span style="color:#fff">This is the tooltip message.</span>', // 顯示的內(nèi)容
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}});
8.綜合案例
我們這一節(jié)的課的主要內(nèi)容講的是實(shí)現(xiàn)對(duì)學(xué)校課程表的安排。主要是通過(guò)拖放組件來(lái)完成。如下圖所示完成后的樣式：
首先我們先來(lái)實(shí)現(xiàn)學(xué)校所有的課程：
<div class="left">
<table>
<tr><td><div class="item">English</div></td></tr>
<tr><td><div class="item">Science</div></td></tr>
<tr><td><div class="item">Music</div></td></tr>
<tr><td><div class="item">History</div></td></tr>
<tr><td><div class="item">Computer</div></td></tr>
<tr><td><div class="item">Mathematics</div></td></tr>
<tr><td><div class="item">Arts</div></td></tr>
<tr><td><div class="item">Ethics</div></td></tr>
</table>
</div>
顯示時(shí)間表
<div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">09:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<!-.............-->
</table>
</div>
拖動(dòng)在左側(cè)的學(xué)校科目
$('.left .item').draggable({
revert:true,
proxy:'clone'
});
放置學(xué)?？颇吭跁r(shí)間表單元格上
$('.right td.drop').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
三.菜單和按鈕
1.Menu
菜單組件通常用于快捷菜單。他是構(gòu)建其他菜單組件的必備基礎(chǔ)組件。
通過(guò)標(biāo)簽創(chuàng)建菜單，給< div >標(biāo)簽添加一個(gè)名為'easyui-menu'的類。每個(gè)菜單項(xiàng)都通過(guò)< div >標(biāo)簽創(chuàng)建。我們可以添加'iconCls'屬性來(lái)給菜單項(xiàng)定義一個(gè)圖標(biāo)顯示到菜單項(xiàng)的左側(cè)。添加'menu-sep'類菜單項(xiàng)將會(huì)生成一個(gè)菜單分割線。如下代碼：
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="javascript:alert('new')">New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div icon="icon-save">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
當(dāng)菜單創(chuàng)建之后是不顯示的，調(diào)用 'show' 方法顯示它或者調(diào)用 'hide' 方法隱藏它。
如下代碼：
$('#mm').menu('show', {
left: 200,
top: 100
});
如下圖效果：
2.LinkButton
通常情況下，使用 < button > 元素來(lái)創(chuàng)建按鈕，而鏈接按鈕（LinkButton）則是使用 < a > 元素來(lái)創(chuàng)建的。所以實(shí)際上一個(gè)鏈接按鈕（LinkButton）就是一個(gè)顯示為按鈕樣式的 < a > 元素。
為了創(chuàng)建鏈接按鈕（LinkButton），我們要做的就是添加一個(gè)名為 'easyui-linkbutton' 的 class 屬性到 < a > 元素。
<a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
也可以使用Javascript創(chuàng)建按鈕。
<a id="btn" href="javascript:void(0)">easyui</a>
$('#btn').linkbutton({
iconCls: 'icon-search'
});
可以通過(guò)jquery來(lái)綁定按鈕事件。
$(function(){
$('#btn').bind('click', function(){
alert('easyui');
});
});
也可以通過(guò)*disable*與*enable*來(lái)禁用或啟用按鈕。
$('#btn').linkbutton('disable'); //禁用按鈕
$('#btn').linkbutton('enable'); //啟用按鈕
3.MenuButton
菜單按鈕（Menu Button）包含一個(gè)按鈕（button）和一個(gè)菜單（menu）組件，當(dāng)點(diǎn)擊或移動(dòng)鼠標(biāo)到按鈕上，將顯示一個(gè)對(duì)應(yīng)的菜單。
為了定義一個(gè)菜單按鈕（Menu Button），您應(yīng)該定義一個(gè)鏈接按鈕（Link Button）和一個(gè)菜單（menu），如下代碼：
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
也可以使用javascript創(chuàng)建菜單按鈕。如下代碼：
<a href="javascript:void(0)" id="mb">Edit</a>
<div id="mm" style="width:150px">
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<!--........-->
</div>
js代碼如下：
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
});
4.Split Button
分割按鈕（Split Button）包含一個(gè)鏈接按鈕（Link Button）和一個(gè)菜單（Menu）。當(dāng)用戶點(diǎn)擊或者鼠標(biāo)懸停在向下箭頭區(qū)域，將會(huì)顯示一個(gè)對(duì)應(yīng)的菜單。
使用標(biāo)簽創(chuàng)建分割按鈕。
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
使用Javascript創(chuàng)建分割按鈕。
<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>
<div id="mm" style="width:100px;">
...
</div>
$('#sb').splitbutton({
iconCls: 'icon-ok',
menu: '#mm'
});
三.布局
1.panel
面板作為承載其它內(nèi)容的容器。這是構(gòu)建其他組件的基礎(chǔ)（比如：layout,tabs,accordion等）。它還提供了折疊、關(guān)閉、最大化、最小化和自定義行為。面板可以很容易地嵌入到web頁(yè)面的任何位置。
下面就來(lái)介紹一下如何創(chuàng)建面板：
1. 通過(guò)標(biāo)簽創(chuàng)建面板
通過(guò)標(biāo)簽創(chuàng)建更簡(jiǎn)單。添加'easyui-panel'類到< div >標(biāo)簽。
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
2. js創(chuàng)建面板與它右上角的工具欄
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
可以通過(guò)調(diào)用'move'方法移動(dòng)面板到新的位置。
$('#p').panel('move',{
left:100,
top:100
});
2.tabs
選項(xiàng)卡顯示一批面板。但在同一個(gè)時(shí)間只會(huì)顯示一個(gè)面板。每個(gè)選項(xiàng)卡面板都有頭標(biāo)題和一些小的按鈕工具菜單，包括關(guān)閉按鈕和其他自定義按鈕。
我們可以通過(guò)以下方法來(lái)創(chuàng)建tabs
1. 通過(guò)標(biāo)簽創(chuàng)建選項(xiàng)卡
通過(guò)標(biāo)簽可以更容易的創(chuàng)建選項(xiàng)卡，我們不需要寫(xiě)任何Javascript代碼。只需要給< div >標(biāo)簽添加一個(gè)類'easyui-tabs'。每個(gè)選項(xiàng)卡面板都通過(guò)子< div >標(biāo)簽進(jìn)行創(chuàng)建，用法和panel(面板)相同。
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
2. 通過(guò)Javascript創(chuàng)建選項(xiàng)卡
下面的代碼演示如何使用Javascript創(chuàng)建選項(xiàng)卡，當(dāng)該選項(xiàng)卡被選擇時(shí)將會(huì)觸發(fā)'onSelect'事件。
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
添加新的選項(xiàng)卡面板
以下代碼是添加一個(gè)新的選項(xiàng)卡，并添加一個(gè)菜單圖標(biāo)。
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
獲取選擇的選項(xiàng)卡
我們可以通過(guò)以下方法獲取選項(xiàng)卡，如下代碼：
// get the selected tab panel and its tab object
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // the corresponding tab object
關(guān)于選項(xiàng)卡的屬性與方法還有很多,有興趣的同學(xué)請(qǐng)看官網(wǎng)這里。
3.Accordion
折疊面板（Accordion）包含一系列的面板（panel）。 所有面板（panel）的頭部（header）都是可見(jiàn)的，但是一次僅僅顯示一個(gè)面板（panel）的 body 內(nèi)容。 當(dāng)用戶點(diǎn)擊面板（panel）的頭部（header）時(shí)，該面板（panel）的 body 內(nèi)容將可見(jiàn)，同時(shí)其他面板（panel）的 body 內(nèi)容將隱藏不可見(jiàn)。
通過(guò)標(biāo)簽創(chuàng)建折疊面板，給< div >標(biāo)簽添加一個(gè)名為'easyui-accordion'的類。
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
我們可以調(diào)用'getSelected'方法獲取當(dāng)前面板，此外我們還可以調(diào)用'refresh'方法重新載入新內(nèi)容。
var pp = $('#aa').accordion('getSelected'); // 獲取選擇的面板
if (pp){
pp.panel('refresh','new_content.php'); // 調(diào)用'refresh'方法刷新
}
關(guān)于折疊面板的屬性與方法還有很多,有興趣的同學(xué)請(qǐng)看這里。
3.邊框布局
邊框布局（border layout）提供五個(gè)區(qū)域：east、west、north、south、center。以下是一些通常用法：
north 區(qū)域可以用來(lái)顯示網(wǎng)站的標(biāo)語(yǔ)。
south 區(qū)域可以用來(lái)顯示版權(quán)以及一些說(shuō)明。
west 區(qū)域可以用來(lái)顯示導(dǎo)航菜單。
east 區(qū)域可以用來(lái)顯示一些推廣的項(xiàng)目。
center 區(qū)域可以用來(lái)顯示主要的內(nèi)容。
1. 通過(guò)標(biāo)簽創(chuàng)建布局
為< div >標(biāo)簽增加名為'easyui-layout'的類。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
2. 使用完整頁(yè)面創(chuàng)建布局
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
</body>
3. 創(chuàng)建嵌套布局
嵌套在內(nèi)部的布局面板的左側(cè)面板是折疊的。
<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsed:true" style="width:180px"></div>
<div data-options="region:'center'"></div>
</div>
</div>
</body>
我們可以用以下方法折疊布局面板
$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');
如下js代碼添加西側(cè)區(qū)域面板和工具菜單按鈕。
$('#cc').layout('add',{
region: 'west',
width: 180,
title: 'West Title',
split: true,
tools: [{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-remove',
handler:function(){alert('remove')}
}]
});
關(guān)于布局面板的屬性與方法還有很多，我們就不多做介紹了，有興趣的同學(xué)請(qǐng)看這里。
四.表單
1.ValidateBox
validatebox(驗(yàn)證框)的設(shè)計(jì)目的是為了驗(yàn)證輸入的表單字段是否有效。如果用戶輸入了無(wú)效的值，它將會(huì)更改輸入框的背景顏色，并且顯示警告圖標(biāo)和提示信息。
通過(guò)標(biāo)簽創(chuàng)建驗(yàn)證框。 為< input >標(biāo)簽增加名為'easyui-validatebox'的類。
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
使用Javascript創(chuàng)建驗(yàn)證框。
<input id="vv" />
<script>
$('#vv').validatebox({
required: true,
validType: 'email'
});
</script>
驗(yàn)證規(guī)則
驗(yàn)證規(guī)則是根據(jù)使用需求和驗(yàn)證類型屬性來(lái)定義的，這些規(guī)則已經(jīng)實(shí)現(xiàn)：
email：匹配E-Mail的正則表達(dá)式規(guī)則。
url：匹配URL的正則表達(dá)式規(guī)則。
length[0,100]：允許在x到x之間個(gè)字符。
remote['http:／／.../action.do','paramName']：發(fā)送ajax請(qǐng)求需要驗(yàn)證的值，當(dāng)成功時(shí)返回true。
自定義驗(yàn)證規(guī)則，需要重寫(xiě)$.fn.validatebox.defaults.rules中定義的驗(yàn)證器函數(shù)和無(wú)效消息。例如，定義一個(gè)最小長(zhǎng)度(minLength)的自定義驗(yàn)證：
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
現(xiàn)在就可以在輸入框中限制最小長(zhǎng)度為5的自定義最小長(zhǎng)度驗(yàn)證了：
<input class="easyui-validatebox" data-options="validType:'minLength[5]'">
關(guān)于validatebox的屬性與方法還有很多，有興趣的同學(xué)請(qǐng)看這里。
2.ComboBox
下拉列表框顯示一個(gè)可編輯文本框和下拉式列表，用戶可以選擇一個(gè)值或多個(gè)值。用戶可以直接輸入文本到列表頂部或選擇一個(gè)或多個(gè)當(dāng)前列表中的值。
下面我們就來(lái)介紹一下如何創(chuàng)建下拉列表框：
1.通過(guò)< select >元素創(chuàng)建一個(gè)預(yù)定義結(jié)構(gòu)的下拉列表框。我們要給該元素添加一個(gè)“easyui-combobox”的類。**
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
2.通過(guò)< input >標(biāo)簽創(chuàng)建下拉列表框。我們要給該元素添加一個(gè)“easyui-combobox”的類。**
<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'" />
3.通過(guò)javascript創(chuàng)建下拉列表框。
<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
我們可以通過(guò)setValue設(shè)置組件的值，可以通過(guò)setText設(shè)置輸入的文本，可以通過(guò)getValue與getText獲取組件的值與輸入的文本。
$('#cc').combobox('setValue',12); //設(shè)置值
$('#cc').combobox('getText',''); // 獲取輸入文本
關(guān)于combobox的屬性與方法還有很多,有興趣的同學(xué)請(qǐng)看這里。
3.Combo
自定義下拉框顯示一個(gè)可編輯的文本框和下拉面板在html頁(yè)面。
自定義下拉框使用Javascript創(chuàng)建一個(gè)< select >或< input >元素。
<input id="cc" value="001">
$('#cc').combo({
required:true,
multiple:true
});
我們可以通過(guò)setValue設(shè)置組件的值，可以通過(guò)setText設(shè)置輸入的文本，可以通過(guò)getValue與getText獲取組件的值與輸入的文本。
$('#cc').combo('setValue',12); //設(shè)置值
$('#cc').combo('getText',''); // 獲取輸入文本
3.ComboTree
樹(shù)形下拉框結(jié)合選擇控件和下拉樹(shù)控件。它與combobox(下拉列表框)類似，但是將下拉列表框的列表替換成了樹(shù)形控件。該控件支持樹(shù)狀態(tài)復(fù)選框，方便多選操作。
有兩種方法可以創(chuàng)建下拉樹(shù)控件。
1.使用標(biāo)簽創(chuàng)建樹(shù)形下拉框。要為該元素添加easyui-combotree的類。
<select id="cc" class="easyui-combotree" style="width:200px;"
data-options="url:'get_data.php',required:true"></select>
2.使用Javascript創(chuàng)建樹(shù)形下拉框。
<input id="cc" value="01">
$('#cc').combotree({
url: 'get_data.php',
required: true
});
這其中的url為遠(yuǎn)程數(shù)據(jù)的鏈接。
我們可以通過(guò)loadData方法來(lái)初始化樹(shù)形下拉框:
$('#cc').combotree('loadData', [{
id: 1,
text: 'Languages',
children: [{
id: 11,
text: 'Java'
},{
id: 12,
text: 'C++'
}]
}]);
關(guān)于comboTree的屬性與方法還有很多，有興趣的同學(xué)請(qǐng)看這里。
4.DateBox
日期輸入框結(jié)合了一個(gè)可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會(huì)自動(dòng)轉(zhuǎn)變?yōu)橐粋€(gè)有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。
有兩種方式可以創(chuàng)建日期輸入框：
1.使用標(biāo)簽創(chuàng)建日期輸入框。我們要為input標(biāo)簽添加一個(gè)“easyui-datebox”的類。
<input id="dd" type="text" class="easyui-datebox" required="required"></input>
2.使用Javascript創(chuàng)建日期輸入框。
<input id="dd" type="text"></input>
$('#dd').datebox({
required:true
});
我們可以通過(guò)"setValue"方法來(lái)設(shè)置datebox的值，通過(guò)“getValue”獲取datebox的值。
$('#dd').datebox('setValue','01/01/2016');
$('#dd').datebox('getValue','');
5.DateTimeBox
和日期輸入框類似，日期時(shí)間輸入框允許用戶選擇日期和指定的時(shí)間并按照指定的輸出格式顯示。相比日期輸入框，它在下拉面板中添加了一個(gè)時(shí)間微調(diào)器。
datetimebox的創(chuàng)建方法與datebox類似，也有兩種方法，
1.使用標(biāo)簽創(chuàng)建日期時(shí)間輸入框。我們要為input標(biāo)簽添加一個(gè)“easyui-datetimebox”的類。
<input class="easyui-datetimebox" name="birthday"
data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">
2.使用Javascript創(chuàng)建日期時(shí)間輸入框。
<input id="dt" type="text" name="birthday"></input>
$('#dt').datetimebox({
value: '3/4/2010 2:3',
required: true,
showSeconds: false
});
我們可以通過(guò)"setValue"方法來(lái)設(shè)置datetimebox的值，通過(guò)“getValue”獲取datetimebox的值。
$('#dt').datetimebox('setValue','01/01/2016 12:00:00');
$('#dt').datetimebox('getValue','');
6.Calendar
日歷控件顯示一個(gè)月的日歷，允許用戶選擇日期和移動(dòng)到下一個(gè)或上一個(gè)月。默認(rèn)情況下，一周的第一天是周日。它可以通過(guò)設(shè)置'firstDay'屬性的值來(lái)更改設(shè)置。
使用標(biāo)簽創(chuàng)建日歷。我們需要將< div >標(biāo)簽的類的值設(shè)置為easyui-calendar。
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
使用Javascript創(chuàng)建日歷。
<div id="cc" style="width:180px;height:180px;"></div>
$('#cc').calendar({
current:new Date()
});
7.TimeSpinner
時(shí)間微調(diào)組件允許用戶點(diǎn)擊組件右側(cè)的小按鈕來(lái)增加或減少時(shí)間。
通過(guò)input標(biāo)簽來(lái)創(chuàng)建，需要我們將它的class屬性值設(shè)置為easyui-timespinner。
<input id="ss" class="easyui-timespinner" style="width:80px;"
required="required" data-options="min:'08:30',showSeconds:true" />
還可以通過(guò)Javascript創(chuàng)建時(shí)間微調(diào)組件。
<input id="ss" style="width:80px;">
$('#ss').timespinner({
min: '08:30',
required: true,
showSeconds: true
});
設(shè)置時(shí)間微調(diào)組件的值。 代碼如下：
$('#ss').timespinner('setValue', '17:45'); // 設(shè)置時(shí)間微調(diào)組件的值
var v=$('#ss').timespinner('getValue'); // 獲取時(shí)間微調(diào)組件的值
alert(v);
8.Slider
滑動(dòng)條允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)滑塊控件沿著軌道移動(dòng)的時(shí)候，將會(huì)顯示一個(gè)提示來(lái)表示當(dāng)前值。用戶可以通過(guò)設(shè)置其屬性自定義滑塊。
我們使用< input >標(biāo)簽來(lái)創(chuàng)建滑動(dòng)條，設(shè)置它的class屬性為easyui-slider。
<input class="easyui-slider" value="12" style="width:300px"
data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />
也允許使用< div >創(chuàng)建滑動(dòng)條，但是'value'屬性是無(wú)效的。
<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>
還可以使用javascript來(lái)創(chuàng)建。
<div id="ss" style="height:200px"></div>
$('#ss').slider({
mode: 'v',
tipFormatter: function(value){
return value + '%';
}
});
我們可以通過(guò)"setValue"方法來(lái)設(shè)置slider的值，通過(guò)“getValue”獲取slider的值。
$('#ss').slider('setValue',25);
$('#ss').slider('getValue','');
還有一個(gè)常用的onchange事件，在值發(fā)生變化時(shí)觸發(fā)。
$('#ss').slider({
mode: 'v', // 設(shè)置水平h 還是垂直v
tipFormatter: function(value){ //格式化滑動(dòng)條
return value + '%';
},
onChange: function(value){
alert(value);
}
});
另外還可以通過(guò)max與min屬性設(shè)置滑動(dòng)條的最大與最小值。
