首页
所有分类
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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JQuery触发事件例如click
Sep 11 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
完美实现八种js焦点轮播图（上篇）
Jul 18 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Vue.js第四天学习笔记（组件）
Dec 02 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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) form表单(1) pdf(1) ant design(2) 缓冲区(1) json_extract(1) NoSQL(1) 变量提升(1) cypress(1) JOIN(1)
You might like
PHP＋AJAX实现无刷新注册（带用户名实时检测）
2007/01/02 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python如何实现文本转语音
2016/08/08 Python
python实现解数独程序代码
2017/04/12 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
世界上最具创新性的增强型知名运动品牌：Proviz
2018/04/03 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
歌唱比赛主持词
2014/03/18 职场文书
学习保证书范文
2014/04/30 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
社区综治工作汇报
2014/10/27 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python