寫在前面：jQuery EasyUI 是一個基于 jQuery 的前端ui框架，集成了各種用戶界面插件?？赡苡行┩瑢W(xué)覺得都什么年代了這個應(yīng)該快被淘汰了，但不可否認(rèn)的是仍有許多it公司用jQueryEasyUI來快速開發(fā)后臺管理系統(tǒng),因?yàn)橄噍^與一些mvvm框架構(gòu)建的ui系統(tǒng)jQuery EasyUI兼容性更好，適合一些兼容性較高的場景使用，也非常適合一些主要從事后端工作的同學(xué)快速搭建前端頁面。同時它提供建立現(xiàn)代化的具有交互性的 javascript 應(yīng)用的必要的功能，使用 easyui，不需要寫太多 javascript 代碼，一般情況下只需要使用一些 html 標(biāo)記來定義用戶界面。
一.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'>拖動<div>
</body>
</html>
只要一行代碼easyui-draggable這個div元素就能實(shí)現(xiàn)鼠標(biāo)拖動效果了。
二.jQuery EasyUI優(yōu)缺點(diǎn)
jQuery EasyUI為提供了大多數(shù)UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基于JQuery的一個前臺ui界面的插件，功能相對沒extjs強(qiáng)大，但頁面也是相當(dāng)好看的，同時頁面支持各種themes以滿足使用者對于頁面不同風(fēng)格的喜好。一些功能也足夠開發(fā)者使用，相對于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（通過data-options屬性）;
6.開發(fā)產(chǎn)品時可節(jié)省時間和資源;
7.簡單，但很強(qiáng)大;
8.支持?jǐn)U展，可根據(jù)自己的需求擴(kuò)展控件;
9.目前各項(xiàng)不足正以版本遞增的方式不斷完善.
二.jQuery EasyUI基礎(chǔ)組件
1.Draggable
通過標(biāo)簽創(chuàng)建一個可拖動的元素。需要給標(biāo)簽添加一個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>
也可以通過javascript來創(chuàng)建。
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});
draggable的一個重要屬性proxy，在拖動的時候使用的代理元素，當(dāng)使用'clone'的時候，將使用該元素的一個復(fù)制元素來作為替代元素。如果指定了一個函數(shù),它將返回一個jquery對象。
$('#dd2').draggable({ // 克隆一個元素讓它可以移動
proxy:'clone'
});
$('#dd3').draggable({
proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}
});
2.Droppable
通過標(biāo)簽創(chuàng)建一個可放置的元素。需要給標(biāo)簽添加一個class類，值為easyui-droppable。
<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>
也可以通過javascript創(chuàng)建。
<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({
accept:'#d1,#d3' //可以接受d1、d3
});
3.SearchBox
搜索框提示用戶需要輸入搜索的值。它可以結(jié)合一個菜單，允許用戶選擇不同的搜索類別。在用戶按下回車鍵或點(diǎn)擊組件右邊的搜索按鈕的時候會執(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.通過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'
});
我們可以通過它的setValue與getValue來設(shè)置或都返回一個搜索值。
$('#ss').searchbox('setValue','123');
$('#ss').searchbox('getValue',"");
4.Resizable
我們通過給< div >標(biāo)簽添加class="easyui-resizable" 屬性來創(chuàng)建一個可以調(diào)整大小的窗口。
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
也可以通過javascript來創(chuàng)建。
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({
maxWidth:800, //當(dāng)調(diào)整大小時候的最大寬度
maxHeight:600 //當(dāng)調(diào)整大小時候的最大高度
});
5.pagination
分頁控件允許用戶導(dǎo)航頁面的數(shù)據(jù)。它支持頁面導(dǎo)航和頁面長度選擇的選項(xiàng)設(shè)置。用戶可以在分頁控件上添加自定義按鈕，以增強(qiáng)其功能。
分頁控件可以通過標(biāo)簽來創(chuàng)建，我們通過設(shè)置< div >標(biāo)簽的class=‘easyui-pagination’來創(chuàng)建。
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
我們更多的是通過javascript來創(chuàng)建。
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000, //總記錄數(shù)，在分頁控件創(chuàng)建時初始的值。
pageSize:10 //頁面大小
});
6.ProgressBar
進(jìn)度條提供了一個反饋顯示一個長時間運(yùn)行的操作進(jìn)展?？梢愿碌倪M(jìn)展條，讓用戶知道當(dāng)前正在執(zhí)行操作。
創(chuàng)建進(jìn)度條比較簡單，可以用下面的兩種方式來創(chuàng)建。
1.從標(biāo)簽創(chuàng)建更加簡單，添加'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è)置一個新的值到進(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)移動到元素上的時候，將會顯示一個消息提示框。提示框的內(nèi)容可以是頁面中任何一個HTML元素或者通過Ajax發(fā)送后臺請求以獲取提示框內(nèi)容。
1.通過標(biāo)簽創(chuàng)建提示框，給元素添加一個"easyui-tooltip"的類名，無需任何Javascript代碼。
<a href="javascript:void(0)" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
2.通過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)對學(xué)校課程表的安排。主要是通過拖放組件來完成。如下圖所示完成后的樣式：
首先我們先來實(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>
顯示時間表
<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>
拖動在左側(cè)的學(xué)?？颇?/p>
$('.left .item').draggable({
revert:true,
proxy:'clone'
});
放置學(xué)?？颇吭跁r間表單元格上
$('.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ǔ)組件。
通過標(biāo)簽創(chuàng)建菜單，給< div >標(biāo)簽添加一個名為'easyui-menu'的類。每個菜單項(xiàng)都通過< div >標(biāo)簽創(chuàng)建。我們可以添加'iconCls'屬性來給菜單項(xiàng)定義一個圖標(biāo)顯示到菜單項(xiàng)的左側(cè)。添加'menu-sep'類菜單項(xiàng)將會生成一個菜單分割線。如下代碼：
<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 > 元素來創(chuàng)建按鈕，而鏈接按鈕（LinkButton）則是使用 < a > 元素來創(chuàng)建的。所以實(shí)際上一個鏈接按鈕（LinkButton）就是一個顯示為按鈕樣式的 < a > 元素。
為了創(chuàng)建鏈接按鈕（LinkButton），我們要做的就是添加一個名為 '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'
});
可以通過jquery來綁定按鈕事件。
$(function(){
$('#btn').bind('click', function(){
alert('easyui');
});
});
也可以通過*disable*與*enable*來禁用或啟用按鈕。
$('#btn').linkbutton('disable'); //禁用按鈕
$('#btn').linkbutton('enable'); //啟用按鈕
3.MenuButton
菜單按鈕（Menu Button）包含一個按鈕（button）和一個菜單（menu）組件，當(dāng)點(diǎn)擊或移動鼠標(biāo)到按鈕上，將顯示一個對應(yīng)的菜單。
為了定義一個菜單按鈕（Menu Button），您應(yīng)該定義一個鏈接按鈕（Link Button）和一個菜單（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）包含一個鏈接按鈕（Link Button）和一個菜單（Menu）。當(dāng)用戶點(diǎn)擊或者鼠標(biāo)懸停在向下箭頭區(qū)域，將會顯示一個對應(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頁面的任何位置。
下面就來介紹一下如何創(chuàng)建面板：
1. 通過標(biāo)簽創(chuàng)建面板
通過標(biāo)簽創(chuàng)建更簡單。添加'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')}
}]
});
可以通過調(diào)用'move'方法移動面板到新的位置。
$('#p').panel('move',{
left:100,
top:100
});
2.tabs
選項(xiàng)卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項(xiàng)卡面板都有頭標(biāo)題和一些小的按鈕工具菜單，包括關(guān)閉按鈕和其他自定義按鈕。
我們可以通過以下方法來創(chuàng)建tabs
1. 通過標(biāo)簽創(chuàng)建選項(xiàng)卡
通過標(biāo)簽可以更容易的創(chuàng)建選項(xiàng)卡，我們不需要寫任何Javascript代碼。只需要給< div >標(biāo)簽添加一個類'easyui-tabs'。每個選項(xiàng)卡面板都通過子< 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. 通過Javascript創(chuàng)建選項(xiàng)卡
下面的代碼演示如何使用Javascript創(chuàng)建選項(xiàng)卡，當(dāng)該選項(xiàng)卡被選擇時將會觸發(fā)'onSelect'事件。
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
添加新的選項(xiàng)卡面板
以下代碼是添加一個新的選項(xiàng)卡，并添加一個菜單圖標(biāo)。
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
獲取選擇的選項(xiàng)卡
我們可以通過以下方法獲取選項(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é)請看官網(wǎng)這里。
3.Accordion
折疊面板（Accordion）包含一系列的面板（panel）。 所有面板（panel）的頭部（header）都是可見的，但是一次僅僅顯示一個面板（panel）的 body 內(nèi)容。 當(dāng)用戶點(diǎn)擊面板（panel）的頭部（header）時，該面板（panel）的 body 內(nèi)容將可見，同時其他面板（panel）的 body 內(nèi)容將隱藏不可見。
通過標(biāo)簽創(chuàng)建折疊面板，給< div >標(biāo)簽添加一個名為'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é)請看這里。
3.邊框布局
邊框布局（border layout）提供五個區(qū)域：east、west、north、south、center。以下是一些通常用法：
north 區(qū)域可以用來顯示網(wǎng)站的標(biāo)語。
south 區(qū)域可以用來顯示版權(quán)以及一些說明。
west 區(qū)域可以用來顯示導(dǎo)航菜單。
east 區(qū)域可以用來顯示一些推廣的項(xiàng)目。
center 區(qū)域可以用來顯示主要的內(nèi)容。
1. 通過標(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. 使用完整頁面創(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é)請看這里。
四.表單
1.ValidateBox
validatebox(驗(yàn)證框)的設(shè)計目的是為了驗(yàn)證輸入的表單字段是否有效。如果用戶輸入了無效的值，它將會更改輸入框的背景顏色，并且顯示警告圖標(biāo)和提示信息。
通過標(biāo)簽創(chuàng)建驗(yàn)證框?！?lt; 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)證類型屬性來定義的，這些規(guī)則已經(jīng)實(shí)現(xiàn)：
email：匹配E-Mail的正則表達(dá)式規(guī)則。
url：匹配URL的正則表達(dá)式規(guī)則。
length[0,100]：允許在x到x之間個字符。
remote['http:／／.../action.do','paramName']：發(fā)送ajax請求需要驗(yàn)證的值，當(dāng)成功時返回true。
自定義驗(yàn)證規(guī)則，需要重寫$.fn.validatebox.defaults.rules中定義的驗(yàn)證器函數(shù)和無效消息。例如，定義一個最小長度(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)在就可以在輸入框中限制最小長度為5的自定義最小長度驗(yàn)證了：
<input class="easyui-validatebox" data-options="validType:'minLength[5]'">
關(guān)于validatebox的屬性與方法還有很多，有興趣的同學(xué)請看這里。
2.ComboBox
下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當(dāng)前列表中的值。
下面我們就來介紹一下如何創(chuàng)建下拉列表框：
1.通過< select >元素創(chuàng)建一個預(yù)定義結(jié)構(gòu)的下拉列表框。我們要給該元素添加一個“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.通過< input >標(biāo)簽創(chuàng)建下拉列表框。我們要給該元素添加一個“easyui-combobox”的類。**
<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'" />
3.通過javascript創(chuàng)建下拉列表框。
<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
我們可以通過setValue設(shè)置組件的值，可以通過setText設(shè)置輸入的文本，可以通過getValue與getText獲取組件的值與輸入的文本。
$('#cc').combobox('setValue',12); //設(shè)置值
$('#cc').combobox('getText',''); // 獲取輸入文本
關(guān)于combobox的屬性與方法還有很多,有興趣的同學(xué)請看這里。
3.Combo
自定義下拉框顯示一個可編輯的文本框和下拉面板在html頁面。
自定義下拉框使用Javascript創(chuàng)建一個< select >或< input >元素。
<input id="cc" value="001">
$('#cc').combo({
required:true,
multiple:true
});
我們可以通過setValue設(shè)置組件的值，可以通過setText設(shè)置輸入的文本，可以通過getValue與getText獲取組件的值與輸入的文本。
$('#cc').combo('setValue',12); //設(shè)置值
$('#cc').combo('getText',''); // 獲取輸入文本
3.ComboTree
樹形下拉框結(jié)合選擇控件和下拉樹控件。它與combobox(下拉列表框)類似，但是將下拉列表框的列表替換成了樹形控件。該控件支持樹狀態(tài)復(fù)選框，方便多選操作。
有兩種方法可以創(chuàng)建下拉樹控件。
1.使用標(biāo)簽創(chuàng)建樹形下拉框。要為該元素添加easyui-combotree的類。
<select id="cc" class="easyui-combotree" style="width:200px;"
data-options="url:'get_data.php',required:true"></select>
2.使用Javascript創(chuàng)建樹形下拉框。
<input id="cc" value="01">
$('#cc').combotree({
url: 'get_data.php',
required: true
});
這其中的url為遠(yuǎn)程數(shù)據(jù)的鏈接。
我們可以通過loadData方法來初始化樹形下拉框:
$('#cc').combotree('loadData', [{
id: 1,
text: 'Languages',
children: [{
id: 11,
text: 'Java'
},{
id: 12,
text: 'C++'
}]
}]);
關(guān)于comboTree的屬性與方法還有很多，有興趣的同學(xué)請看這里。
4.DateBox
日期輸入框結(jié)合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉(zhuǎn)變?yōu)橐粋€有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。
有兩種方式可以創(chuàng)建日期輸入框：
1.使用標(biāo)簽創(chuàng)建日期輸入框。我們要為input標(biāo)簽添加一個“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
});
我們可以通過"setValue"方法來設(shè)置datebox的值，通過“getValue”獲取datebox的值。
$('#dd').datebox('setValue','01/01/2016');
$('#dd').datebox('getValue','');
5.DateTimeBox
和日期輸入框類似，日期時間輸入框允許用戶選擇日期和指定的時間并按照指定的輸出格式顯示。相比日期輸入框，它在下拉面板中添加了一個時間微調(diào)器。
datetimebox的創(chuàng)建方法與datebox類似，也有兩種方法，
1.使用標(biāo)簽創(chuàng)建日期時間輸入框。我們要為input標(biāo)簽添加一個“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)建日期時間輸入框。
<input id="dt" type="text" name="birthday"></input>
$('#dt').datetimebox({
value: '3/4/2010 2:3',
required: true,
showSeconds: false
});
我們可以通過"setValue"方法來設(shè)置datetimebox的值，通過“getValue”獲取datetimebox的值。
$('#dt').datetimebox('setValue','01/01/2016 12:00:00');
$('#dt').datetimebox('getValue','');
6.Calendar
日歷控件顯示一個月的日歷，允許用戶選擇日期和移動到下一個或上一個月。默認(rèn)情況下，一周的第一天是周日。它可以通過設(shè)置'firstDay'屬性的值來更改設(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
時間微調(diào)組件允許用戶點(diǎn)擊組件右側(cè)的小按鈕來增加或減少時間。
通過input標(biāo)簽來創(chuàng)建，需要我們將它的class屬性值設(shè)置為easyui-timespinner。
<input id="ss" class="easyui-timespinner" style="width:80px;"
required="required" data-options="min:'08:30',showSeconds:true" />
還可以通過Javascript創(chuàng)建時間微調(diào)組件。
<input id="ss" style="width:80px;">
$('#ss').timespinner({
min: '08:30',
required: true,
showSeconds: true
});
設(shè)置時間微調(diào)組件的值。 代碼如下：
$('#ss').timespinner('setValue', '17:45'); // 設(shè)置時間微調(diào)組件的值
var v=$('#ss').timespinner('getValue'); // 獲取時間微調(diào)組件的值
alert(v);
8.Slider
滑動條允許用戶從一個有限的范圍內(nèi)選擇一個數(shù)值。當(dāng)滑塊控件沿著軌道移動的時候，將會顯示一個提示來表示當(dāng)前值。用戶可以通過設(shè)置其屬性自定義滑塊。
我們使用< input >標(biāo)簽來創(chuà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)建滑動條，但是'value'屬性是無效的。
<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>
還可以使用javascript來創(chuàng)建。
<div id="ss" style="height:200px"></div>
$('#ss').slider({
mode: 'v',
tipFormatter: function(value){
return value + '%';
}
});
我們可以通過"setValue"方法來設(shè)置slider的值，通過“getValue”獲取slider的值。
$('#ss').slider('setValue',25);
$('#ss').slider('getValue','');
還有一個常用的onchange事件，在值發(fā)生變化時觸發(fā)。
$('#ss').slider({
mode: 'v', // 設(shè)置水平h 還是垂直v
tipFormatter: function(value){ //格式化滑動條
return value + '%';
},
onChange: function(value){
alert(value);
}
});
另外還可以通過max與min屬性設(shè)置滑動條的最大與最小值。
