腳本之家服務器常用軟件

快捷導航

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

更新時間：2010年04月01日 22:41:41 作者：

這個DivAlert插件，顧名思義就是頁面彈出框，也就相當于Winform里面MessageBox.Show()那樣的東西。

想著自己學習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 || "提示內容"; 

　　隨后定義一個創(chuàng)建頁面元素的方法，這樣可以重用，簡寫js：

復制代碼代碼如下:

 
function createElement(obj) { 
return $(document.createElement(obj)); 
} 

創(chuàng)建背景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'); 

創(chuàng)建提示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'); 

創(chuàng)建提示div的標題部分

復制代碼代碼如下:

 
var $titDiv = createElement("div") 
.css({ 'textAlign': 'left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' }) 
.html(options.title) 
.appendTo($outDiv); 

創(chuàng)建提示div的內容部分

復制代碼代碼如下:

 
var $conDiv = createElement("div") 
.css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() }) 
.html(options.content) 
.appendTo($outDiv); 

創(chuàng)建關閉按鈕

復制代碼代碼如下:

 
var $clsBtn = createElement("img") 
.attr('src', 'del.gif') 
.css({ 'cursor': 'pointer', 'float': 'right' }) 
.click(close) 
.appendTo($titDiv); 

　　創(chuàng)建彈出框關閉事件：

復制代碼代碼如下:

 
function close() { 
$bgDiv.fadeOut(); 
$outDiv.fadeOut(); 
} 
} 
})(jQuery); 

　　要看到使用效果，在頁面script部分加入如下代碼即可(當然jQuery庫文件不可少啊，現在最新版是1.4.2，可以去官網http://www.jQuery.com下載)：

復制代碼代碼如下:

 
$(document).ready(function() { 
$.jDivAlert({ 
width: 300, 
height: 300 
}); 
}); 

　　貌似還有很多功能有待完善，哎。。繼續(xù)努力。。。
打包下載地址

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

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

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具