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函数控制根据滚动条滑动将弹出框始终定位在右下角，部分代码片段如下：

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);
		}
}

评论

6 楼 qaddzzq 2011-03-26  

jackra 写道

额...
典型的简单问题复杂化
任何一种标记的表现,都有几个部分
1:空白边;
2:边框;
3:填充:
4:内容区域;
这个图演示了3个标记,互相嵌套的情况,把本来简单的问题复杂化了.

嗯 哈哈 我也是看后面的说明才明白的 这张图看的头晕

5 楼 jackra 2011-03-26  

额...
典型的简单问题复杂化
任何一种标记的表现,都有几个部分
1:空白边;
2:边框;
3:填充:
4:内容区域;
这个图演示了3个标记,互相嵌套的情况,把本来简单的问题复杂化了.

4 楼 qaddzzq 2011-03-26  

ztcwh 写道

LZ，来张截图吧，图文并茂比较好看。

嗯 刚开始引用的图挂掉了  我上传一个

3 楼 ztcwh 2011-03-25  

LZ，来张截图吧，图文并茂比较好看。

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;



这一部分兼容哪些浏览器？

http://www.360doc.com/content/10/0818/16/203871_46978903.shtml
地址给你 这有详解

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;



这一部分兼容哪些浏览器？