jquery自定义插件 -- 弹出窗

TiFa.L.Hart
浏览: 16709 次
性别:
来自: 广州
最近访客更多访客>>

liuwwww
woodding2008
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
HTML
JQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>

<script>

//Figure out what browser is being used (Fixed the issue jquery version after 1.9)
$.browser = {
mozilla : /firefox/.test(navigator.userAgent.toLowerCase()),
webkit : /webkit/.test(navigator.userAgent.toLowerCase()),
opera : /opera/.test(navigator.userAgent.toLowerCase()),
msie : /msie/.test(navigator.userAgent.toLowerCase()),
};
</script>


<script>
/**
 * 自定义插件：实现在浏览器中定位窗口的位置 这里根据用户传过来的参数进行设置窗口的位置(上下左右4个角落以及中间)
 *
 * @param height
 *            窗体高度，如400(建议不带单位,默认为px) 
 * @param width
 *            窗体宽度，如600(建议不带单位,默认为px)
 * @param title
 *            窗体顶端的标题
 * @param message
 *            窗体显示的内容
 * @param left
 *            表示窗口水平位置-->可选值："center"、"left"、"right"、具体的数值,如：200
 * @param top
 *            表示窗口垂直位置-->可选值："center"、"top"、"bottom"、具体的数值,如：300
 * @param type
 *            表示类型
 *            可选值："default"、"rollup"。default--->表示默认的,没有动画。rollup--->表示在右下角滑上来(像QQ消息提示框一样)
 *
 */
