首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

jquery自适应布局的简单实例

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 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
VOLVO(1) 晶体管(2) 66-XI(1) MOTOROLA(1) 77A(2) 军机(1) BOSE(2) 摩托罗拉(1) 收信机(3) 沃尔沃(1)
You might like
再说下636单管机
2021/03/02 无线电
使用apache模块rewrite_module (转)
2007/02/14 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP生成条形图的方法
2014/12/10 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Prototype Template对象 学习
2009/07/19 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）
2012/04/07 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
探究python中open函数的使用
2016/03/01 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python递归函数特点及原理解析
2020/03/04 Python
keras.layer.input()用法说明
2020/06/16 Python
NFL加拿大官方网上商店：NHLShop.ca
2019/03/12 全球购物
Janie and Jack美国官网：GAP旗下的高档童装品牌
2019/09/09 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
村委会主任先进事迹
2014/01/15 职场文书
需求分析说明书
2014/05/09 职场文书
廉政承诺书范文
2015/04/28 职场文书
你为什么是穷人？可能是这5个缺点造成
2019/07/11 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android