jquery自适应布局的简单实例
代码整理-uix.layout.js
/**
*Grace[jQuery.js]
*
*UIX页面布局
*290353142@qq.com
*exp:
*$.uix.layout();//执行布局
*class="uix-layout-container";//标识布局容器
*class="uix_box";//用于调整布局时将此元素高度铺满父容器(支持设置padding\margin\border)
*例：
html1:div中
<divclass="uix-layout-container">
<divclass="uix-layout-north"></div>
<divclass="uix-layout-north"></div>
<divclass="uix-layout-west"></div>
<divclass="uix-layout-east"></div>
<divclass="uix-layout-center"></div>
<divclass="uix-layout-south"></div>
</div>
html2:body中
<bodyclass="uix-layout-container">
<divclass="uix-layout-north"></div>
<divclass="uix-layout-north"></div>
<divclass="uix-layout-west"></div>
<divclass="uix-layout-east"></div>
<divclass="uix-layout-center"></div>
<divclass="uix-layout-south"></div>
</body>
html3:嵌套
<bodyclass="uix-layout-container">
<divclass="uix-layout-north"></div>
<divclass="uix-layout-north"></div>
<divclass="uix-layout-west"></div>
<divclass="uix-layout-east"></div>
<divclass="uix-layout-centeruix-layout-container">
<divclass="uix-layout-north"></div>
<divclass="uix-layout-center"></div>
</div>
<divclass="uix-layout-south"></div>
</body>
js:
页面结构动态修改后调用$.uix.layout()即可,若无动态修改则无需做操作
*
*/
(function(undefined){
//配置
varconfig={
useUixLayout:true,//启用
isDebugger:true,//是否开启日志输出
version:"V201508171400",//版本
filename:"uix.layout.js",//脚本名称
timeout:500//布局间隔
};
//日志输出
varlog=function(){}
if(typeofconsole!="undefined"&&console.log){
log=function(context,checklog){
if(typeofchecklog!="undefined"||config.isDebugger)
console.log("%c"+"[uix.layout]","color:green;",context);
}
}
//加载日志
log("加载中",true);
if(!config.useUixLayout){log("已停止加载[uix.layout未启用]",true);return;}
if(typeof$=="undefined"){log("已停止加载[需要jQuery支持]",true);return;}
if(typeof$.uix!="undefined"){log("已停止加载[已加载过]",true);return;}
log("日志状态["+(config.isDebugger?"启用":"禁用")+"]",true);
vartool={
selecter:".uix_box",//uix_box高宽自适应
setAutoBox:function(inputSelecter){
varsel=inputSelecter||tool.selecter;
$(sel).each(function(){
varo=$(this);
varp=o.parent();
vars=tool.getEleSize(o);
o.height(p.height()-s.otherHeight-tool.getCV(o,["marginTop","marginBottom"]));
o.width(p.width()-s.otherWidth-tool.getCV(o,["marginLeft","marginRight"]));
})
},
getCV:function(ele,cn){
vars=0;
if(typeofcn=="string")cn=[cn];
$(cn).each(function(i,o){
varv;
s+=isNaN(v=parseInt(ele.css(o)))?0:v;
});
returns;
},
getOtherHeight:function($obj){return$obj.outerHeight()-$obj.height()},
getOtherWidth:function($obj){return$obj.outerWidth()-$obj.width()},
getEleSize:function($objs){
varrev={height:0,width:0,otherHeight:0,otherWidth:0,outerHeight:0,outerWidth:0,children:[]};
for(vari=0;i<$objs.length;i++){
varo=$($objs[i]);
varh=o.height(),w=o.width(),oh=o.outerHeight(),ow=o.outerWidth();
varc={height:h,width:w,otherHeight:oh-h,otherWidth:ow-w,outerHeight:oh,outerWidth:ow,ele:o}
rev.height+=c.height;
rev.width+=c.width;
rev.otherHeight+=c.otherHeight;
rev.otherWidth+=c.otherWidth;
rev.outerHeight+=c.outerHeight;
rev.outerWidth+=c.outerWidth;
rev.children.push(c);
}
returnrev;
},
log:log
}
varuixlayout={
tool:tool,
layout:function(cssname){
vartimeout=function(){
tool.log("开始布局["+window.__uixlayoutstate+"]");
varpares=$(".uix-layout-container");
pares.each(function(obj,i){
$.uix.initLayout($(this));
});
$.uix.setGrid($(".uix_grid"));//自适应表格
tool.log("布局完毕["+window.__uixlayoutstate+"]");
window.__uixlayoutstate=false;
}
//如果已经有了一个待执行的操作，则取消之
if(typeofwindow.__uixlayoutstate=="number"){
tool.log("取消布局["+window.__uixlayoutstate+"]");
window.clearTimeout(window.__uixlayoutstate);
}
//添加一个新操作在待执行序列中
window.__uixlayoutstate=setTimeout(timeout,config.timeout);
tool.log("等待布局["+window.__uixlayoutstate+"]等待"+config.timeout+"ms");
return;
},
initLayout:function(pare){
varparent;
if(pare[0].tagName.toUpperCase()=="BODY"){
parent={height:$(window).height(),width:$(window).width()};
varmarginHeight=tool.getCV($(pare),["marginTop","marginBottom"]);
parent.height-=marginHeight;
}
else{
parent={height:$(pare[0]).height(),width:$(pare[0]).width()};
varmarginHeight=tool.getCV($(pare),["marginTop","marginBottom"]);
parent.height-=marginHeight;
}
parent.element=pare;
if(pare[0].tagName.toUpperCase()=="BODY"){
pare.height(parent.height);
}
vareles={
north:pare.children(".uix-layout-north:visible"),
south:pare.children(".uix-layout-south:visible"),
east:pare.children(".uix-layout-east:visible"),
west:pare.children(".uix-layout-west:visible"),
center:pare.children(".uix-layout-center:visible")
}
vars={
parent:parent,
norths:tool.getEleSize(eles.north),
souths:tool.getEleSize(eles.south),
centers:tool.getEleSize(eles.center),
easts:tool.getEleSize(eles.east),
wests:tool.getEleSize(eles.west)
}
//debugger;
s.centers.outerHeight=s.parent.height-s.norths.outerHeight-s.souths.outerHeight;
s.centers.height=s.centers.outerHeight-s.centers.otherHeight;
s.centers.outerWidth=s.parent.width-s.wests.outerWidth-s.easts.outerWidth;
s.centers.width=s.centers.outerWidth-s.centers.otherWidth;
tool.log(s);
varautoHeight=parent.height-s.norths.outerHeight-s.souths.outerHeight;
varautoWidth=parent.width-s.wests.outerWidth-s.easts.outerWidth;
varcheight=s.centers.height;
varcwidth=s.centers.width;
eles.north.css({margin:"0px"});
eles.south.css({margin:"0px"});
varleft=0;//,parentBordr.left
vartop=s.norths.outerHeight;//parentBordr.top;+;
//考虑加入前置函数
//在改变布局前先改变子元素
for(vari=0;i<s.wests.children.length;i++){
varitem=s.wests.children[i];
varwestheight=autoHeight-item.otherHeight;
item.ele.css({position:"absolute",left:left+"px",right:"auto",top:top+"px",bottom:"auto",height:westheight+"px",display:"block",margin:"0px"});
left+=item.outerWidth;
}
varright=0;//parentBordr.right;
for(vari=0;i<s.easts.children.length;i++){
varitem=s.easts.children[i];
vareastheight=autoHeight-item.otherHeight;
item.ele.css({position:"absolute",right:right+"px",left:"auto",top:top+"px",bottom:"auto",height:eastheight+"px",display:"block",margin:"0px"});
right+=item.outerWidth;
}
eles.center.css({height:cheight,"marginLeft":s.wests.outerWidth,"marginRight":s.easts.outerWidth});
tool.log("整体布局完成");
tool.log("开始检测回调函数提示：可设置window.uixAfterResize值[false:禁用回调|function:自定义回调|undefined(默认):自动检测]");
this.resizecontral(s);
tool.log("回调函数处理完毕");
$.uix.tool.setAutoBox();//uix_box高宽自适应
},
resizecontral:function(sizes){
//调整布局内常用版式
//检查用户设置的uixAfterResize变量，
//booleanfale：不进行排盘，
//function调用自定义函数，
//undefined自动检测所属版式
if(typeofwindow.uixAfterResize=="boolean"&&window.uixAfterResize==false){
tool.log("禁用自动解析回调[window.uixAfterResize==false]");
return;
}
if(typeofwindow.uixAfterResize=="function"){
tool.log("调用自定义回调函数[window.uixAfterResize=function]");
window.uixAfterResize(sizes);
return;
}
if(typeofwindow.uixAfterResize=="undefined"){
tool.log("使用自动解析回调[window.uixAfterResize=undefined]");
varn=sizes.norths.children.length;
varw=sizes.wests.children.length;
vare=sizes.easts.children.length;
varc=sizes.centers.children.length;
vars=sizes.souths.children.length;
tool.log("解析页面结构"
+"north["+n+"]"
+"west["+w+"]"
+"east["+e+"]"
+"south["+s+"]"
+"center["+c+"]");
//判断界面结构,选择合适的回调方法,
if(w==0&&e==0&&c==1){
$.uix.afterResize1(sizes);
}
if(w==1&&e==0&&c==1){
$.uix.afterResize2(sizes);
}
return;
}
},
initpage:function(){
log("等待页面加载完成后初始化",true);
$(window.document.body).ready(function(){
if($(".uix-layout-container").length==0){log("已停止加载[未发现.uix-layout-container]",true);return;}
$.uix.tool.log("触发布局[windowonload]");
$.uix.layout();
$(window).bind("resize",function(){
$.uix.tool.log("触发布局[windowonresize]");
$.uix.layout();
});
$(".uix-layout-north,.uix-layout-south,.uix-layout-east,.uix-layout-west").bind("resize",function(){
$.uix.tool.log("触发布局[uix-layout-"+$(this).attr("class")+"onresize]");
$.uix.layout();
});
log("初始化完毕",true);
});
},
afterResize1:function(size){
//特定结构回调1
},
afterResize2:function(size){
//特定结构回调2
}
};
$.extend({uix:uixlayout});
log("加载完毕",true);
$.uix.initpage();
})();
以上这篇jquery自适应布局的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。