jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
本文主要內(nèi)容是介紹EasyUI的一些常用組件的使用，都是一些非?；A(chǔ)的知識(shí)，適合入門(mén)者學(xué)習(xí)，主要包括Base（基礎(chǔ)）、Layout(布局）、菜單和按鈕、表單、窗口、表格和樹(shù)等的使用。要求完全掌握這些內(nèi)容，學(xué)會(huì)查閱文檔，了解開(kāi)發(fā)基本思想。如果想進(jìn)一步深入學(xué)習(xí)，可以直接去官網(wǎng)進(jìn)行學(xué)習(xí)，查閱文檔等http://www.jeasyui.com/。
一、簡(jiǎn)介
EasyUI是一種第三方組織開(kāi)發(fā)的，開(kāi)源的，功能強(qiáng)大的，基于jquery的插件庫(kù)。 主要可以用于web的后臺(tái)前端。jQuery EasyUI 提供易于使用的組件，它使 Web 開(kāi)發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁(yè)面。 這里介紹的都是一些基本組件，項(xiàng)目中需要將其裝配起來(lái)，方可構(gòu)建完整的web頁(yè)面，EasyUI只是眾多前端WEB組件之一。
作用：快速基于現(xiàn)成的組件創(chuàng)建自己的web頁(yè)面。組件：指已經(jīng)有第三方寫(xiě)好的，直接可以使用的功能界面，例如：form,layout,tree等。
二、開(kāi)發(fā)步驟
1、先去官網(wǎng)下載相應(yīng)的插件：
2、在myeclipse中新建一個(gè)web工程
3、在WebRoot目錄下創(chuàng)建js和themes目錄，導(dǎo)入官方文件
4、新建一個(gè)helloword.html的網(wǎng)頁(yè)，并引入下列文件：
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" /> <link rel="stylesheet" href="themes/icon.css" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
文件引入的順序不要錯(cuò)，那么到目前為止，開(kāi)發(fā)的準(zhǔn)備工作就已經(jīng)完成了。
三、Base組件的使用
3.1 Pagination（分頁(yè)）
使用$.fn.pagination.defaults重寫(xiě)默認(rèn)值對(duì)象
.分頁(yè)組件是一個(gè)比較常用的組件之一，我們可以有兩種使用方式，一種是直接在標(biāo)簽上面添加相應(yīng)的屬性，另一種是通過(guò)js進(jìn)行操作。
靜態(tài)方式創(chuàng)建如下：
<div id="pagination" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;" > </div>
動(dòng)態(tài)方式：
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
<script>
$("#pp").pagination({
"total":100, //表示總記錄數(shù)
"pageSize":10, //每頁(yè)顯示多少條記錄
"pageNumber":2, //當(dāng)前頁(yè)號(hào)
"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)
}
})
我這里是添加了一些事件和方法的，可以依據(jù)實(shí)際情況進(jìn)行增加或刪除或修改里面的小的部分組件。大大方便了我們的開(kāi)發(fā)。
3.2 ProgressBar（進(jìn)度條）
使用$.fn.progressbar.defaults重寫(xiě)默認(rèn)值對(duì)象。
使用HTML標(biāo)簽或程序創(chuàng)建進(jìn)度條組件。從標(biāo)簽創(chuàng)建更加簡(jiǎn)單，添加'easyui-progressbar'類ID到<div/>標(biāo)簽。
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
使用Javascript創(chuàng)建進(jìn)度條。
<div id="p" style="width:400px;" ></div><br />
<input id="startID" type="button" value="開(kāi)始" style="width:100px;height:30px" />
<script>
$("#p").progressbar({
width:1000,
height:40,
value:0
});
//獲取1-9之間的隨機(jī)數(shù)
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(){
//獲取隨機(jī)值
var num=getNum();
//獲取進(jìn)度條當(dāng)前值
var value=$("#p").progressbar("getValue");
if(value+num>100){
//設(shè)置進(jìn)度條當(dāng)前值為100，且停止運(yùn)行
$("#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個(gè)布局方向的：北、南、東、西、中.
基本的使用方式如下：
<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");
//將北邊展開(kāi)
$('#layoutID').layout('expand','north');
//將南邊展開(kāi)
window.setTimeout(function(){
$("#layoutID").layout("expand","south");
},3000);
},3000);
});
</script>
對(duì)于布局來(lái)說(shuō)，當(dāng)然也還是可以進(jìn)行嵌套處理的，我們可以摘除掉我們不需要的部分，然后將需要的部分進(jìn)行再次組裝。
<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 面板的使用
第一種方式：通過(guò)標(biāo)簽直接創(chuàng)建。
<div id="panel" class="easyui-panel" title="我的第一個(gè)面板" data-options="iconCls:'icon-save',collapsible:'true',minimizable:true,maximizable:true" style="width:800px;height:300px;padding:15px" > easyui入門(mén) </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重寫(xiě)默認(rèn)值對(duì)象。
分類空間允許用戶使用多面板，但在同一時(shí)間只會(huì)顯示一個(gè)。每個(gè)面板都內(nèi)建支持展開(kāi)和折疊功能。點(diǎn)擊一個(gè)面板的標(biāo)題將會(huì)展開(kāi)或折疊面板主體。面板內(nèi)容可以通過(guò)指定的'href'屬性使用ajax方式讀取面板內(nèi)容。用戶可以定義一個(gè)被默認(rèn)選中的面板，如果未指定，那么第一個(gè)面板就是默認(rèn)的。
<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;">
朝陽(yáng)區(qū)
</div>
<div title="湖南" data-options="iconCls:'icon-reload'"
style="padding:10px;">衡陽(yáng)市
</div>
<div title="北京" data-options="iconCls:'icon-save'"
style="overflow:auto;padding:10px;">
<p>朝陽(yáng)區(qū)</p>
</div>
<div title="湖南" data-options="iconCls:'icon-reload'"
style="padding:10px;">
<p>衡陽(yáng)市</p>
<p>長(zhǎng)沙市</p>
</div>
</div>
<script>
$(function(){
//增加一個(gè)面版
$("#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（選項(xiàng)卡）
使用$.fn.tabs.defaults重寫(xiě)默認(rèn)值對(duì)象。
選項(xiàng)卡顯示一批面板。但在同一個(gè)時(shí)間只會(huì)顯示一個(gè)面板。每個(gè)選項(xiàng)卡面板都有頭標(biāo)題和一些小的按鈕工具菜單，包括關(guān)閉按鈕和其他自定義按鈕。
<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重寫(xiě)默認(rèn)值對(duì)象。
按鈕組件使用超鏈接按鈕創(chuàng)建。它使用一個(gè)普通的<a>標(biāo)簽進(jìn)行展示。它可以同時(shí)顯示一個(gè)圖標(biāo)和文本,或只有圖標(biāo)或文字。按鈕的寬度可以動(dòng)態(tài)和折疊/展開(kāi)以適應(yīng)它的文本標(biāo)簽。
<a id="btn_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'sex',toggle:true,iconAlign:'right'">增加部門(mén)</a><br />
<a id="btn_find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',group:'sex',toggle:true"">查找部門(mén)</a><br />
<a id="btn_update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部門(mén)</a><br />
<a id="btn_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">刪除部門(mén)</a><br />
<script>
$("a").click(function(){
//獲取單擊的按鈕的標(biāo)題
var title=$(this).text();
//去空格
title=$.trim(title);
alert(title);
});
</script>
六、Form組件的使用
6.1 ValidateBox（驗(yàn)證框）
使用$.fn.validatebox.defaults重寫(xiě)默認(rèn)值對(duì)象。
validatebox(驗(yàn)證框)的設(shè)計(jì)目的是為了驗(yàn)證輸入的表單字段是否有效。如果用戶輸入了無(wú)效的值，它將會(huì)更改輸入框的背景顏色，并且顯示警告圖標(biāo)和提示信息。該驗(yàn)證框可以結(jié)合form(表單)插件并防止表單重復(fù)提交。
姓名:<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'
});
//自定義規(guī)則，驗(yàn)證是否為漢字
$.extend($.fn.validatebox.defaults.rules,{
chinese:{
//validator表示用戶在文本框中輸入的內(nèi)容
validator:function(value){
var reg=/^[\u4e00-\u9fa5]/;
if(reg.test(value)){
return true;
}
},
//如果不符合中文規(guī)則，
message:'姓名必須是中文'
}
});
$("#emailID").validatebox({
required:true,
validType: ['length[1,30]','email']
});
$("#pwdID").validatebox({
required:true,
validType: ['length[6,6]','pwdnum']
});
//自定義規(guī)則，驗(yàn)證是否為密碼
$.extend($.fn.validatebox.defaults.rules,{
pwdnum:{
//validator表示用戶在文本框中輸入的內(nèi)容
validator:function(value){
var reg=/^[0-9]/;
if(reg.test(value)){
return true;
}
},
//如果不符合中文規(guī)則，
message:'密碼必須為數(shù)字'
}
});
</script>
對(duì)于表單驗(yàn)證，我們可以對(duì)其進(jìn)行自定義規(guī)則。這個(gè)時(shí)候如果加上正則驗(yàn)證，就完全可以寫(xiě)出一個(gè)非常好的驗(yàn)證功能的了。在上面的這個(gè)屬性中，還可以對(duì)提示框的位置進(jìn)行改變，可以使用的屬性是left和right。下面圖片中顯示的就是一個(gè)提示框在left的情況，一般情況下使用默認(rèn)的right就可以了。
6.2 ComboBox（下拉列表框）
擴(kuò)展自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫(xiě)默認(rèn)值對(duì)象。
下拉列表框顯示一個(gè)可編輯文本框和下拉式列表，用戶可以選擇一個(gè)值或多個(gè)值。用戶可以直接輸入文本到列表頂部或選擇一個(gè)或多個(gè)當(dāng)前列表中的值。
靜態(tài)方法創(chuàng)建：
<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>
動(dòng)態(tài)方法創(chuàng)建：
<input id="cityID" name="city" value="1"/>
<script>
$("#cityID").combobox({
url:"json/city.json",
valueField:"id",
textField:"name"
});
$(function(){
$("#cityID").comcobox("setValue","長(zhǎng)沙");
});
</script>
6.3 DateBox（日期輸入框）
擴(kuò)展自$.fn.combo.defaults。使用$.fn.datebox.defaults重寫(xiě)默認(rèn)值對(duì)象。
日期輸入框結(jié)合了一個(gè)可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會(huì)自動(dòng)轉(zhuǎn)變?yōu)橐粋€(gè)有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。
日期：
<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（滑動(dòng)條）
使用$.fn.slider.defaults重寫(xiě)默認(rèn)值對(duì)象。
滑動(dòng)條允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)滑塊控件沿著軌道移動(dòng)的時(shí)候，將會(huì)顯示一個(gè)提示來(lái)表示當(dāng)前值。用戶可以通過(guò)設(shè)置其屬性自定義滑塊。
學(xué)生成績(jī):<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("優(yōu)秀").css("color","green");
}
}
})
</script>
6.5 NumberSpinner（數(shù)字微調(diào)）
數(shù)字微調(diào)控件的創(chuàng)建是基于微調(diào)控件和數(shù)值輸入框控件的。他可以轉(zhuǎn)換輸入的值，比如：數(shù)值、百分比、貨幣等。它也允許使用上/下微調(diào)按鈕調(diào)整到用戶的期望值。
商品數(shù)量：
<input id="ss" style="width:100px"> <br />
你一共買(mǎi)了<span id="num">1</span>件商品
<script>
$('#ss').numberspinner({
value:1,
min:1,
max:100
});
$('#ss').numberspinner({
onSpinUp:function(){
var value=$("#ss").numberspinner("getValue");
//將當(dāng)前值設(shè)置到span標(biāo)簽
$("#num").text(value).css("color","red");
},
onSpinDown:function(){
var value=$("#ss").numberspinner("getValue");
//將當(dāng)前值設(shè)置到span標(biāo)簽
$("#num").text(value).css("color","red");
}
});
//添加鍵盤(pán)事件
$('#ss').keyup(function(event){
//獲取按鍵的unicode編碼
var myevent=event;
var code=myevent.keyCode;
if(code==13){
var value=$(this).val();
//將當(dāng)前值設(shè)置到span標(biāo)簽
$("#num").text(value).css("color","red");
}
});
</script>
七、窗口組件的使用
7.1 Window（窗口）
擴(kuò)展自$.fn.panel.defaults。使用$.fn.window.defaults重寫(xiě)默認(rèn)值對(duì)象。
窗口控件是一個(gè)浮動(dòng)和可拖拽的面板可以用作應(yīng)用程序窗口。默認(rèn)情況下,窗口可以移動(dòng),調(diào)整大小和關(guān)閉。它的內(nèi)容也可以被定義為靜態(tài)html或要么通過(guò)ajax動(dòng)態(tài)加載。
靜態(tài)方法創(chuàng)建：
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> Window Content </div>
動(dòng)態(tài)創(chuàng)建：
<input type="button" value="打開(kāi)窗口1" id="open1"/>
<input type="button" value="打開(kāi)窗口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（對(duì)話框窗口）
該對(duì)話框是一種特殊類型的窗口，它在頂部有一個(gè)工具欄，在底部有一個(gè)按鈕欄。對(duì)話框窗口右上角只有一個(gè)關(guān)閉按鈕用戶可以配置對(duì)話框的行為顯示其他工具,如collapsible,minimizable,maximizable工具等。
<input type="button" value="打開(kāi)對(duì)話框" id="open1"/>
<div id="win1"></div>
<script>
$("#open1").click(function(){
$('#win1').dialog({
width:400,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"我的對(duì)話框",
toolbar:[
{
text:'編輯',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'幫助',
iconCls:'icon-help',
handler:function(){alert('help')}
}
],
buttons:[
{
text:'保存',
handler:function(){alert("保存");}
},{
text:'關(guān)閉',
handler:function(){
//關(guān)閉對(duì)話框
$("#win1").dialog("close");
}
}
],
href:"/EasyUi/form.html"
});
});
</script>
7.3 Messager（消息窗口）
消息窗口提供了不同的消息框風(fēng)格，包含alert(警告框), confirm(確認(rèn)框), prompt(提示框), progress(進(jìn)度框)等。所有的消息框都是異步的。用戶可以在交互消息之后使用回調(diào)函數(shù)去處理結(jié)果或做一些自己需要處理的事情。
<input type="button" value="確認(rèn)框" /><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("關(guān)閉");
});
}
if("確認(rèn)框"==tip){
$.messager.confirm("確認(rèn)框","你確認(rèn)要?jiǎng)h除么",function(value){
alert(value);
});
}
if("輸入框"==tip){
$.messager.prompt("輸入框","請(qǐng)輸入你的姓名",function(name){
alert(name);
});
}
if("顯示框"==tip){
$.messager.show({
showType: "slide",
showSpeed: 600,
width:300,
height:300,
title:"顯示框",
timeout:5000,
msg:'消息將在5秒后關(guān)閉。'
}
);
}
});
</script>
八、表格和樹(shù)組件的使用
使用$.fn.tree.defaults重寫(xiě)默認(rèn)值對(duì)象。
樹(shù)控件在web頁(yè)面中一個(gè)將分層數(shù)據(jù)以樹(shù)形結(jié)構(gòu)進(jìn)行顯示。它提供用戶展開(kāi)、折疊、拖拽、編輯和異步加載等功能。
<ul id="treeID" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一節(jié)</span>
<ul>
<li>
<span>第一條</span>
</li>
<li>
<span>第二條</span>
</li>
</ul>
</li>
<li>
<span>第二節(jié)</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
<script type="text/javascript">
$(function(){
//收起所有的選項(xiàng)
$("#treeID").tree("collapseAll");
});
</script>
我們還可以引入外部文件，使用json格式的文件來(lái)添加到這個(gè)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基礎(chǔ)教程之EasyUI常用組件(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Jquery Easyui進(jìn)度條組件Progress使用詳解（8）
- Jquery Easyui選項(xiàng)卡組件Tab使用詳解（10）
- Jquery Easyui菜單組件Menu使用詳解（15）
- Jquery Easyui自定義下拉框組件使用詳解（21）
- Jquery Easyui搜索框組件SearchBox使用詳解（19）
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- JQuery EasyUI的一些常用組件
相關(guān)文章
基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果功能實(shí)現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果,下拉聯(lián)動(dòng)是基于query的一款聯(lián)動(dòng)下拉菜單插件 jquery-cxselect實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
選擇用戶是一個(gè)比較常用的功能，主要包含2個(gè)功能點(diǎn)（保存已選選項(xiàng)、顯示已選用戶）2014-07-07
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)戶籍地選擇下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了jquery懸浮提示框?qū)崿F(xiàn)方法,涉及jQuery鼠標(biāo)事件響應(yīng)及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-01-01
jquery異常問(wèn)題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問(wèn)題Uncaught?TypeError:?$(...).on?is?not?a?function，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
jQuery獲取多種input值的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery獲取多種input值的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jquery實(shí)現(xiàn)煙花效果(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了jquery面向?qū)ο髮?shí)現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案
本篇文章給大家分享了20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案，對(duì)此有需要的朋友可以參考下。2018-05-05
jQuery常用數(shù)據(jù)處理方法小結(jié)
這篇文章主要介紹了jQuery常用數(shù)據(jù)處理方法,實(shí)例總結(jié)了trim、param、isArray、isFunction、each等jQuery常用的數(shù)據(jù)處理方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jQuery的實(shí)現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
在 jQuery 中，可以對(duì)每一個(gè) DOM 對(duì)象保存私有的數(shù)據(jù)。2010-08-08