EasyUI
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網(wǎng)定制，成都網(wǎng)站制作、成都做網(wǎng)站，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
簡介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標(biāo)記，就可以定義用戶界面。
easyui是個完美支持HTML5網(wǎng)頁的完整框架。
easyui節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模。
easyui很簡單但功能強大的。
在后臺管理系統(tǒng)開發(fā)的過程中，上左右的布局是最常見的頁面布局方式，現(xiàn)在我們來看看使用easyui這個jquery前端框架如何快速搭建一個可用的頁面框架。
1.在頁面中引入easyui所需的文件
%--
加載easyui的樣式文件，bootstrap風(fēng)格
--%
link
href="${ctx
}/css/themes/bootstrap/easyui.css"
rel="stylesheet"
link
href="${ctx
}/css/themes/icon.css"
rel="stylesheet"
%--
加載jquery和easyui的腳本文件
--%
script
src="${ctx
}/js/jquery-easyui-../jquery.min.js"/script
script
src="${ctx
}/js/jquery-easyui-../jquery.easyui.min.js"/script
script
src="${ctx
}/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"/script
2.在頁面body部分構(gòu)建必要的html結(jié)構(gòu)
body
div
id="home-layout"
!--
頁面北部，頁面標(biāo)題
--
div
data-options="region:'north'"
style="height:50px;"
!--
add
your
code
--
/div
!--
頁面西部，菜單
--
div
data-options="region:'west',title:'菜單欄'"
style="width:200px;"
div
class="home-west"
ul
id="home-west-tree"/ul
/div
/div
!--
頁面中部，主要內(nèi)容
--
div
data-options="region:'center'"
div
id="home-tabs"
div
title="首頁"
h2
style="text-align:
center"歡迎登錄/h2
/div
/div
/div
/div
/body
這里需要注意一點：easyui在使用layout布局的時候，north、south需要指定高度，west、east需要指定寬度，而center會自動適應(yīng)高和寬。
3.使用js初始化easyui組件
我個人比較推薦使用js代碼去初始化easyui組件，而不使用easyui標(biāo)簽中的data-options屬性去初始化。因為對于后臺開發(fā)人員來說，寫js代碼可能比寫html標(biāo)簽更加熟悉，而且這樣使得html代碼更加簡潔。
script
$(function(){
/*
*
初始化layout
*/
$("#home-layout").layout({
//使layout自適應(yīng)容器
fit:
true
});
/*
*
獲取左側(cè)菜單樹，并為其節(jié)點指定單擊事件
*/
$("#home-west-tree").tree({
//加載菜單的數(shù)據(jù)，必需
url:
"${ctx
}/pages/home-west-tree.json",
method:
"get",
//是否有層次線
lines:
true,
//菜單打開與關(guān)閉是否有動畫效果
animate:
true,
//菜單點擊事件
onClick:
function(node){
if(node.attributes
node.attributes.url){
//打開內(nèi)容區(qū)的tab，代碼在其后
addTab({
url:
"${ctx
}/"
+
node.attributes.url,
title:
node.text
});
}
}
});
/*
*
初始化內(nèi)容區(qū)的tabs
*/
$("#home-tabs").tabs({
fit
:
true,
//tab頁是否有邊框
border
:
false
});})
/script
script
/*
*
在內(nèi)容區(qū)添加一個tab
*/
function
addTab(params){
var
t
=
$("#home-tabs");
var
url
=
params.url;
var
opts
=
{
title:
params.title,
closable:
true,
href:
url,
fit:
true,
border:
false
};
//如果被選中的節(jié)點對應(yīng)的tab已經(jīng)存在，則選中該tab并刷新內(nèi)容
//否則打開一個新的tab
if(t.tabs("exists",
opts.title)){
var
tab
=
t.tabs("select",
opts.title).tabs("getSelected");
t.tabs("update",
{
tab:
tab,
options:
opts
});
}else{
t.tabs("add",
opts);
}
}
/script
4.easyui-tree組件所需的json格式
easyui使用的傳輸格式為json，它對json內(nèi)容的格式有比較嚴(yán)格的限制，所以請注意查看api
[{
"text":"區(qū)域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"預(yù)約信息管理",
"children":[{
"text":"商戶預(yù)約信息查詢",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"準(zhǔn)入申請管理",
"children":[{
"text":"商戶準(zhǔn)入申請",
"state":"closed",
"children":[{
"text":"商戶待處理申請",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_wait"
}
},{
"text":"商戶審批中申請",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_current"
}
},{
"text":"商戶審批通過申請",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_pass"
}
},{
"text":"商戶被拒絕申請",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_refuse"
}
}]
}]
},{
"text":"準(zhǔn)入審批管理",
"children":[{
"text":"商戶審批管理",
"state":"closed",
"children":[{
"text":"當(dāng)前任務(wù)",
"children":[{
"text":"商戶當(dāng)前初審任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商戶當(dāng)前復(fù)審任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商戶已完成任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商戶不通過任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]
就這樣，我們使用easyui完成了簡單的左右布局。
以上所述是小編給大家分享的jQuery
Easyui實現(xiàn)上左右布局的相關(guān)內(nèi)容，希望對大家有所幫助。
一、ExtJS
1、ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用，是一個用javascript寫的，主要用于創(chuàng)建前端用戶界面，是一個與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。ExtJs最開始基于YUI技術(shù)，由開發(fā)人員JackSlocum開發(fā)，通過參考JavaSwing等機制來組織可視化組件，無論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術(shù)的精品。
2、Ext的UI組件模型和開發(fā)理念脫胎、成型于Yahoo組件庫YUI和Java平臺上Swing兩者，并為開發(fā)者屏蔽了大量跨瀏覽器方面的處理。相對來說，EXT要比開發(fā)者直接針對DOM、W3C對象模型開發(fā)UI組件輕松。
二、JQuery
jQuery是一個兼容多瀏覽器的javascript框架，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發(fā)布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團隊進(jìn)行開發(fā)。如今，jQuery已經(jīng)成為最流行的javascript框架，在世界前10000個訪問最多的網(wǎng)站中，有超過55%在使用jQuery。
jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計可以使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。
三、二者對比
1.JQuery-EasyUI是仿照Ext做的。
2.Ext框架是一個整體，面向?qū)ο蟮木幊趟枷?，每個控件之間可以相互通訊。
3.JQuery的控件全都是分散的，沒有整體性可言。你可以單獨拿出來一個控件就能用。
4.若要開發(fā)系統(tǒng)應(yīng)用，首選Ext，控件庫豐富，擴展和維護(hù)都方便。若是簡單的頁面動畫和效果，首選JQuery
5.jquery只是一個工具庫，比較簡單，相對容易。 Ext是一套真正的ria開發(fā)框架，甚至可以實現(xiàn)桌面應(yīng)用一樣的強大功能。本身代碼質(zhì)量極高，而且是高度的面向?qū)ο笤O(shè)計。jQuery 入門相對容易一些，實際用的過程中要用到各種插件，基本上用一個“學(xué)”一個。 ExtJS 入門稍難。
6.大小比較：首先ExtJS是一個完整的Framework,是重量級別的，easy ui 是基于jquery庫的一套UI組件庫，是輕量級的，ExtJS是應(yīng)用application級的，而jquery是page頁面級的。當(dāng)然application也是由page組成的，那就需要你自己去完成了，考慮你的需求，和使用框架的初衷，選擇使用哪一種。同時ExtJs由于是重量級框架，完全面向?qū)ο箫L(fēng)格，提供API非常完備也非常龐大，所以學(xué)習(xí)成本也想相對較大。
7.兼容性比較：ExtJS兼容IE全系列瀏覽器和其他非IE現(xiàn)代瀏覽器，jquery UI向來不太考慮ie低版本瀏覽器的兼容，從態(tài)度上的鄙視。easy UI是基于jquery的，jquery2.X以上的版本不再支持IE6、7、8,，已鄭重聲明，請看官方網(wǎng)站，easyUI最新版本1.3.3使jQuery2.0,由于又很多HTML5特性，不再支持IE6\7\8，低版本由一些小部分的兼容不夠好，請自己做技術(shù)選型的時候去測試，要使用那個版本。在兼容問題上，都有瑕疵，主要看接收程度。
8.使用許可license. EXTJS 2.1以上版本，商用需要購買商業(yè)授權(quán)，jquery UI 使用MIT協(xié)議，開源。 jquery easyUI如果商用需遵循license commercial商業(yè)許可，也就是要購買使用權(quán)。
設(shè)置jquery easyui中下拉框不可編輯的方法：
EasyUI常用控件禁用方法：
1.validatebox可以用的用法:前兩種適用于單個的validatebox;
第三種應(yīng)用于整個form里面的輸入框;
1.$("#id").attr("readonly", true);
$("#id").removeAttr("readonly");
2.$("#id").attr("readonly", "readonly");
$("#id").removeAttr("readonly");
3.$("#Form :input").attr("readonly", "readonly"); //對form里面的禁用
4.$("input").attr("readonly", "readonly"); //對所有的input標(biāo)簽禁用
2.combobox禁用啟用用法:
1.$("#id").combobox({ disabled: true });
$("#id").combobox({ disabled: false});
2.$("#id").attr("readonly", "readonly"); //對單個禁用 $("#id").removeAttr("readonly");
3.$("#fm .easyui-combobox").combobox({ disabled: true }); //對form里面的下拉框禁用
4.$("#ID").combobox("disable"); ------ $("#ID").combobox("enable");
3.datebox與datetimebox禁用啟用方法:
1.$("#fm .easyui-datebox").datebox({ disabled: true });
$("#fm .easyui-datebox").datebox({ disabled: false});
2.$("#id").attr("readonly", "readonly");
$("#id").removeAttr("readonly");
3.$("#fm .easyui-datetimebox").datetimebox({ disabled: true });
4.combogrid禁用啟用方法:
1.$("#FPayApplySupAccountID").combogrid("disable"); $("#FPayApplySupAccountID").combogrid("enable");
5.lable標(biāo)簽ID附加文字：
1.$("#id").text("標(biāo)題:"); //此方法可以屏蔽掉lable標(biāo)簽內(nèi)的文字
重慶分公司
重慶分公司
