代碼整理 - 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", 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自適應布局的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
