jquery自適應佈局_ZenDei技術網路在線

代碼整理 - uix.layout.js /** * Grace [jQuery.js] * * UIX頁面佈局 * [email protected] * exp: * $.uix.layout();//執行佈局 * class="uix-layout-container";//標識佈局容器 * c ...
代碼整理 - 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();
})();
View Code
demo