成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

本文主要內容是介紹EasyUI的一些常用組件的使用，都是一些非常基礎的知識，適合入門者學習，主要包括Base（基礎）、Layout(布局）、菜單和按鈕、表單、窗口、表格和樹等的使用。要求完全掌握這些內容，學會查閱文檔，了解開發基本思想。如果想進一步深入學習，可以直接去官網進行學習，查閱文檔等http://www.jeasyui.com/。

一、簡介

EasyUI是一種第三方組織開發的，開源的，功能強大的，基于jquery的插件庫。 主要可以用于web的后臺前端。jQuery EasyUI 提供易于使用的組件，它使 Web 開發人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。 這里介紹的都是一些基本組件，項目中需要將其裝配起來，方可構建完整的web頁面，EasyUI只是眾多前端WEB組件之一。

作用：快速基于現成的組件創建自己的web頁面。組件：指已經有第三方寫好的，直接可以使用的功能界面，例如：form,layout,tree等。

二、開發步驟

1、先去官網下載相應的插件：
2、在myeclipse中新建一個web工程

3、在WebRoot目錄下創建js和themes目錄，導入官方文件

4、新建一個helloword.html的網頁，并引入下列文件：

<link rel="stylesheet"  type="text/css" /> 
<link rel="stylesheet"  type="text/css" /> 
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/easyui-lang-zh_CN.js"></script>

文件引入的順序不要錯，那么到目前為止，開發的準備工作就已經完成了。

三、Base組件的使用

3.1 Pagination（分頁）

使用$.fn.pagination.defaults重寫默認值對象

.分頁組件是一個比較常用的組件之一，我們可以有兩種使用方式，一種是直接在標簽上面添加相應的屬性，另一種是通過js進行操作。

靜態方式創建如下：

<div 
id="pagination" 
class="easyui-pagination" 
data-options="total:2000,pageSize:10" 
style="background:#efefef;border:1px solid #ccc;" 
> 
</div>

動態方式：

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 
<script> 
$("#pp").pagination({ 
"total":100, //表示總記錄數 
"pageSize":10, //每頁顯示多少條記錄 
"pageNumber":2, //當前頁號 
"pageList":[10,20], // 
"buttons":[ 
{ 
iconCls:'icon-add', 
handler:function(){alert('add')} 
},'-',{ 
iconCls:'icon-save', 
handler:function(){alert('save') 
} 
}], 
"layout":['list','sep','first','prev','manual','next','last','links'], 
"showPageList":false, 
}); 
$("#pp").pagination({ 
"onSelectPage":function(pageNumber,b){ 
alert(pageNumber); 
alert(b) 
} 
})

我這里是添加了一些事件和方法的，可以依據實際情況進行增加或刪除或修改里面的小的部分組件。大大方便了我們的開發。

3.2 ProgressBar（進度條）

使用$.fn.progressbar.defaults重寫默認值對象。

使用HTML標簽或程序創建進度條組件。從標簽創建更加簡單，添加'easyui-progressbar'類ID到<div/>標簽。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

使用Javascript創建進度條。

<div id="p" style="width:400px;" ></div><br /> 
<input id="startID" type="button" value="開始" style="width:100px;height:30px" /> 
<script> 
$("#p").progressbar({ 
width:1000, 
height:40, 
value:0 
}); 
//獲取1-9之間的隨機數 
function getNum(){ 
return Math.floor(Math.random()*9)+1; 
} 
/* for(var i=0;i<20;i++){ 
var num=getNum(); 
document.write(num+"<br />"); 
} */ 
var timeID=null; 
function update(){ 
//獲取隨機值 
var num=getNum(); 
//獲取進度條當前值 
var value=$("#p").progressbar("getValue"); 
if(value+num>100){ 
//設置進度條當前值為100，且停止運行 
$("#p").progressbar("setValue",100); 
window.clearInterval(timeID); 
$("#startID").removeAttr("disabled"); 
}else{ 
$("#p").progressbar("setValue",(value+num)) 
} 
} 
$("#startID").click(function(){ 
timeID=window.setInterval("update()",500); 
//按鈕失效 
$(this).attr("disabled","disabled"); 
}); 
</script>

四、Layout組件的使用

4.1 layout的使用

布局是最常用的組件了，官方提供的是擁有5個布局方向的：北、南、東、西、中.

基本的使用方式如下：

<div 
id="layoutID" 
class="easyui-layout" 
data-options="fit:true" 
style="width:800px;height:500px"> 
< 上 --> 
<div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'" 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:200px;"></div> 
< 中 --> 
<div data-options="region:'center',title:'center title' " style="padding:5px;background:#eee;"></div> 
</div>

我們可以為其添加js的屬性：

<script> 
$(function(){ 
$('#layoutID').layout('collapse','north'); 
//休息3秒 
window.setTimeout(function(){ 
//將南邊折疊 
$('#layoutID').layout("collapse","south"); 
//將北邊展開 
$('#layoutID').layout('expand','north'); 
//將南邊展開 
window.setTimeout(function(){ 
$("#layoutID").layout("expand","south"); 
},3000); 
},3000); 
}); 
</script>

對于布局來說，當然也還是可以進行嵌套處理的，我們可以摘除掉我們不需要的部分，然后將需要的部分進行再次組裝。

<div id="layoutID" class="easyui-layout" data-options="fit:true" > 
<div data-options="region:'north',border:false" style="height:100px"></div> 
<div data-options="region:'center'"> 
<div class="easyui-layout" data-options="fit:true" > 
<div data-options="region:'west',border:false" style="width:180px"></div> 
<div data-options="region:'center'"> 
<div class="easyui-layout" data-options="fit:true"> 
<div data-options="region:'north'" style="height:100px"></div> 
<div data-options="region:'south'" ></div> 
</div> 
</div> 
</div> 
</div> 
</div>

效果如下：

4.2 面板的使用

第一種方式：通過標簽直接創建。

<div 
id="panel" 
class="easyui-panel" 
title="我的第一個面板" 
data-options="iconCls:'icon-save',collapsible:'true',minimizable:true,maximizable:true" 
style="width:800px;height:300px;padding:15px" 
> 
easyui入門 
</div>

第二種方式：

<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
<script> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:function(){alert('new')} 
},{ 
iconCls:'icon-save', 
handler:function(){alert('save')} 
}] 
}); 
<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')} 
}] 
}); 
</script>

