上下div高度动态自适应--另类处理方案

     这段时间在工作中遇到一个看似较为棘手的问题。问题描述:查询报表页面分为上下两部分,上部分为条件输入区域,下部分为报表展示区域。客户要求做到默认满屏(但要动态适应不同的窗体大小,也就是浏览器窗体用户会手动改变其大小),但上部分条件输入区域有动态变化高度的现象。

     在遇到上述问题,您是否第一反应就是利用window的onresize事件,做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时,我们又应该如何呢。是否有统一的处理方案呢。今儿本人就把我自己的想法和测试提供出来,供大家参考,有疑问或建议欢迎交流和沟通。

一、上代码

闲话少说,上代码。首先本人为了处理与IE的兼容性,对现代浏览器,IE浏览器做了区别对待。然后提供了一个工厂类以供使用。

1.1、 现代浏览器的实现

/**
* 现代浏览器处理方案
*/
function RptAutoHeightForModernBrower(context){
this.context = context;
this.$object = null;
}
var mPt = RptAutoHeightForModernBrower.prototype;
mPt.init = function(){
var object = document.createElement('iframe'), self = this; //object在ie11上onload方法不能执行
//区元素,绝对定位(父级必须是相对定位,否则参考到body了),四个为0,width、height为100%让其宽、高与父级相同,pointer-events:none(不接受鼠标事件)z-index:层级最低。
object.onload = function(){ 
var context = this;
this.contentDocument.defaultView.addEventListener('resize', function(){ 
self.context.onResize(context.clientHeight);
});
}
object.setAttribute('style', 'display:block; position:absolute; border:0px; visibility: hidden; left:0px; right: 0px; top: 0px; bottom: 0px; pointer-events: none; z-index: -1; overflow:hidden; width: 100%; height: 100%; opacity:0;');
//object.type = "text/html";
object.src = "about:blank";
this.context.$header.appendChild(object);
this.$object = object;
//先触发一次 
this.context.onResize(this.context.$header.clientHeight);
//window.resize事件
window.onresize = function(){
self.context.onResize(self.context.$header.clientHeight);
}
}
mPt.dispose = function(){
this.$object.contentDocument.defaultView.removeEventListener('resize');
this.context.$header.removeChild(this.$object);
}

     在此处,为了做到兼容IE11(因为Ie11不支持attacheEvent方法,所以也会被判断为现代浏览器),本人创建的DOM,不是使用的object而是使用的iframe,因为在IE下object的onload事件不能触发,而iframe的可能有;并且iframe的边框一定要去掉,否则影响判断。

 

1.2、ie浏览器的实现

/**
* ie的处理方案
*/
function RptAutoHeightForIE(context){
this.context = context;
}
var iePt = RptAutoHeightForIE.prototype;
iePt.init = function(){
var self = this;
this.context.$header.attachEvent('onresize', function(){
self.context.onResize(window.event.srcElement.clientHeight);
});
this.context.onResize(this.context.$header.clientHeight);
//window.resize事件
window.onresize = function(){
self.context.onResize(self.context.$header.clientHeight);
}
}
iePt.dispose = function(){
this.context.$header.detachEvent('onresize');
}

     IE浏览器的实现相对简单,因为IE环境下的div天身支持onresize事件。

1.3、工厂类

//处理高度自适应的Factory
function RptAutoHeightFactory(opts){
this.opts = opts || {};
this.$wrap = this.opts.wrap || document.getElementsByClassName('rpt-wrap')[0];
this.$header = this.opts.header || this.$wrap.getElementsByClassName('rpt-header')[0];
this.$cont = this.opts.cont || this.$wrap.getElementsByClassName('rpt-cont')[0];
var cxt = {
$header: this.$header,
onResize: this.resize()
};
this.diffVal = 0;
this.realize = document.attachEvent 
? new RptAutoHeightForIE(cxt) 
: new RptAutoHeightForModernBrower(cxt);
}
var pt = RptAutoHeightFactory.prototype;
pt.init = function(){
var bTop = this.getStyle(this.$header, "border-top-width");
var bBottom = this.getStyle(this.$header, "border-bottom-width");
bTop = parseInt(bTop.replace('px', ''), 10);
bBottom = parseInt(bBottom.replace('px', ''), 10);
this.diffVal  = bTop   bBottom;
var bTop = this.getStyle(this.$cont, "border-top-width");
var bBottom = this.getStyle(this.$cont, "border-bottom-width");
bTop = parseInt(bTop.replace('px', ''), 10);
bBottom = parseInt(bBottom.replace('px', ''), 10);
this.diffVal  = bTop   bBottom;
this.realize.init(); 
}
pt.resize = function(){
var $cont = this.$cont, self = this;
return function(headerHeight){
var dist = self.getMaxHeight() - headerHeight - self.diffVal;
if(dist > 1 ){
$cont.style.height = dist  'px'; //加单位,是为了兼容ie
                }
}
}
pt.getHeight = function(dom){
var height = dom.clientHeight;            
return height;
}
pt.getStyle = function(dom, key){
if(dom.currentStyle){
return dom.currentStyle[key];
}else if(window.getComputedStyle){
return window.getComputedStyle(dom, null)[key];
}
}
pt.getMaxHeight = function(){
return document.documentElement.clientHeight || document.body.clientHeight;
}

      此处本人在获取style的属性值,使用了getComputedStyle和currentStyle实现的,这民是标准的方法。

 

