日期:2014-05-16  浏览次数:20396 次

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

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;



这一部分兼容哪些浏览器?
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
地址给你 这有详解
3 楼 ztcwh 2011-03-25  
LZ,来张截图吧,图文并茂比较好看。