4.3 Accordion（分類）

使用$.fn.accordion.defaults重寫默認值對象。

分類空間允許用戶使用多面板，但在同一時間只會顯示一個。每個面板都內建支持展開和折疊功能。點擊一個面板的標題將會展開或折疊面板主體。面板內容可以通過指定的'href'屬性使用ajax方式讀取面板內容。用戶可以定義一個被默認選中的面板，如果未指定，那么第一個面板就是默認的。

<div 
id="adID" 
class="easyui-accordion" 
data-options="fit:false,border:true,multiple:false,selected:-1" 
style="width:300px;height:200px;" 
> 
<div title="北京" data-options="iconCls:'icon-save'" 
style="overflow:auto;padding:10px;"> 
朝陽區 
</div> 
<div title="湖南" data-options="iconCls:'icon-reload'" 
style="padding:10px;">衡陽市 
</div> 
<div title="北京" data-options="iconCls:'icon-save'" 
style="overflow:auto;padding:10px;"> 
<p>朝陽區</p> 
</div> 
<div title="湖南" data-options="iconCls:'icon-reload'" 
style="padding:10px;"> 
<p>衡陽市</p> 
<p>長沙市</p> 
</div> 
</div> 
<script> 
$(function(){ 
//增加一個面版 
$("#adID").accordion("add",{ 
"title":"廣東省", 
"iconCls":"icon-add", 
"content":"廣州", 
"selected":false 
}); 
window.setTimeout(function(){ 
$("#adID").accordion("remove","北京"); 
$("#adID").accordion("unselect",0); 
},3000); 
}); 
</script>

4.4 Tabs（選項卡）

使用$.fn.tabs.defaults重寫默認值對象。

選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項卡面板都有頭標題和一些小的按鈕工具菜單，包括關閉按鈕和其他自定義按鈕。

