打包下載
想著自己學習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
});
});
貌似還有很多功能有待完善，哎。。繼續努力。。。