ExtJs兑现类似qq浮动窗口
ExtJs实现类似qq浮动窗口
公司系统近期要做一个类似于qq弹出框提醒的功能,以前对网页前台的布局不太清楚,今天在网上搜到一些关于页面布局的一些东西,看起来挺有用的:
一张图
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
理解了这个之后就能使 弹出的win框定位到页面的右下角;
然后在用js函数控制根据滚动条滑动将弹出框始终定位在右下角,部分代码片段如下:
http://www.360doc.com/content/10/0818/16/203871_46978903.shtml
地址给你 这有详解
嗯 刚开始引用的图挂掉了 我上传一个
嗯 哈哈 我也是看后面的说明才明白的 这张图看的头晕
公司系统近期要做一个类似于qq弹出框提醒的功能,以前对网页前台的布局不太清楚,今天在网上搜到一些关于页面布局的一些东西,看起来挺有用的:
一张图
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
理解了这个之后就能使 弹出的win框定位到页面的右下角;
然后在用js函数控制根据滚动条滑动将弹出框始终定位在右下角,部分代码片段如下:
function alertPassport(){ var win = new Ext.Window({ layout:"fit", draggable:true, id : 'win_alert', animCollapse :true, plain : true, width : 320, closable:true, height : 110, modal : false, x:Ext.get("alert").getX()-310, y:Ext.get("alert").getY()-100, resizable:false, title:'<div align="center">到期护照提醒</div>' }); var str = ""; var panel = new Ext.Panel({ html:'' }) win.add(panel); win.setAnimateTarget("main"); win.show(); setpersion(); } //随着滚动条滚动动态改变位置 function setpersion(){ if(Ext.get("win_alert")!=null){ if(document.body.clientHeight+document.body.scrollTop<document.body.scrollHeight){ Ext.get("win_alert").setY(document.body.clientHeight+document.body.scrollTop-100-14) Ext.get("win_alert").setX(Ext.get("alert").getX()-310) }else{ Ext.get("win_alert").setY(document.body.scrollHeight-14-100) Ext.get("win_alert").setX(Ext.get("alert").getX()-310) } window.setTimeout("setpersion()",800); } }
1 楼
p2227
2011-03-25
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
这一部分兼容哪些浏览器?
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
这一部分兼容哪些浏览器?
2 楼
qaddzzq
2011-03-25
p2227 写道
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
这一部分兼容哪些浏览器?
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
这一部分兼容哪些浏览器?
http://www.360doc.com/content/10/0818/16/203871_46978903.shtml
地址给你 这有详解
3 楼
ztcwh
2011-03-25
LZ,来张截图吧,图文并茂比较好看。
4 楼
qaddzzq
2011-03-26
ztcwh 写道
LZ,来张截图吧,图文并茂比较好看。
嗯 刚开始引用的图挂掉了 我上传一个
5 楼
jackra
2011-03-26
额...
典型的简单问题复杂化
任何一种标记的表现,都有几个部分
1:空白边;
2:边框;
3:填充:
4:内容区域;
这个图演示了3个标记,互相嵌套的情况,把本来简单的问题复杂化了.
典型的简单问题复杂化
任何一种标记的表现,都有几个部分
1:空白边;
2:边框;
3:填充:
4:内容区域;
这个图演示了3个标记,互相嵌套的情况,把本来简单的问题复杂化了.
6 楼
qaddzzq
2011-03-26
jackra 写道
额...
典型的简单问题复杂化
任何一种标记的表现,都有几个部分
1:空白边;
2:边框;
3:填充:
4:内容区域;
这个图演示了3个标记,互相嵌套的情况,把本来简单的问题复杂化了.
典型的简单问题复杂化
任何一种标记的表现,都有几个部分
1:空白边;
2:边框;
3:填充:
4:内容区域;
这个图演示了3个标记,互相嵌套的情况,把本来简单的问题复杂化了.
嗯 哈哈 我也是看后面的说明才明白的 这张图看的头晕