<div 
id="tt" 
class="easyui-tabs" 
data-options="plain:false,fit:false,border:true,tools:[ 
{ 
iconCls:'icon-add', 
handler:function(){ 
alert('添加') 
} 
}, 
{ 
iconCls:'icon-sava', 
handler:function(){ 
alert('保存') 
} 
} 
],toolPosition:'right',tabPosition:'top',selected:2" 
style="width:500px;height:250px;" 
> 
<div title="Tab1" style="padding:20px;display:none;">tab1</div> 
<div title="Tab2" data-options="closable:true" 
style="overflow:auto;padding:20px;display:none;">tab2</div> 
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" 
style="padding:20px;display:none;">tab3</div> 
</div>

五、Menu 和Button組件的使用

LinkButton（按鈕）

使用$.fn.linkbutton.defaults重寫默認值對象。

按鈕組件使用超鏈接按鈕創建。它使用一個普通的<a>標簽進行展示。它可以同時顯示一個圖標和文本,或只有圖標或文字。按鈕的寬度可以動態和折疊/展開以適應它的文本標簽。

<a id="btn_add"  class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'sex',toggle:true,iconAlign:'right'">增加部門</a><br /> 
<a id="btn_find"  class="easyui-linkbutton" data-options="iconCls:'icon-search',group:'sex',toggle:true"">查找部門</a><br /> 
<a id="btn_update"  class="easyui-linkbutton" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部門</a><br /> 
<a id="btn_delete"  class="easyui-linkbutton" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">刪除部門</a><br /> 
<script> 
$("a").click(function(){ 
//獲取單擊的按鈕的標題 
var title=$(this).text(); 
//去空格 
title=$.trim(title); 
alert(title); 
}); 
</script>

六、Form組件的使用

6.1 ValidateBox（驗證框）

使用$.fn.validatebox.defaults重寫默認值對象。

validatebox(驗證框)的設計目的是為了驗證輸入的表單字段是否有效。如果用戶輸入了無效的值，它將會更改輸入框的背景顏色，并且顯示警告圖標和提示信息。該驗證框可以結合form(表單)插件并防止表單重復提交。

姓名:<input id="nameID" /><br /> 
郵箱:<input id="emailID" /><br /> 
密碼:<input id="pwdID" /> 
<script> 
$("#nameID").validatebox({ 
required:true, 
//validType:'length[1,6]' 
validType:['length[1,6]','chinese'], 
delay:200, 
tipPosition:'left' 
}); 
//自定義規則，驗證是否為漢字 
$.extend($.fn.validatebox.defaults.rules,{ 
chinese:{ 
//validator表示用戶在文本框中輸入的內容 
validator:function(value){ 
var reg=/^[u4e00-u9fa5]/; 
if(reg.test(value)){ 
return true; 
} 
}, 
//如果不符合中文規則， 
message:'姓名必須是中文' 
} 
}); 
$("#emailID").validatebox({ 
required:true, 
validType: ['length[1,30]','email'] 
}); 
$("#pwdID").validatebox({ 
required:true, 
validType: ['length[6,6]','pwdnum'] 
}); 
//自定義規則，驗證是否為密碼 
$.extend($.fn.validatebox.defaults.rules,{ 
pwdnum:{ 
//validator表示用戶在文本框中輸入的內容 
validator:function(value){ 
var reg=/^[0-9]/; 
if(reg.test(value)){ 
return true; 
} 
}, 
//如果不符合中文規則， 
message:'密碼必須為數字' 
} 
}); 
</script>

對于表單驗證，我們可以對其進行自定義規則。這個時候如果加上正則驗證，就完全可以寫出一個非常好的驗證功能的了。在上面的這個屬性中，還可以對提示框的位置進行改變，可以使用的屬性是left和right。下面圖片中顯示的就是一個提示框在left的情況，一般情況下使用默認的right就可以了。

6.2 ComboBox（下拉列表框）

擴展自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫默認值對象。

下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當前列表中的值。

靜態方法創建：

<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>

動態方法創建：

<input id="cityID" name="city" value="1"/> 
<script> 
$("#cityID").combobox({ 
url:"json/city.json", 
valueField:"id", 
textField:"name" 
}); 
$(function(){ 
$("#cityID").comcobox("setValue","長沙"); 
}); 
</script>