$.fn.popUpWin = function(args) {
	var currentWin = this; // 将当前对象设置成currentWin，以方便使用
	var windowObj = $(window); // 转化window为JQuery对象

	var winWidth = 600; //windos's width
	var winWidthUnit = '600px'; //width with unit
	var winHeight = 400; //windows's height
	var winHeightUnit = '400px'; //width with unit
	var browserWidth = windowObj.width(); // 浏览器的宽
	var browserHeight = windowObj.height(); // 浏览器的高
	var scrollLeft = windowObj.scrollLeft(); // 获取滚动条的左边距(滚动条里最左端的差距)
	var scrollTop = windowObj.scrollTop(); // 获取滚动条的上边距
	var winLeft; // 窗口的左边距
	var winTop; // 窗口的上边距
	
	var positionLeft;
	var positionTop;
	var title = 'Message Dialog';
	var message = 'No message show up!';
	var type; //窗口类型
	
	//check if it is a number
	function isNumber(tester){
		var re = /\D+/;
		return !re.test(tester);
	}
	//get number from strig such as 600px will return 600
	function getNumber(str) {
		var re = /^\d+/;
		return str.match(re);
	}
	
	function getUnion(str) {
		var re = /\D+/;
		return str.match(re);
	}
	
	
	// init params
	if (args && args instanceof Object) {
		
		if(args.height && args.height!=''){
			if(isNumber(args.height)){
				winWidth = args.height;
				winWidthUnit = args.height + 'px';
			} else {
				winWidth = getNumber(args.height);
				winWidthUnit = args.height;
			}
		}
		
		if(args.width && args.width!=''){
			if(isNumber(args.width)){
				winWidth = args.width;
				winWidthUnit = args.width + 'px';
			} else {
				winWidth = getNumber(args.width);
				winWidthUnit = args.width;
			}
		}
		
		if(args.title && args.title!='') {
			title = args.title;
		}
		if(args.message && args.message!=''){
			message = args.message;
		}
		
		if(args.type && args.type!='') {
			type = args.type;
		}
		
		if(args.left && args.left!='') {
			positionLeft = args.left;
		}
		
		if(args.left && args.top!='') {
			positionTop = args.top;
		}
	}
	
	
	/*
	* init component
	*/
	function initComponent(){
		
		var appendStr = "<div class='pop_up_title'><span class='pop_up_cls'><input type='button' value='Close'/></span><span class='pop_up_txt'>" 
		+ title
		+ "</span></div><hr color='#0099FF'/><div class='pop_up_content'><span class='pop_up_content_txt' style='" 
		+ (winHeight-50)
		+ getUnion(winHeightUnit) + ";'>"
		+ message
		+ "</span></div>";

		currentWin.addClass("pop_up_window");
		
		currentWin.css( {
				"width" : winWidthUnit,
				"height" : winHeightUnit
		});
			
		currentWin.append(appendStr);

	}
	// init component
	initComponent();

	// 处理水平位置的参数
	function calLeft(positionLeft, scrollLeft, browserWidth, winWidth) {
		if (positionLeft && typeof positionLeft == "string") { // 判断参数为字符串
			if (positionLeft == "center") { // left参数为center，则水平居中
				winLeft = (browserWidth - winWidth) / 2 + scrollLeft;
			} else if (positionLeft == "left") { // left参数为left，则水平居左
				winLeft = scrollLeft;
			} else if (positionLeft == "right") { // left参数为right，则水平居右
				winLeft = scrollLeft + browserWidth - winWidth;
			} else { // 用户输入了其他字符串，则改为默认居中
				winLeft = (browserWidth - winWidth) / 2 + scrollLeft - 30;
			}
		} else if (positionLeft && typeof positionLeft == "number") { // 判断参数为数值,则根据数值直接设置
			winLeft = positionLeft;
		} else {  //其他情况,默认居中。如：没有输入该参数或非法字符
			winLeft = (browserWidth - winWidth) / 2 + scrollLeft;
			positionLeft = "cneter";
		}
	}

	// 处理垂直位置的参数
	function calTop(positionTop, scrollTop, browserHeight, winHeight) {
		if (positionTop && typeof positionTop == "string") {
			if (positionTop == "top") {
				winTop = scrollTop;
			} else if (positionTop == "center") {
				winTop = (browserHeight - winHeight) / 2 + scrollTop;
			} else if (positionTop == "bottom") {
				winTop = scrollTop + browserHeight - winHeight;
			} else {
				winTop = (browserHeight - winHeight) / 2 + scrollTop;
			}
		} else if (positionTop && typeof positionTop == "number") { // 判断参数为数值,则根据数值直接设置
			winTop = positionTop;
		} else {
			winTop = (browserHeight - winHeight) / 2 + scrollTop;
			positionTop = "center";
		}
	}
	
	// *******这里很重要，将传过来的参数缓存在data.positionLeft中，这样做是为了在后面滚动条滚动或浏览器大小改变时使用，这里有点像java中的hashMap
	currentWin.data("positionLeft", positionLeft); // 缓存数据
	currentWin.data("positionTop", positionTop); // 缓存数据

	// 移动窗口,此方法仅供滚动条滚动以及窗口大小时使用，不适合初始化(就是在加载页面时，调用了该插件)时使用，因为一开始不存在currentWin.data("positionLeft")和currentWin.data("positionTop")的值
	function moveWin() {
		// 重新获取一些值并调用响应的内部函数进行设置
		var browserWidth = windowObj.width(); // 浏览器的宽
		var browserHeight = windowObj.height(); // 浏览器的高
		var scrollLeft = windowObj.scrollLeft(); // 获取滚动条的左边距(滚动条里最左端的差距)
		var scrollTop = windowObj.scrollTop(); // 获取滚动条的上边距

		// 调用方法重新计算左边距和上边距
		calLeft(currentWin.data("positionLeft"), scrollLeft, browserWidth,
				winWidth);
		calTop(currentWin.data("positionTop"), scrollTop, browserHeight,
				winHeight);

		// 设置窗口位置
		currentWin.animate( {
			"left" : winLeft,
			"top" : winTop
		}, 200); // 注意：currentWin在css定义中一定要注明position:absolute;
	}
	
	
	//窗口类型
	if(type && type == "rollup"){  //这里实现像QQ消息框效果,在右下角滑上来，并慢慢淡出
			//如果窗口可见，将其设置成隐藏
			if(currentWin.is(":visible")){
				currentWin.hide();
			}
			calLeft(positionLeft, scrollLeft, browserWidth, winWidth);
			calTop(positionTop, scrollTop, browserHeight, winHeight);
			var left = winLeft;
			if($.browser.mozilla){  //修正firefox左边距
				left =  winLeft-10;
			}
			currentWin.css( {
				"left" : left,
				"top" : winTop + winHeight
			});
			
			currentWin.show(500).animate( {
				"top" : winTop
			}, 500)
			var fadeOutTimeOut;
			clearTimeout(fadeOutTimeOut); // 先清除所有延时，以免重复叠加
			fadeOutTimeOut = setTimeout(function() {
				currentWin.fadeOut(25000).dequeue();//15秒淡出   《dequeue()：去除动画队列中第一个动画，但该动画仍会继续执行，这样能保证后面的动画不需要等到第一个动画执行完才执行,这样可以防止在滚动条滚动时能在淡出的同时也能移动位置》
			}, 3000); // 3秒后开始淡出
			
			//鼠标悬停在窗口上,取消隐藏
			currentWin.mouseover(function(){
				if(!currentWin.is(":visible")){ //若窗口本身为不可见时不执行后面两句语句
					return;
				}
				currentWin.stop(true,true);
				currentWin.fadeIn(0);
			});
			
			//鼠标移开，3秒后再次隐藏
			currentWin.mouseout(function(){
				if(!currentWin.is(":visible")){
					return;
				}
				clearTimeout(fadeOutTimeOut); // 先清除所有延时，以免重复叠加
				fadeOutTimeOut = setTimeout(function() {
					currentWin.fadeOut(25000).dequeue();
				}, 3000);
			});
			
			
			
			
			
		} else {  //普通情况
			calLeft(positionLeft, scrollLeft, browserWidth, winWidth);
			calTop(positionTop, scrollTop, browserHeight, winHeight);
			
			currentWin.css( {
				"left" : winLeft,
				"top" : winTop
			});
			
			currentWin.show("slow"); //显示窗口
		}



	// 为当前窗口注册滚动条滚动事件，在滚动条滚动时能够动态改变窗口的位置
	windowObj.scroll(function() {
		if (!currentWin.is(":visible")) {
			return;
		}
		var scrollTimeOut; // 延时处理,由于拉动滚动条时不断改变窗口位置会导致浏览器会一闪一闪,所以通过延时修改
		clearTimeout(scrollTimeOut); // 先清除所有延时，以免重复叠加
		scrollTimeOut = setTimeout(function() {
			moveWin();
		}, 300); // 延时300毫秒
		});

	// 为当前窗口注册浏览器大小改变事件
	windowObj.resize(function() {
		if (!currentWin.is(":visible")) { // 判断若当前窗口为不可见则不进行该事件的处理
				return;
			}
			moveWin();
		});


	// 注册关闭窗口事件
	$(currentWin).find("span[class='pop_up_cls']").click(function() {
		$(currentWin).fadeOut(0);
	});
	
	return currentWin;
}
</script>