1.4、这样使用

js代码:

var irow = 2;
function addRow(){
var parent = document.getElementsByClassName('rpt-header')[0];
var p = document.createElement('p');
p.innerHTML = "<p>添加第"   irow     "行记录</p>";
parent.appendChild(p);
}
var autoHeightFactory = new RptAutoHeightFactory();
autoHeightFactory.init();

html代码:

<div class="rpt-wrap">
<div class="rpt-header">
<button type="button" onclick="addRow()">添加</button>
<p>第一行内容</p>
</div>
<div class="rpt-cont">
</div>
</div>

css代码:

html, body{
margin: 0px;
padding: 0px;
height: 100%;
}
.rpt-wrap{
height: inherit;
overflow: hidden;
}
.rpt-header{
border: 1px solid gray;
position: relative;
}
.rpt-cont{
border: 1px solid red;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java缓冲输入流_java _io_字符缓冲流的输入、输出

新增方法:输入:BufferedReader breadernew BufferedReader(Reader reader);.readLine()读取一行内容&#xff0c;返回字符串输出:BufferedWriter bwriternew BufferedWirter(Writer writer);.newLine() 写入一个换行符输入:File f new File("C:\Users\10853\eclipse-works…

Android Activity has leaked window that was originally added

今天调试程序时log中突然打印这样的错误&#xff0c;但是程序并没有crash&#xff0c;为了不放过一个错误&#xff0c;我决定调查一下。 当时是离开一个activity&#xff0c;然后提示是否退出此界面&#xff0c;接下来就打印此错误&#xff1a; 03-08 18:02:48.521: E/WindowMa…

201571030316/201571030314 《小学四则运算练习软件需求说明》结对项目报告

小伙伴儿的博客地址链接&#xff1a;http://www.cnblogs.com/mjuan/p/8877738.html 我的学号&#xff1a;201571030316 小伴儿的学号&#xff1a;201571030314 一、调研过程&#xff1a; 1. 调查问卷&#xff1a;https://www.wjx.cn/jq/22680271.aspx利用问卷…

关于Java 8的Optional的介绍

我最近发现了JDK 8中Optional类型的添加。 Optional类型是避免NullPointerException一种方法&#xff0c;因为从方法中获取Optional返回值的API使用者被“强制”执行“在线”检查&#xff0c;以消耗其实际返回值。 更多细节可以在Javadoc中看到。 可以在此博客文章中找到非常有…

如何加快HTML页面加载速度

1. 页面减肥 a. 页面的肥瘦是影响加载速度最重要的因素。 b. 删除不必要的空格、注释。 c. 将inline的script和css移到外部文件。 d. 可以使用HTML Tidy来给HTML减肥&#xff0c;还可以使用一些压缩工具来给JavaScript减肥。 2. 减少文件数量 a. 减少页面上引用的文件数…

java 英文字符串排序_英文字符串排序算法

编程工作偶尔会遇到一些不常见问题需要处理&#xff0c;学编程处理问题也难免需要熟悉一些算法以前学习的时候就遇到过一个看似简单的排序算法问题&#xff0c;当时的解决办法是我没有用过的&#xff0c;在此记录一下问题 - 英文字符串排序如下几个英文单词或者字母apple&#…

23种设计模式之一(单例模式)

单例模式&#xff1a;&#xff08;确保一个类最多只有一个实例&#xff0c;并提供一个全局访问点&#xff09; 存在的意义&#xff1a; 有些对象我们只需要一个&#xff0c;如&#xff1a;线程池、缓存、硬件设备等&#xff1b;如果使用多个实例就会造成冲突、不一致等&#xf…

mysql监控

1、查看mysql所有线程&#xff1a;show full processlist;SHOW PROCESSLIST显示哪些线程正在运行。如果您有SUPER权限&#xff0c;即root权限之类&#xff0c;您可以看到所有线程。否则&#xff0c;您只能看到您自己的线程&#xff08;也就是&#xff0c;与您正在使用的MySQL账…

vSphere ESXi主机配置iSCSI存储

vSphere ESXi主机配置iSCSI存储 vSphere ESXi主机一般连接的存储类型有光纤存储、iSCSI存储两类。本次案例为iSCSI存储连接ESXi主机的配置。 案例环境&#xff1a;ESXi主机通过以太网络来连接iSCSID存储&#xff0c;并获取到存储空间&#xff0c;拓扑如下&#xff1a; 首先完成…

Java EE 7:带有Glassfish v4的JMS 2.0

Java EE 7最近已被执行委员会接受 。 这意味着我们很快将在市场上提供Java EE 7应用服务器。 构成Java EE 7的规范之一是JMS 2.0 。 自1.1版以来&#xff0c;引入了一些有趣的改进。 JMS有很多怪异的东西&#xff0c;例如&#xff1a; Connection&#xff03;createSession&am…

css的优先级笔记

个人小站点&#xff1a;https://sundjly.github.io/ 来自《精彩绝伦的css》 1.css的优先级我们是用选择器的“特殊程度”&#xff1a; 每个元素的描述贡献&#xff08;如div&#xff0c;ul&#xff09;为0,0,0,1每个类&#xff08;class&#xff09;、伪类&#xff08;如:ho…

linux上验证cudnn是否安装成功_deepin15.7中安装tensorflow+cuda9.0+cudnn7的步骤

这次deepin15.7大更新&#xff0c;特别是深度学习环境搭建屡屡失败&#xff0c;很是恼火。本次按照下面的步骤做成功了&#xff0c;以下是deepin15.7下安装tensorflowcuda9.0cudnn7的全部流程。硬件1.神舟战神z7-kp7s1&#xff0c;双显卡双硬盘2.独显是gtx1060 6G系统安装1.下载…

AES加密和解密

来源1 来源2 1 { JsonSerializer serializer new JsonSerializer(); string[] strArray { "111","222","333","444","555","666"}; Boy boy new Boy(); boy.Age 15; boy.bir Convert.ToDateTime("1999…

[心平气和读经典]The TCP/IP Guide(003)

The TCP/IP Guide [Page 43, 44] Scope of The TCP/IP Guide | 本书的讨论范围 The first step to dealing with a problem is recognizing that you have one. So, I have to come clean with you, my reader. I have a problem: an addiction to... detail. :-) Every time I…

使用jclouds在S3上分段上传

1.目标 在上一篇文章中 &#xff0c;我们研究了如何使用jclouds中的通用Blob API将内容上传到S3。 在本文中&#xff0c;我们将使用jclouds的S3特定的异步API上传内容并利用S3提供的分段上传功能。 2.准备 2.1。 设置自定义API 上传过程的第一部分是创建jclouds API-这是针对…

【ichart】简单的统计图表ichart.js的使用

1、首先下载&#xff0c;点击下载 2、只需要这一个js&#xff0c;粘贴赋值到自己项目中即可。 3、引入js <script type"text/javascript" src"../js/ichart.1.2.min.js"></script> <script type"text/javascript" src"..…

java单击切换div_[Java教程]点击同一按钮实现div的隐藏与现实切换

[Java教程]点击同一按钮实现div的隐藏与现实切换0 2016-01-16 21:00:12点击同一按钮实现div的隐藏与现实切换:在很多应用中&#xff0c;都有这样的功能&#xff0c;点击同一个按钮可以实现div的隐藏或者现实&#xff0c;当然操作的并非必须是按钮或者div&#xff0c;不过原理是…

python链表的实现,有注释

class Node(): #node实现,每个node分为两部分:一部分含有链表元素,成数据域;另一部分为指针,指向下一个 __slots__[_item,_next] #限定node实例的属性??? 这个元素就是有两部分组成,,,一个指针一个数据,,,但是链表头就不是这样了 def __init__(self…

ActiveMQ——activemq的使用java代码实例(精选)

ActiveMQ 在java中的使用&#xff0c;通过单例模式、工厂实现 Jms规范里的两种message传输方式Topic和Queue&#xff0c;两者的对比如下表()&#xff1a; TopicQueue概要Publish Subscribe messaging 发布订阅消息Point-to-Point 点对点有无状态topic数据默认不落地&#xff…

Java 8:正在运行的CompletableFuture

在Java 8中全面研究了CompletableFuture API之后&#xff0c;我们准备编写一个简单的Web搜寻器。 我们已经使用ExecutorCompletionService &#xff0c; Guava ListenableFuture和Scala / Akka解决了类似的问题。 我选择了相同的问题&#xff0c;以便轻松比较方法和实现技术。 …