6.3 DateBox（日期輸入框）

擴展自$.fn.combo.defaults。使用$.fn.datebox.defaults重寫默認值對象。

日期輸入框結合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉變為一個有效的日期然后填充到文本框中。選定的日期也可以被格式化為預定格式。

日期：

<input id="dd" type="text"></input> 
<script> 
$('#dd').datebox({ 
required:true 
}); 
$("#dd").datebox({ 
onSelect:function(mydate){ 
var year=mydate.getFullYear(); 
var month=mydate.getMonth()+1; 
var date=mydate.getDate(); 
alert(year+"年"+month+"月"+date+"日"); 
} 
}); 
</script>

6.4 Slider（滑動條）

使用$.fn.slider.defaults重寫默認值對象。

滑動條允許用戶從一個有限的范圍內選擇一個數值。當滑塊控件沿著軌道移動的時候，將會顯示一個提示來表示當前值。用戶可以通過設置其屬性自定義滑塊。

學生成績:<span id="tip" ></span> 
<hr /> 
<div id="ss" style="height:400px;width:400px"> 
</div> 
<script> 
$("#ss").slider({ 
mode:"h", 
min:0, 
max:100, 
rule:[0,'|',25,'|',50,'|',75,'|',100], 
showTip:true, 
value:60 
}); 
$("#ss").slider({ 
onChange:function(newValue){ 
if(newValue==60){ 
$("#tip").text("合格").css("color","yellow"); 
}else if(newValue==70){ 
$("#tip").text("中等").css("color","pink"); 
}else if(newValue==80){ 
$("#tip").text("良好").css("color","blue"); 
}else if(newValue==90){ 
$("#tip").text("優秀").css("color","green"); 
} 
} 
}) 
</script>

6.5 NumberSpinner（數字微調）

數字微調控件的創建是基于微調控件和數值輸入框控件的。他可以轉換輸入的值，比如：數值、百分比、貨幣等。它也允許使用上/下微調按鈕調整到用戶的期望值。

商品數量：

<input id="ss" style="width:100px"> <br /> 
你一共買了<span id="num">1</span>件商品 
<script> 
$('#ss').numberspinner({ 
value:1, 
min:1, 
max:100 
}); 
$('#ss').numberspinner({ 
onSpinUp:function(){ 
var value=$("#ss").numberspinner("getValue"); 
//將當前值設置到span標簽 
$("#num").text(value).css("color","red"); 
}, 
onSpinDown:function(){ 
var value=$("#ss").numberspinner("getValue"); 
//將當前值設置到span標簽 
$("#num").text(value).css("color","red"); 
} 
}); 
//添加鍵盤事件 
$('#ss').keyup(function(event){ 
//獲取按鍵的unicode編碼 
var myevent=event; 
var code=myevent.keyCode; 
if(code==13){ 
var value=$(this).val(); 
//將當前值設置到span標簽 
$("#num").text(value).css("color","red"); 
} 
}); 
</script>

七、窗口組件的使用

7.1 Window（窗口）

擴展自$.fn.panel.defaults。使用$.fn.window.defaults重寫默認值對象。

窗口控件是一個浮動和可拖拽的面板可以用作應用程序窗口。默認情況下,窗口可以移動,調整大小和關閉。它的內容也可以被定義為靜態html或要么通過ajax動態加載。

靜態方法創建：

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" 
data-options="iconCls:'icon-save',modal:true"> 
Window Content 
</div>

動態創建：

<input type="button" value="打開窗口1" id="open1"/> 
<input type="button" value="打開窗口2" id="open2"/> 
<div id="win1"></div> 
<div id="win2"></div> 
<script> 
$("#open1").click(function(){ 
$('#win1').window({ 
width:600, 
height:400, 
modal:false , 
minimizable :false, 
maximizable:false, 
title:"我的窗口" 
}); 
}); 
$("#open2").click(function(){ 
$('#win2').window({ 
width:600, 
height:400, 
modal:false , 
minimizable :false, 
maximizable:false, 
title:"我的窗口" 
}); 
}); 
</script>

7.2 Dialog（對話框窗口）

