jquery自适应布局的简单实例


Posted in Javascript onMay 28, 2016

代码整理 - 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自适应布局的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
javascript数组的使用
Mar 28 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 #Javascript
jquery div模态窗口的简单实例
May 28 #Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 #Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 #Javascript
js弹出窗口返回值的简单实例
May 28 #Javascript
JS获取子窗口中返回的数据实现方法
May 28 #Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
js树形控件脚本代码
2008/07/24 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python3最长回文子串算法示例
2019/03/04 Python
python梯度下降算法的实现
2020/02/24 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
置业顾问岗位职责
2014/03/02 职场文书
社区健康教育工作方案
2014/06/03 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
幸福来敲门观后感
2015/06/04 职场文书
会议简讯范文
2015/07/20 职场文书
干部培训简讯
2015/07/20 职场文书
党章学习心得体会2016
2016/01/14 职场文书