jquery自適應(yīng)布局的簡單實例

更新時間：2016年05月28日 09:56:29 投稿：jingxian

下面小編就為大家?guī)硪黄猨query自適應(yīng)布局的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

代碼整理 - uix.layout.js

/**
* Grace [jQuery.js]
*
* UIX頁面布局
* 290353142@qq.com

* exp: 
* $.uix.layout();//執(zhí)行布局
* class="uix-layout-container";//標(biāo)識布局容器
* class="uix_box";//用于調(diào)整 布局時將此元素高度鋪滿父容器(支持設(shè)置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:
頁面結(jié)構(gòu)動態(tài)修改后調(diào)用 $.uix.layout()即可,若無動態(tài)修改則無需做操作

*
*/
(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("日志狀態(tài)[" + (config.isDebugger ? "啟用" : "禁用") + "]", true);


  var tool = {
    selecter: ".uix_box", //uix_box高寬自適應(yīng)
    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")); //自適應(yīng)表格
        tool.log("布局完畢[" + window.__uixlayoutstate + "]");
        window.__uixlayoutstate = false;
      }

      //如果已經(jīng)有了一個待執(zhí)行的操作，則取消之
      if (typeof window.__uixlayoutstate == "number") {
        tool.log("取消布局[" + window.__uixlayoutstate + "]");
        window.clearTimeout(window.__uixlayoutstate);
      }

      //添加一個新操作在待執(zhí)行序列中
      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; + ;


      //考慮加入前置函數(shù)
      //在改變布局前先改變子元素


      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("開始檢測回調(diào)函數(shù) 提示：可設(shè)置window.uixAfterResize值[false:禁用回調(diào)|function:自定義回調(diào)|undefined(默認(rèn)):自動檢測]");
      this.resizecontral(s);
      tool.log("回調(diào)函數(shù)處理完畢");

      $.uix.tool.setAutoBox(); //uix_box 高寬自適應(yīng)
    },

    resizecontral: function (sizes) {
      //調(diào)整布局內(nèi)常用版式
      //檢查用戶設(shè)置的 uixAfterResize 變量，
      // boolean fale：不進(jìn)行排盤，
      // function 調(diào)用自定義函數(shù)，
      // undefined 自動檢測所屬版式
      if (typeof window.uixAfterResize == "boolean" && window.uixAfterResize == false) {
        tool.log("禁用自動解析回調(diào)[window.uixAfterResize==false]");
        return;
      }

      if (typeof window.uixAfterResize == "function") {
        tool.log("調(diào)用自定義回調(diào)函數(shù)[window.uixAfterResize=function]");
        window.uixAfterResize(sizes);
        return;
      }
      if (typeof window.uixAfterResize == "undefined") {
        tool.log("使用自動解析回調(diào)[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("解析頁面結(jié)構(gòu)"
        + " north[" + n + "] "
        + " west[" + w + "] "
        + " east[" + e + "] "
        + " south[" + s + "] "
        + " center[" + c + "]");

        //判斷界面結(jié)構(gòu),選擇合適的回調(diào)方法,
        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("已停止加載[未發(fā)現(xiàn).uix-layout-container]", true); return; }
        $.uix.tool.log("觸發(fā)布局[window onload]");
        $.uix.layout();
        $(window).bind("resize", function () {
          $.uix.tool.log("觸發(fā)布局[window onresize]");
          $.uix.layout();
        });
        $(".uix-layout-north,.uix-layout-south,.uix-layout-east,.uix-layout-west").bind("resize", function () {
          $.uix.tool.log("觸發(fā)布局[uix-layout-" + $(this).attr("class") + " onresize]");
          $.uix.layout();
        });
        log("初始化完畢", true);
      });
    },

    afterResize1: function (size) {
      //特定結(jié)構(gòu)回調(diào)1
    },
    afterResize2: function (size) {
      //特定結(jié)構(gòu)回調(diào)2
    }
  };
  $.extend({ uix: uixlayout });
  log("加載完畢", true);
  $.uix.initpage();
})();

以上這篇jquery自適應(yīng)布局的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: