首页
所有分类
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 相关文章推荐
juqery 学习之五 文档处理 插入
Feb 11 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
EXT中单击button按钮grid添加一行（光标位置可设置)的实例代码
Jun 02 Javascript
利用JS实现数字增长
Jul 28 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue实现购物车列表
Jun 30 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
陨石(1) DNA(2) 嘧啶碱基(2) iPhone(1) RNA(2) 美国航天局(1) 数据(1) 富碳陨石(1) 大脑(1) 火星(2)
You might like
Javascript注入技巧
2007/06/22 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js下将阿拉伯数字每三位一逗号分隔(如：15000000转化为15,000,000)
2014/06/02 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
JS页面动态绘图工具SVG，Canvas，VML介简介
2020/10/16 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python利用socketserver实现并发套接字功能
2018/01/26 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python线程join方法原理解析
2020/02/11 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
小学家长会邀请函
2014/01/23 职场文书
就业表自我评价分享
2014/02/06 职场文书
火车来了教学反思
2014/02/11 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
顶岗实习协议书
2015/01/29 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
Python字典的基础操作
2021/11/01 Python