首页 / 脚本样式 / JavaScript / 基于jQuery的弹出消息插件 DivAlert之旅（一）

想着自己学习Javascript，以及Ajax、jQuery等已经有一段时间了，不过貌似还没有写过一个插件，看到jQuery官网上那么多令人眼前一亮的插件，自己今天也动心说是不是能够写一个类似的插件来瞧瞧，了解了jQuery插件的基本格式，理一下基本的思路，动工吧。。。
这个DivAlert插件，顾名思义就是页面弹出框，也就相当于Winform里面MessageBox.Show（）那样的东西。
首先，我们来定义一下一些最基本的参数：
插件初始化
复制代码 代码如下:
（function（$） {
$.jDivAlert = function（o） {
//设置插件基本信息
var options = o || {};
options.width = o.width || 300;
options.height = o.height || 200;
options.title = o.title || "提示标题";
options.content = o.content || "提示内容";

随后定义一个创建页面元素的方法，这样可以重用，简写js：
复制代码 代码如下:
function createElement（obj） {
return $（document.createElement（obj））;
}



创建背景div及设定样式
复制代码 代码如下:
var $bgDiv = createElement（"div"）
.css（{ "position": "absolute", "top": "0", "left": "0", "z-index": "9999", "filter": "alpha（opacity=70）", "backgroundColor": "#999", "opacity": "0.7", "width": document.documentElement.clientWidth + "px", "height": document.documentElement.clientHeight + "px" }）
.appendTo（"body"）;

创建提示div
复制代码 代码如下:
var $outDiv = createElement（"div"）
.css（{ "position": "absolute", "top": （$（window）.height（） - options.height） / 2 + $（window）.scrollTop（） + "px", "left": （$（window）.width（） - options.width） / 2 + $（window）.scrollLeft（） + "px", "border": "1px solid #cef", "zIndex": "10000", "width": options.width + "px", "height": options.height + "px", "overflow": "hidden" }）
.appendTo（"body"）;

创建提示div的标题部分
复制代码 代码如下:
var $titDiv = createElement（"div"）
.css（{ "textAlign": "left", "backgroundColor": "#54A1D9", "padding": "8px", "cursor": "move", "height": "20px", "vertical-align": "middle" }）
.html（options.title）
.appendTo（$outDiv）;

创建提示div的内容部分
复制代码 代码如下:
var $conDiv = createElement（"div"）
.css（{ "backgroundColor": "#fff", "textAlign": "center", "padding": "12px", "height": options.height - $titDiv.outerHeight（） }）
.html（options.content）
.appendTo（$outDiv）;

创建关闭按钮
复制代码 代码如下:
var $clsBtn = createElement（"img"）
.attr（"src", "del.gif"）
.css（{ "cursor": "pointer", "float": "right" }）
.click（close）
.appendTo（$titDiv）;

创建弹出框关闭事件：
复制代码 代码如下:
function close（） {
$bgDiv.fadeOut（）;
$outDiv.fadeOut（）;
}
}
}）（jQuery）;

要看到使用效果，在页面script部分加入如下代码即可（当然jQuery库文件不可少啊，现在最新版是1.4.2，可以去官网http://www.jQuery.com下载）：
复制代码 代码如下:
$（document）.ready（function（） {
$.jDivAlert（{
width: 300,
height: 300
}）;
}）;

貌似还有很多功能有待完善，哎。。继续努力。。。
打包下载地址

基于jQuery的弹出消息插件 DivAlert之旅（一）

基于jQuery的消息提示插件 DivAlert之旅（二）

基于jQuery的消息提示插件 DivAlert之旅（三） 推荐