<script>
function load(){
	$("#test").popUpWin({
		title: "testing",
		message: "testing message!",
		width:'600px',
		height: '400px',
		left:'center',
		top:'center'
	});
}
</script>




<style>
/*整个窗体的样式*/
.pop_up_window{
	/*background-color:#D0DEF0;*/
	/*width:600px;
	height:400px;*/
	border:5px solid #B3D9FF;
	margin:0px;
	display:none;
	position: absolute;
	z-index:999;
}

/*窗体内容区的样式*/
.pop_up_content{
	background-color:#FFF;
	width:100%;
	height:350px;

/*	position:relative;*/
}

/*窗体标题栏的样式*/
.pop_up_title{
	marging:0;
	padding:0;
	border:0;
	width:100%;
	height:25px;
	background:#FFF;
	font-size:14px;
	font-weight:bold;

}
/*窗体标题右侧图片的样式*/
.pop_up_title .pop_up_cls{
	padding:0;
	margin-top:3px;
	width:65px;
	height:25px;
	overflow:hidden;
	display:block;  /*一定要设置成block不然不会显示*/
	float:right;

}
/*窗体标题文字的样式*/
.pop_up_title .pop_up_txt{
	display:block;
	height:25px;
	line-height:25px;
	margin-left:5px;
}

/*内容区文本（主体文本）*/
.pop_up_content_txt{
	marging:0;
	padding:0 5px;
	display:block;
	/*height:350px;*/
	background:#CBE7FC;
	overflow:auto; /*这里设置的auto是为了当要显示的内容过多时，会自动出现滚动条*/

}


</style>
</head>

<body onload="load()">

<div id="test">

</div>
 
</body>
</html>
分享到：
nXn矩阵转圈圈
2014-05-11 20:47
浏览 641
评论(0)
分类:Web前端
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery自定义插件 -- 弹出窗

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery自定义插件 -- 弹出窗

评论

发表评论

相关推荐

javascript

页面布局 - 三栏 - 左、中间栏固定 - 右栏自动适应到右边或者适应到左、中栏的下面

页面布局 - 三栏 - 中间栏固定 - 左右两栏自适应

页面布局 - 两栏 - 一栏固定、一栏自适应

HTML

最近访客更多访客>>
