jquery自定义插件 - 弹出窗
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>