jQuery Easyuiは左右のレイアウトを実現

EasyUIの概要
easyuiはjQueryベースのユーザインタフェースプラグインの集合である.
easyuiは、現代化、インタラクティブ、JavaScriptアプリケーションの作成に必要な機能を提供します.
easyuiを使用すると、多くのコードを書く必要はありません.簡単なHTMLタグを書くだけで、ユーザーインタフェースを定義することができます.
easyuiはHTML 5ページを完璧にサポートする完全なフレームワークです.
easyuiは、Webページの開発時間と規模を節約します.
easyuiは簡単ですが、機能が強いです.
バックグラウンド管理システムの開発過程で、上左右のレイアウトが最も一般的なページレイアウト方式であり、easyuiというjqueryフロントエンドフレームワークを使用して、利用可能なページフレームワークを迅速に構築する方法を見てみましょう.
1.easyuiに必要なファイルをページに取り込む

2.ページbody に なhtml を する

ここで したいのは、easyuiがlayoutレイアウトを する 、north、southは さを する があり、west、eastは を する があり、centerは に さと に します.
3.jsを してeasyuiコンポーネントを する
にはjsコードを してeasyuiコンポーネントを することをお めしますが、easyuiラベルのdata-optionsプロパティを して しません.バックグラウンド にとって、jsコードを くのはhtmlラベルを くよりも している があり、htmlコードを にすることができます.

$(function(){
/*
*    layout
*/
$("#home-layout").layout({
// layout     
fit: true
});
/*
*        ，           
*/
$("#home-west-tree").tree({
　　　　//       ，  
url: "${ctx }/pages/home-west-tree.json",
method: "get",
　　　　//      
lines: true,
　　　　//              
animate: true,
　　　　//      
onClick: function(node){
if(node.attributes && node.attributes.url){
　　　　　　　　　//      tab，     
addTab({
url: "${ctx }/" + node.attributes.url,
title: node.text
});
}
}
});
　　/*
*        tabs
*/
$("#home-tabs").tabs({
fit : true,
　　　　//tab      
border : false
});})


/*
*         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
};
//           tab    ，    tab     
//        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);
}
}
 

4.easyui-treeコンポーネントに必要なjson形式
easyuiで使用される転送フォーマットはjsonで、jsonコンテンツのフォーマットに厳しい制限がありますので、apiの表示に注意してください.

[{
"text":"    ",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"      ",
"children":[{
"text":"        ",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"      ",
"children":[{
"text":"      ",
"state":"closed",
"children":[{
"text":"       ",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"
}
},{
"text":"       ",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"
}
},{
"text":"        ",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"
}
},{
"text":"       ",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"
}
}]
}]
},{
"text":"      ",
"children":[{
"text":"      ",
"state":"closed",
"children":[{
"text":"    ",
"children":[{
"text":"        ",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"        ",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"       ",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"       ",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]

このようにeasyuiを用いて簡単な左右レイアウトを完成しました.
以上、編集者が共有したjQuery Easyui実装上の左右レイアウトに関する内容ですが、皆さんのお役に立てばと思います.