該對話框是一種特殊類型的窗口，它在頂部有一個工具欄，在底部有一個按鈕欄。對話框窗口右上角只有一個關閉按鈕用戶可以配置對話框的行為顯示其他工具,如collapsible,minimizable,maximizable工具等。

<input type="button" value="打開對話框" id="open1"/> 
<div id="win1"></div> 
<script> 
$("#open1").click(function(){ 
$('#win1').dialog({ 
width:400, 
height:400, 
modal:false , 
minimizable :false, 
maximizable:false, 
title:"我的對話框", 
toolbar:[ 
{ 
text:'編輯', 
iconCls:'icon-edit', 
handler:function(){alert('edit')} 
},{ 
text:'幫助', 
iconCls:'icon-help', 
handler:function(){alert('help')} 
} 
], 
buttons:[ 
{ 
text:'保存', 
handler:function(){alert("保存");} 
},{ 
text:'關閉', 
handler:function(){ 
//關閉對話框 
$("#win1").dialog("close"); 
} 
} 
], 
href:"/EasyUi/form.html" 
}); 
}); 
</script>

7.3 Messager（消息窗口）

消息窗口提供了不同的消息框風格，包含alert(警告框), confirm(確認框), prompt(提示框), progress(進度框)等。所有的消息框都是異步的。用戶可以在交互消息之后使用回調函數去處理結果或做一些自己需要處理的事情。

<input type="button" value="確認框" /><br /> 
<input type="button" value="警告框" /><br /> 
<input type="button" value="輸入框" /><br /> 
<input type="button" value="顯示框" /><br /> 
<script> 
$("input").click(function(){ 
//定位button按鈕，提供單擊事件 
var tip=$(this).val(); 
tip=$.trim(tip); 
if("警告框"==tip){ 
$.messager.alert("警告框","警告處分","waring",function(){ 
//alert("關閉"); 
}); 
} 
if("確認框"==tip){ 
$.messager.confirm("確認框","你確認要刪除么",function(value){ 
alert(value); 
}); 
} 
if("輸入框"==tip){ 
$.messager.prompt("輸入框","請輸入你的姓名",function(name){ 
alert(name); 
}); 
} 
if("顯示框"==tip){ 
$.messager.show({ 
showType: "slide", 
showSpeed: 600, 
width:300, 
height:300, 
title:"顯示框", 
timeout:5000, 
msg:'消息將在5秒后關閉。' 
} 
); 
} 
}); 
</script>

八、表格和樹組件的使用

使用$.fn.tree.defaults重寫默認值對象。

樹控件在web頁面中一個將分層數據以樹形結構進行顯示。它提供用戶展開、折疊、拖拽、編輯和異步加載等功能。

<ul id="treeID" class="easyui-tree"> 
<li> 
<span>第一章</span> 
<ul> 
<li> 
<span>第一節</span> 
<ul> 
<li> 
<span>第一條</span> 
</li> 
<li> 
<span>第二條</span> 
</li> 
</ul> 
</li> 
<li> 
<span>第二節</span> 
</li> 
</ul> 
</li> 
<li> 
<span>第二章</span> 
</li> 
</ul> 
<script type="text/javascript"> 
$(function(){ 
//收起所有的選項 
$("#treeID").tree("collapseAll"); 
}); 
</script>

我們還可以引入外部文件，使用json格式的文件來添加到這個tree中。

<ul id="treeID"></ul> 
<script type="text/javascript"> 
$("#treeID").tree({ 
url : "/EasyUi/json/pro.json" 
}); 
</script>

json格式為：

[ 
{ 
"id":1, 
"text":"廣東", 
"state":"closed", 
"children":[ 
{ 
"id":11, 
"text":"廣州" , 
"state":"closed", 
"children":[ 
{ 
"id":111, 
"text":"天河" 
}, 
{ 
"id":112, 
"text":"越秀" 
} 
] 
}, 
{ 
"id":12, 
"text":"深圳" 
} 
] 
}, 
{ 
"id":2, 
"text":"湖南" 
} 
] 

以上所述是小編給大家介紹的jQuery EasyUI基礎教程之EasyUI常用組件(推薦)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持！