你的位置:首页 > Java教程

[Java教程]jquery自适应布局


代码整理 - uix.layout.js

/*** Grace [jQuery.js]** UIX页面布局* 290353142@qq.com* exp: * $.uix.layout();//执行布局* ;//标识布局容器* ;//用于调整 布局时将此元素高度铺满父容器(支持设置padding\margin\border)* 例:html1:div中<div >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>html2:body中<body >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></body>html3:嵌套<body >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div >    <div ></div>    <div ></div>  </div>  <div ></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