jquery自适应布局

代码整理 - 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();

})();

demo

jquery自适应布局的更多相关文章

css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
常用样式制作思路自定义按钮~自适应布局~常见bug seajs简记初学者必知的HTML规范不容忽略的——CSS规范
常用样式制作思路学习常用样式总结参考来自这里带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
使用移动自适应布局+easy mock实现移动界面的简单实现
一.使用easy mock模拟数据 easy mock链接地址二.自己写移动自适应布局自己编写主要是利用rem进行宽度栅格布局: html { /* 相当于一个界面适配器,pc以及移动端都可以进行 ...
微信小程序新单位rpx与自适应布局
rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...
这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
[UWP]使用AdaptiveTrigger实现自适应布局
这篇博客将介绍如何在UWP开发中使用AdaptiveTrigger实现自适应布局. 场景1:窗体宽度大于800时,窗体背景色为绿色,窗体在0到800之间为蓝色. XAML Code: <Grid ...
常见css水平自适应布局
左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
DIV+CSS自适应布局
自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应 1,高度自适应 ...

随机推荐

Web---字节输出流和字符输出流的共存问题、转发、重定向、请求包含知识点讲解
本章博客的知识点: 1.字节输出流和字符输出流的共存问题 2.转发时,两个servlet都输出信息的问题详细知识,见OneServlet和TwoServlet源代码中的注释转发:传参,访问顺序(d ...
JAVA环境变量正确设置，却无法在cmd中javac
今晚试着重新设置JAVA的环境变量,按着度娘告知的操作方法: 1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值 ...
白帽子讲Web安全1.pdf
第一章我的安全世界观安全是一个持续过程 6种威胁:Spoofing(伪装).Tampering(篡改).Repudiation(抵赖).InformationDisclosure(信息泄漏).De ...
jmeter控制器
1.仅一次控制器这个控制器可以保证线程在多次循环跑得情况下只登陆一次 2.循环控制器(Loop Controller:设置循环次数结果: 3. ForEach控制器(ForEach Contro ...
再谈内存管理与ARC运行机制（一）
内存管理内存在Objective-C开发中是一种相对稀缺的资源,拿Iphone4为例,它的内存只有512mb,所以妥善的处理好所创造,所使用的每个对象与变量都将成为一个问题.在ARC出现以前,同大部 ...
经典SQL语句大全之数据开发
数据开发 1.按姓氏笔画排序:Select * From TableName Order By CustomerName Collate Chinese_PRC_Stroke_ci_as //从少到多 ...
oracle7
管理初始化参数管理初始化参数(调优的一个重要知识点,凭什么可以对数据库进行调优呢?是因为它可以对数据库的一些参数进行修改修正) 初始化参数用于设置实例或是数据库的特征.oracle9i提供了200多 ...
mysql学习笔记4---mysql 复制---源代码
mysql: c:底层 C++:相对上层主备复制:主库通知备库来取 MYSQL复制源代码代码:SQL文件夹 int start_slave_thread( #ifdef HAVE_PSI_INTER ...
\n 与 \r 在记事本中的内容表现方式原创
总结:[0D,0A]的顺序才可以记事本才可以正常显示回车换行,其他EDITPLUS ,等编缉工具在下面三种情况下都可以换行原始数据与表现形式 [0D,0A]序列才可以正常显示回车换行 --- ...
如何使用JCA (J2EE 连接器架构）实现企业应用--转载
JCA (J2EE 连接器架构,Java Connector Architecture)是对J2EE标准集的重要补充.因为它注重的是将Java程序连接到非Java程序和软件包中间件的开发.连接器特指基 ...

jquery自适应布局

jquery自适应布局的更多相关文章

随机推荐

热门专题