jQuery Easyui實現(xiàn)左右布局

EasyUI

創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南湖企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計，南湖網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

簡介

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很簡單但功能強(qiáng)大的。

在后臺管理系統(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)容，希望對大家有所幫助。

jquery布局

不知道是不是你想要的。

script src="js/jquery-1.6.1.min.js"/script

style type="text/css"

html,body{ margin:0; padding:0;}

div{ border:5px solid #f00;}

/style

script

$(function(){

var objW = $(window);

var viewport = $("#viewport");

changeSize();

objW.bind("resize",function(){

changeSize()

});

function changeSize(){

brsH = objW.height();

brsW = objW.width();

viewport.width(brsW);

viewport.height(brsH);

}

})

/script

/head

body

div id="viewport"/div

/body

/html

jquery mobile 6行6列怎么布局

jquery mobile默認(rèn)最多只支持5列（也就是class為ui-grid-d）。

h3Grid D (20/20/20/20/20)/h3

div class="ui-grid-d ui-responsive"

div class="ui-block-a"div class="ui-body ui-body-d"A/div/div

div class="ui-block-b"div class="ui-body ui-body-d"B/div/div

div class="ui-block-c"div class="ui-body ui-body-d"C/div/div

div class="ui-block-d"div class="ui-body ui-body-d"D/div/div

div class="ui-block-e"div class="ui-body ui-body-d"E/div/div

/div

如果是6列，你完全可以使用table，使用六個td解決。不一定非要用其內(nèi)置的類。

table

tr

td1/td

td2/td

td3/td

td4/td

td5/td

td6/td

/tr

/table

jquery ui layout 布局容器必須是body嗎

UI

Layout是一種基于jQuery的布局框架，項目主頁。該框架的參考原型是ExtJS的

border-layout，因此十分適用于將原有使用ExtJS的項目改造成jQuery項目。其核心是一個大小自適應(yīng)的中心面板（必選），面板的上下

左右四個方向可以放置可折疊、可縮放的面板（可選），各個面板可以添加任意數(shù)量的頁眉和頁腳面板。UI

Layout支持內(nèi)層布局的嵌套，任意塊元素都可以當(dāng)作布局的容器，最基本的布局容器是body。

基本使用方法：獲取容器元素并調(diào)用layout方法，傳入配置參數(shù)（可選）options即可：

$('body').layout( [options] );通常保留布局的引用，以便于進(jìn)一步通過代碼控制布局的形態(tài)。

復(fù)制代碼 代碼如下:

var myLayout = $('body').layout();

// 讀取布局配置選項

var is_west_resizable = myLayout.options.west.resizable;

var north_maxHeight = myLayout.options.north.maxSize;

// 調(diào)用布局函數(shù)

myLayout.toggle("north");

myLayout.sizePane("west", 300);

// 調(diào)用布局工具

myLayout.addPinBtn("#myPinButton", "west");

myLayout.allowOverflow("north");

所

有面板基于現(xiàn)有的HTML元素，而面板的附屬組件（縮放器和折疊開關(guān)）是自動生成的div元素，并且加上了對應(yīng)的class屬性。幾乎所有的面板元素都必

須是容器元素的直接子元素，form容器是一個例外。我們可以為相應(yīng)的HTML元素賦予默認(rèn)的類名，或者自定義的類名、id，來指定布局面板。下面舉個直

觀的例子：

復(fù)制代碼 代碼如下:

$(document).ready(function() {

$("body").layout({

/*

east west panes require 'ID' selectors

because they are 'nested inside a div'

*/

west__paneSelector: "#west"

, east__paneSelector: "#east"

/*

north south panes are 'children of body'

*/

, north__paneSelector: ".ui-layout-north"http://默認(rèn)配置，可省略

, south__paneSelector: ".myclass-south"

/*

center pane is a 'child of the first form'

default-selector shown just for reference

*/

, center__paneSelector: ".ui-layout-center"http://默認(rèn)配置，可省略

});

});

對應(yīng)的頁面：

復(fù)制代碼 代碼如下:

body

!-- 'north' 'south' are children of body --

div class="ui-layout-north"north/div

div class="myclass-south"south/div

!-- 'center' is nested inside a form --

form

div class="ui-layout-center"center/div

/form

!-- 'east' 'west' are nested inside a div --

div

div id="west"west/div

div id="east"east/div

/div

/body

在

本例中，布局容器是body，南、北面板是容器的直接子元素，南面板使用自定義類名“myclass-south”，需要在布局參數(shù)

south__paneSelector中指定jQuery選擇器；北面板使用默認(rèn)類名“ui-layout-north”。東、西面板不是容器的直接子

元素，需要指定id才能識別（不可以用類選擇器），并且在布局參數(shù)“west__paneSelector”中指明對應(yīng)的id。中心面板嵌套在form

中，此時面板可以使用默認(rèn)類名或自定義類名來識別。當(dāng)一個面板滿足下列兩個條件時才可以使用自定義類選擇器，否則只能用id選擇器來識別：1、面板是

form的直接子元素2、該form是容器的直接子元素，并且是容器中的第一個form。

面板之間的空隙構(gòu)成了面板的邊，邊的概念是相對

于上下左右方向的面板而言的，由于可以設(shè)置拖動面板的邊實現(xiàn)對應(yīng)面板的縮放，所以稱這些邊為“縮放器”；縮放器上面通常附加一個折疊開關(guān)負(fù)責(zé)面板的折疊與

打開。當(dāng)兩個面板之間沒有空隙時，縮放器和折疊開關(guān)隨之消失。面板打開和折疊狀態(tài)下，縮放器的寬度可以分別指定為不同的值。

本文名稱：jquery布局,html5 jquery
URL地址：http://jinyejixie.com/article34/dsssspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)