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