jquery自适应布局的简单实例

前端之家收集整理的这篇文章主要介绍了jquery自适应布局的简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

代码整理 - uix.layout.js

页面布局 * 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 class="uix-layout-north">

<div class="uix-layout-west">

<div class="uix-layout-east">

<div class="uix-layout-center">

<div class="uix-layout-south">

html2:body中
html3:嵌套

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);
    }
    
    //<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>一个新操作在待执行序列中
    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),"marginBottom"]);
    parent.height -= marginHeight;
    }
    else {
    parent = { height: $(pare[0]).height(),width: $(pare[0]).width() };
    var marginHeight = tool.getCV($(pare),"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; + ;
    
    //考虑加入前置<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    //在改变布局前先改变子元素
    
    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",height: eastheight + "px",margin: "0px" });
      right += item.outerWidth;
    }
    
    eles.center.css({ height: cheight,"marginLeft": s.wests.outerWidth,"marginRight": s.easts.outerWidth });
    tool.log("整体布局完成");
    
    tool.log("开始检测回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a> <a href="/tag/tishi/" target="_blank" class="keywords">提示</a>:可设置window.uixAfterResize值[false:禁用回调|function:<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>回调|undefined(默认):<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>检测]");
    this.resizecontral(s);
    tool.log("回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>处理完毕");
    
    $.uix.tool.setAuto<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(); //uix_<a href="/tag/Box/" target="_blank" class="keywords">Box</a> 高宽自适应

    },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("<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>[window.uixAfterResize=function]");
      window.uixAfterResize(sizes);
      return;
    }
    if (typeof window.uixAfterResize == "undefined") {
      tool.log("使用<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>解析回调[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("解析<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>结构"
      + " north[" + n + "] "
      + " west[" + w + "] "
      + " east[" + e + "] "
      + " south[" + s + "] "
      + " center[" + c + "]");
    
      //判断界面结构,选择合适的回调<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>,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自适应布局的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章