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();
})();
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,高度自适应 ...
随机推荐
- MFC DialogBar 按钮灰色不响应
在MFC单文档加添加DialogBar,然后在DialogBar上添加按钮,会出现如下情况,单击无响应. 解决方案: 在 CSideDialogBar头文件和CPP文件里添加如下函数 afx_msg ...
- JavaScript---网络编程(8)-DHTML技术演示(1)
DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...
- linux下如何执行PHP脚本
Linux 下如何直接执行 php 脚本? 下面是部分 php 命令行参数. 用法 php [-q] [-h] [-s] [-v] [-i] [-f ] | { [args...]} -q 安静模式, ...
- 【转】shell 教程——04 什么时候使用Shell
因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...
- nginx定时备份access访问日志并重启nginx
用.sh脚本写了备份日志脚本 其实就是转移文件改名后重新建一个空文件 mv /alidata/log/nginx/access/wxtest.log /alidata/log/nginx/access ...
- PowerDesigner跟表的字段加注释
选择那个表 右键- >Properties- >Columns- >Customize Columns and Filter(或直接用快捷键Ctrl+U)- >Comment( ...
- 绿色tftpserver：tftpd32的配置
嵌入式开发中少不了用到TFTP服务,它的功能主要是用来给目标板传输文件. tftpd32.exe是如今最经常使用的TFTPserver,今天就来介绍它的配置方法. 1.从这里 下载新版本号tftpd3 ...
- mybatis0203 一对一查询 resultMap实现
resultType实现的时候先要确定po类(数据库类)满不满足要求,如果不满足就要自定义一个pojo类(工具类). resultMap提供一对一关联查询的映射和一对多关联查询映射,一对一映射思路:将 ...
- MVVM架构的一次实践，重写iOS头条客户端
前言: 一个iOS头条APP,使用MVVM架构实现,代码中有注释,封装了AFN网络请求,解媾代码,使用起来非常方便.用最经典的TableView展示,后续不断更新,喜欢就star或fork一下,有问题 ...
- 基于Lucene的文件检索Demo
通过Lucene实现了简单的文件检索功能的Demo.这个Demo支持基于文件内容的检索,支持中文分词和高亮显示. 下面简单的介绍下核心的类 1)索引相关的类 1.FileIndexBuilder -- ...