jquery布局,jquery設(shè)計(jì)思想
jquery mobile 6行6列怎么布局
jquery mobile默認(rèn)最多只支持5列（也就是class為ui-grid-d）。
創(chuàng)新互聯(lián)公司主營(yíng)修水網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā),修水h5小程序設(shè)計(jì)搭建,修水網(wǎng)站營(yíng)銷推廣歡迎修水等地區(qū)企業(yè)咨詢
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，使用六個(gè)td解決。不一定非要用其內(nèi)置的類。
table
tr
td1/td
td2/td
td3/td
td4/td
td5/td
td6/td
/tr
/table
jquery css3響應(yīng)式網(wǎng)頁(yè)布局鼠標(biāo)滾動(dòng)頁(yè)面動(dòng)畫(huà)顯示效果怎么寫(xiě)
你這個(gè)問(wèn)題問(wèn)的好大。
1、響應(yīng)式布局：
media選擇器。根據(jù)寬度通過(guò)樣式控制頁(yè)面布局
直接使用樣式百分比來(lái)控制。
通過(guò)js監(jiān)控頁(yè)面寬度，然后通過(guò)js手動(dòng)去控制頁(yè)面布局，顯示元素或者隱藏元素，設(shè)置某些元素寬高之類的。
2、鼠標(biāo)滾動(dòng)：常用 mousewheel 事件，滾動(dòng)事件
3、動(dòng)畫(huà)效果 ：可以選擇css3的動(dòng)畫(huà)，或者js自己寫(xiě)動(dòng)畫(huà)
綜上所述：你需要通過(guò) 2的事件來(lái)控制1，不過(guò)1的樣式中要加入動(dòng)畫(huà)樣式（3）。大功告成
chm里都是方式方法。也有現(xiàn)成效果
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 ui layout 布局容器必須是body嗎
UI
Layout是一種基于jQuery的布局框架，項(xiàng)目主頁(yè)。該框架的參考原型是ExtJS的
border-layout，因此十分適用于將原有使用ExtJS的項(xiàng)目改造成jQuery項(xiàng)目。其核心是一個(gè)大小自適應(yīng)的中心面板（必選），面板的上下
左右四個(gè)方向可以放置可折疊、可縮放的面板（可選），各個(gè)面板可以添加任意數(shù)量的頁(yè)眉和頁(yè)腳面板。UI
Layout支持內(nèi)層布局的嵌套，任意塊元素都可以當(dāng)作布局的容器，最基本的布局容器是body。
基本使用方法：獲取容器元素并調(diào)用layout方法，傳入配置參數(shù)（可選）options即可：
$('body').layout( [options] );通常保留布局的引用，以便于進(jìn)一步通過(guò)代碼控制布局的形態(tài)。
復(fù)制代碼 代碼如下:
var myLayout = $('body').layout();
// 讀取布局配置選項(xiàng)
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元素，而面板的附屬組件（縮放器和折疊開(kāi)關(guān)）是自動(dòng)生成的div元素，并且加上了對(duì)應(yīng)的class屬性。幾乎所有的面板元素都必
須是容器元素的直接子元素，form容器是一個(gè)例外。我們可以為相應(yīng)的HTML元素賦予默認(rèn)的類名，或者自定義的類名、id，來(lái)指定布局面板。下面舉個(gè)直
觀的例子：
復(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)配置，可省略
});
});
對(duì)應(yīng)的頁(yè)面：
復(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í)別（不可以用類選擇器），并且在布局參數(shù)“west__paneSelector”中指明對(duì)應(yīng)的id。中心面板嵌套在form
中，此時(shí)面板可以使用默認(rèn)類名或自定義類名來(lái)識(shí)別。當(dāng)一個(gè)面板滿足下列兩個(gè)條件時(shí)才可以使用自定義類選擇器，否則只能用id選擇器來(lái)識(shí)別：1、面板是
form的直接子元素2、該form是容器的直接子元素，并且是容器中的第一個(gè)form。
面板之間的空隙構(gòu)成了面板的邊，邊的概念是相對(duì)
于上下左右方向的面板而言的，由于可以設(shè)置拖動(dòng)面板的邊實(shí)現(xiàn)對(duì)應(yīng)面板的縮放，所以稱這些邊為“縮放器”；縮放器上面通常附加一個(gè)折疊開(kāi)關(guān)負(fù)責(zé)面板的折疊與
打開(kāi)。當(dāng)兩個(gè)面板之間沒(méi)有空隙時(shí)，縮放器和折疊開(kāi)關(guān)隨之消失。面板打開(kāi)和折疊狀態(tài)下，縮放器的寬度可以分別指定為不同的值。
怎么用jQuery/HTML/Div+CSS按瀏覽器屏幕大小自適應(yīng)布局？
少用 JS 多用 CSS, 提升運(yùn)行效率. 另外 resize 事件當(dāng)用鼠標(biāo)拖放窗口大小時(shí), 觸發(fā)非常頻繁, 謹(jǐn)慎使用.
建議 body 下 布局一個(gè) DIV, 這個(gè)DIV 的 CSS 可以這樣處理:
{
position:?absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
overflow:auto;
}
然后再在這個(gè) div中進(jìn)行布局, 子div可以用 100%相對(duì)布局, 頁(yè)面寬度就自動(dòng)撐開(kāi)了.
另外一種常用布局是用 table 設(shè)置寬度為100%進(jìn)行布局, 不過(guò)有很多局限, 用的少了.
jQuery Easyui實(shí)現(xiàn)左右布局
EasyUI
簡(jiǎn)介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫(xiě)很多代碼，你只需要通過(guò)編寫(xiě)一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶界面。
easyui是個(gè)完美支持HTML5網(wǎng)頁(yè)的完整框架。
easyui節(jié)省您網(wǎng)頁(yè)開(kāi)發(fā)的時(shí)間和規(guī)模。
easyui很簡(jiǎn)單但功能強(qiáng)大的。
在后臺(tái)管理系統(tǒng)開(kāi)發(fā)的過(guò)程中，上左右的布局是最常見(jiàn)的頁(yè)面布局方式，現(xiàn)在我們來(lái)看看使用easyui這個(gè)jquery前端框架如何快速搭建一個(gè)可用的頁(yè)面框架。
1.在頁(yè)面中引入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.在頁(yè)面body部分構(gòu)建必要的html結(jié)構(gòu)
body
div
id="home-layout"
!--
頁(yè)面北部，頁(yè)面標(biāo)題
--
div
data-options="region:'north'"
style="height:50px;"
!--
add
your
code
--
/div
!--
頁(yè)面西部，菜單
--
div
data-options="region:'west',title:'菜單欄'"
style="width:200px;"
div
class="home-west"
ul
id="home-west-tree"/ul
/div
/div
!--
頁(yè)面中部，主要內(nèi)容
--
div
data-options="region:'center'"
div
id="home-tabs"
div
title="首頁(yè)"
h2
style="text-align:
center"歡迎登錄/h2
/div
/div
/div
/div
/body
這里需要注意一點(diǎn)：easyui在使用layout布局的時(shí)候，north、south需要指定高度，west、east需要指定寬度，而center會(huì)自動(dòng)適應(yīng)高和寬。
3.使用js初始化easyui組件
我個(gè)人比較推薦使用js代碼去初始化easyui組件，而不使用easyui標(biāo)簽中的data-options屬性去初始化。因?yàn)閷?duì)于后臺(tái)開(kāi)發(fā)人員來(lái)說(shuō)，寫(xiě)js代碼可能比寫(xiě)html標(biāo)簽更加熟悉，而且這樣使得html代碼更加簡(jiǎn)潔。
script
$(function(){
/*
*
初始化layout
*/
$("#home-layout").layout({
//使layout自適應(yīng)容器
fit:
true
});
/*
*
獲取左側(cè)菜單樹(shù)，并為其節(jié)點(diǎn)指定單擊事件
*/
$("#home-west-tree").tree({
//加載菜單的數(shù)據(jù)，必需
url:
"${ctx
}/pages/home-west-tree.json",
method:
"get",
//是否有層次線
lines:
true,
//菜單打開(kāi)與關(guān)閉是否有動(dòng)畫(huà)效果
animate:
true,
//菜單點(diǎn)擊事件
onClick:
function(node){
if(node.attributes
node.attributes.url){
//打開(kāi)內(nèi)容區(qū)的tab，代碼在其后
addTab({
url:
"${ctx
}/"
+
node.attributes.url,
title:
node.text
});
}
}
});
/*
*
初始化內(nèi)容區(qū)的tabs
*/
$("#home-tabs").tabs({
fit
:
true,
//tab頁(yè)是否有邊框
border
:
false
});})
/script
script
/*
*
在內(nèi)容區(qū)添加一個(gè)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é)點(diǎn)對(duì)應(yīng)的tab已經(jīng)存在，則選中該tab并刷新內(nèi)容
//否則打開(kāi)一個(gè)新的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，它對(duì)json內(nèi)容的格式有比較嚴(yán)格的限制，所以請(qǐng)注意查看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)入申請(qǐng)管理",
"children":[{
"text":"商戶準(zhǔn)入申請(qǐng)",
"state":"closed",
"children":[{
"text":"商戶待處理申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_wait"
}
},{
"text":"商戶審批中申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_current"
}
},{
"text":"商戶審批通過(guò)申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_pass"
}
},{
"text":"商戶被拒絕申請(qǐng)",
"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":"商戶不通過(guò)任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]
就這樣，我們使用easyui完成了簡(jiǎn)單的左右布局。
以上所述是小編給大家分享的jQuery
Easyui實(shí)現(xiàn)上左右布局的相關(guān)內(nèi)容，希望對(duì)大家有所幫助。
網(wǎng)頁(yè)標(biāo)題：jquery布局,jquery設(shè)計(jì)思想
瀏覽路徑：http://m.jiaotiyi.com/article/phisjj.html