jquery自适应布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery自适应布局相关的知识，希望对你有一定的参考价值。
代码整理 - uix.layout.js
/** * Grace [jQuery.js] * * UIX页面布局 * [email protected] * 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", 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 变量， // boolean fale：不进行排盘， // function 调用自定义函数， // undefined 自动检测所属版式 if (typeof window.uixAfterResize == "boolean" && window.uixAfterResize == false) { tool.log("禁用自动解析回调[window.uixAfterResize==false]"); return; } if (typeof window.uixAfterResize == "function") { tool.log("调用自定义回调函数[window.uixAfterResize=function]"); window.uixAfterResize(sizes); return; } if (typeof window.uixAfterResize == "undefined") { tool.log("使用自动解析回调[window.uixAfterResize=undefined]"); var n = sizes.norths.children.length; var w = sizes.wests.children.length; var e = sizes.easts.children.length; var c = sizes.centers.children.length; var s = 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("触发布局[window onload]"); $.uix.layout(); $(window).bind("resize", function () { $.uix.tool.log("触发布局[window onresize]"); $.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自适应布局的主要内容，如果未能解决你的问题，请参考以下文章