通过本文主要向大家介绍了jquery,自适应布局等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
代码整理 - 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中
<div class="uix-layout-container">
<div class="uix-layout-north"></div>
<div class="uix-layout-north"></div>
<div class="uix-layout-west"></div>
<div class="uix-layout-east"></div>
<div class="uix-layout-center"></div>
<div class="uix-layout-south"></div>
</div>
html2:body中
<body class="uix-layout-container">
<div class="uix-layout-north"></div>
<div class="uix-layout-north"></div>
<div class="uix-layout-west"></div>
<div class="uix-layout-east"></div>
<div class="uix-layout-center"></div>
<div class="uix-layout-south"></div>
</body>
html3:嵌套
<body class="uix-layout-container">
<div class="uix-layout-north"></div>
<div class="uix-layout-north"></div>
<div class="uix-layout-west"></div>
<div class="uix-layout-east"></div>
<div class="uix-layout-center uix-layout-container">
<div class="uix-layout-north"></div>
<div class="uix-layout-center"></div>
</div>
<div class="uix-layout-south"></div>
</body>
js:
页面结构动态修改后调用 $.uix.layout()即可,若无动态修改则无需做操作
*
*/
(function (undefined) {
//配置
var config = {
useUixLayout: true, //启用
isDebugger: true, //是否开启日志输出
version: "V201508171400", //版本
filename: "uix.layout.js", //脚本名称
timeout: 500 //布局间隔
};
//日志输出
var log = function () { }
if (typeof console != "undefined" && console.log) {
log = function (context, checklog) {
if (typeof checklog != "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);
var tool = {
selecter: ".uix_box", //uix_box高宽自适应
setAutoBox: function (inputSelecter) {
var sel = inputSelecter || tool.selecter;
$(sel).each(function () {
var o = $(this);
var p = o.parent();
var s = 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) {
var s = 0;
if (typeof cn == "string") cn = [cn];
$(cn).each(function (i, o) {
var v;
s += isNaN(v = parseInt(ele.css(o))) ? 0 : v;
});
return s;
},
getOtherHeight: function ($obj) { return $obj.outerHeight() - $obj.height() },
getOtherWidth: function ($obj) { return $obj.outerWidth() - $obj.width() },
getEleSize: function ($objs) {
var rev = { height: 0, width: 0, otherHeight: 0, otherWidth: 0, outerHeight: 0, outerWidth: 0, children: [] };
for (var i = 0; i < $objs.length; i++) {
var o = $($objs[i]);
var h = o.height(), w = o.width(), oh = o.outerHeight(), ow = o.outerWidth();
var c = { 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);
}
return rev;
},
log: log
}
var uixlayout = {
tool: tool,
layout: function (cssname) {
var timeout = function () {
tool.log("开始布局[" + window.__uixlayoutstate + "]");
var pares = $(".uix-layout-container");
pares.each(function (obj, i) {
$.uix.initLayout($(this));
});
$.uix.setGrid($(".uix_grid")); //自适应表格
tool.log("布局完毕[" + window.__uixlayoutstate + "]");
window.__uixlayoutstate = false;
}
//如果已经有了一个待执行的操作，则取消之
if (typeof window.__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) {
var parent;
if (pare[0].tagName.toUpperCase() == "BODY") {
parent = { height: $(window).height(), width: $(window).width() };
var marginHeight = tool.getCV($(pare), ["marginTop", "marginBottom"]);
parent.height -= marginHeight;
}
else {
parent = { height: $(pare[0]).height(), width: $(pare[0]).width() };
var marginHeight = tool.getCV($(pare), ["marginTop", "marginBottom"]);
parent.height -= marginHeight;
}
parent.element = pare;
if (pare[0].tagName.toUpperCase() == "BODY") {
pare.height(parent.height);
}
var eles = {
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")
}
var s = {
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);
var autoHeight = parent.height - s.norths.outerHeight - s.souths.outerHeight;
var autoWidth = parent.width - s.wests.outerWidth - s.easts.outerWidth;
var cheight = s.centers.height;
var cwidth = s.centers.width;
eles.north.css({ margin: "0px" });
eles.south.css({ margin: "0px" });
var left = 0; //, parentBordr.left
var top = s.norths.outerHeight; //parentBordr.top; + ;
//考虑加入前置函数
//在改变布局前先改变子元素
for (var i = 0; i < s.wests.children.length; i++) {
var item = s.wests.children[i];
var westheight = 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;
}
var right = 0; // parentBordr.right;
for (var i = 0; i < s.easts.children.length; i++) {
var item = s.easts.children[i];
var eastheight = autoHeight - item.otherHeight;
item.ele.css({ position: "absolute", right: right + "px", left: "auto", top: top + "px", b