快捷導(dǎo)航

學(xué)習(xí)從實(shí)踐開始之jQuery插件開發(fā) 對話框插件開發(fā)

更新時(shí)間：2012年04月26日 00:39:22 作者：

之所以寫下這篇文章，是想將我的想法分享給大家；對于初學(xué)者，我希望他能從這篇文章中獲取對他有用的東西，對于經(jīng)驗(yàn)豐富的開發(fā)者，我希望他能指出我的不足，給我更多的意見和建議；目的就是共同進(jìn)步

前言：
　　之所以寫下這篇文章，是想將我的想法分享給大家；對于初學(xué)者，我希望他能從這篇文章中獲取對他有用的東西，對于經(jīng)驗(yàn)豐富的開發(fā)者，我希望他能指出我的不足，給我更多的意見和建議；目的就是共同進(jìn)步。

一.要做什么插件？
　　我想要實(shí)現(xiàn)一個(gè)插件可以取代瀏覽器默認(rèn)的彈出對話框或窗體，就是我們通過調(diào)用window.alert，window.confirm，window.prompt這些方法所彈出的網(wǎng)頁對話框，通過調(diào)用window.open，window.showModalDialog，window.showModelessDialog 所彈出的窗體。

　　之所以這樣做是因?yàn)椋簽g覽器默認(rèn)的對話框功能簡單，不能滿足更多需要；用戶體驗(yàn)差?，F(xiàn)代瀏覽器很多都會默認(rèn)阻止彈出窗體（可能是因?yàn)樵谝郧皬棾鰪V告太猖獗的原因吧，還記得03,40年那陣，看個(gè)XX網(wǎng)站彈了一堆窗口，關(guān)都關(guān)不過來，瀏覽器都弄死了，甚至電腦都當(dāng)機(jī)了。）。

二.想要的效果是什么？
　　關(guān)于對話框插件，我們都知道在不同的瀏覽器里顯示樣式是有一些分別的，但基本上布局結(jié)構(gòu)都一樣。我們的插件想要的效果是：在任何瀏覽器里顯示的樣式和布局結(jié)構(gòu)都保持一致，位于瀏覽器正中央（這樣用戶能夠第一時(shí)間看到）。
　　彈出窗體在實(shí)現(xiàn)上與對話框類似（我是指我們要開發(fā)的插件，并非是說瀏覽器默認(rèn)的實(shí)現(xiàn)）。

三.設(shè)計(jì)一下功能
我們看著圖片一步步來說：

1、遮擋頁面內(nèi)容（圖片上灰色半透明部分），透明度可以設(shè)置（不透明0-1完全透明），這樣的好處是在用戶關(guān)閉對話框之前不能對頁面進(jìn)行操作。
2、對話框居中顯示，對話框大小可以設(shè)置（長寬）。
3、圖中(1)和(2)為對話框圖標(biāo)，都可以設(shè)置。
4、對話框標(biāo)題可以內(nèi)容都可以設(shè)置。
5、可以不顯示關(guān)閉按鈕(x)。
6、底部按鈕可以為0個(gè)或多個(gè)，并且可以為其設(shè)置回調(diào)函數(shù)。

四.如何實(shí)現(xiàn)功能？
　　1.使用CSS樣式控制外觀。
　　　　*為了避免CSS命名沖突，我們需要為插件確定一個(gè)名字空間，其下所有樣式都在該命名空間下。
　　2.遮擋所有內(nèi)容
　　　　*我們在CSS里設(shè)置基本樣式。

復(fù)制代碼代碼如下:

 
position:absolute; 
left:0; 
top:0; 
background-color:#000; 
z-index:99999; 

*這里需要注意的是z-index的值有一個(gè)安全范圍，來自微軟的說明“The maximum value is 2147483647 for IE6, 7 and 8.But it is 16777271 for Safari 3, so a safe cross browser maximum value is 16777271.”大意是說ie6,7,8支持的最大值是2147483647，但是Safari 3是16777271，所以保險(xiǎn)起見不要超過16777271。

　　　　*用js代碼設(shè)置其寬和高，我們通過$(document).width()獲取頁面寬度，通過$(document).height()獲取頁面高度度。
3.對話框居中顯示　

　　　　對于對話框居中顯示，有兩種方式實(shí)現(xiàn)。
　　　　一是通過CSS實(shí)現(xiàn)。
　　　　　　position:absolute;如果頁面有滾動條的時(shí)，當(dāng)滾動條滾動時(shí)，對話框也會移動。
　　　　　　position:fixed;比較理想，無論如何滾動，對話框始終停留在頁面居中位置，唯一的缺點(diǎn)就是不支持IE6（網(wǎng)上有關(guān)于如果兼容IE6的方法，感興趣的朋友可以自己去實(shí)現(xiàn)）。
　　　　二是通過js腳本控制。
　　　　　　通過計(jì)算頁面長寬來定位，當(dāng)改變頁面大小時(shí)，對話框位置不會改變，效果不理想。（當(dāng)然了，可以通過監(jiān)聽頁面發(fā)生改變時(shí)，自動調(diào)整位置，但是實(shí)現(xiàn)起來比較麻煩，感興趣的朋友可以自己去嘗試）

五.瀏覽器兼容

　　瀏覽器兼容什么的最討厭了，不過話說回來最理想的效果當(dāng)然是能夠兼容所有瀏覽器，事實(shí)上如果我們花更多的時(shí)間也確實(shí)可以做到兼容所有瀏覽器。但是這樣做值得嗎？如果問頁面設(shè)計(jì)人員最討厭的瀏覽器是什么？我想大多數(shù)都會回答是IE6，是的，這個(gè)曾經(jīng)風(fēng)靡全球，霸占全球超過90%用戶電腦的瀏覽器，我們曾經(jīng)覺得它很好，好吧，也許我該說不錯(cuò)，又或者還可以；不管怎么樣，它曾經(jīng)確實(shí)是全球最受歡迎的瀏覽器。但是現(xiàn)在，它是我們開發(fā)者眼中最不受歡迎的瀏覽器，在全球平均使用不超過5%的情況下，在天朝卻仍然超過20%的用戶在使用它（來自http://www.ie6countdown.com/的統(tǒng)計(jì)），這是為什么呢？同樣一個(gè)功能如果要做到兼容IE6這些老版本的瀏覽器，我們大概要多花三分之一甚至更多的時(shí)間，生命是短暫的，同志們，為何不把有限的時(shí)間拿去做更有意義的事情呢？殺死IE6從我做起！

六.功能實(shí)現(xiàn)和調(diào)用

CSS部分

復(fù)制代碼代碼如下:

 
<style type="text/css"> 

/*為了避免命名沖突，我們將該插件所有樣式都放在該類之下*/ 
.ctcx-dialog 
{ 
font-size:14px; 
} 
.ctcx-dialog .mark /*遮罩層樣式*/ 
{ 
position:absolute; 
left:0; 
top:0; 
background-color:#000; 
z-index:99999; 
} 
.ctcx-dialog .dialog /*對話框樣式*/ 
{ 
position:fixed; 
left:50%; 
top:50%; 
background-color:#FFF; 
z-index:99999; 
border:2px solid #000; 
padding:2px; 
} 
.ctcx-dialog .dialog .bar /*對話框標(biāo)題欄*/ 
{ 
height:30px; 
background-color:#999; 
color:#FFF; 
} 
.ctcx-dialog .dialog .bar .icon /*對話框標(biāo)題欄圖標(biāo)*/ 
{ 
width:25px; 
height:30px; 
background-repeat:no-repeat; 
background-position:center; 
display:inline-block; 
} 
.ctcx-dialog .dialog .bar .title /*對話框標(biāo)題欄標(biāo)題*/ 
{ 
width:340px; 
height:30px; 
line-height:30px; 
overflow:hidden; 
display:inline-block; 
vertical-align:top; 
font-weight:bold; 
} 
.ctcx-dialog .dialog .bar .close /*對話框標(biāo)題欄關(guān)閉按鈕*/ 
{ 
width:20px; 
height:30px; 
background-image:url(close.png); 
background-repeat:no-repeat; 
background-position:center; 
display:inline-block; 
cursor:pointer; 
} 
.ctcx-dialog .dialog .container /*對話框內(nèi)容容器*/ 
{ 
margin-top:5px; 
overflow:auto; 
} 
.ctcx-dialog .dialog .container .icon /*對話框內(nèi)容容器*/ 
{ 
background-image:url(icon-big.png); 
background-repeat:no-repeat; 
background-position:center; 
width:48px; 
height:48px; 
} 
.ctcx-dialog .dialog .container .content /*對話框內(nèi)容容器*/ 
{ 
position:relative; 
} 
.ctcx-dialog .dialog .buttons /*對話框按鈕欄*/ 
{ 
text-align:center; 
margin-top:5px; 
height:30px; 
position:relative; 
bottom:0px; 
} 
.ctcx-dialog .dialog .buttons a /*對話框按鈕*/ 
{ 
background-color:#DDD; 
color:#000; 
text-decoration: none; 
display:inline-block; 
padding:5px; 
} 
.ctcx-dialog .dialog .buttons a:hover /*對話框按鈕*/ 
{ 
background-color:#333; 
color:#FFF; 
} 
.ctcx-dialog .dialog .buttons a:active /*對話框按鈕*/{} 
</style> 

JS部分

復(fù)制代碼代碼如下:

 
(function ($) { 
$.alert = function (options) { 

if (typeof options === 'string') options = { content: options }; 
var opts = $.extend({}, $.alert.defaults, options); 

if (opts.content == null || opts.content.length == 0) return this; 

var me = $('<div></div>').addClass('ctcx-dialog').appendTo(document.body); 
var doc = $(document); 
$('<div class="mark"></div>').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me); 
var _dialog_ = $('<div class="dialog"></div>').css({ 
width: opts.width, 
height: opts.height, 
marginLeft: 0 - opts.width / 2, 
marginTop: 0 - opts.height / 2 
}).appendTo(me); 
var _bar_ = $('<div class="bar"></div>').appendTo(_dialog_); 

var _titleWidth_ = opts.width - 0; 
if (opts.icon != null) { 
$('<div class="icon"></div>').css('background-image', 'url(' + opts.icon + ')').appendTo(_bar_); 
_titleWidth_ -= 25; 
} 
if (opts.close) _titleWidth_ -= 20; 
$('<div class="title"></div>').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_); 
if (opts.close) { 
$('<div class="close"></div>').click(function () { 
me.remove(); 
}).appendTo(_bar_); 
} 

var _containerHeight_ = opts.height - 40; 
var _container_ = $('<div class="container"></div>').appendTo(_dialog_); 
var _contentCss_ = {}; 
if (opts.iconBig != null) { 
$('<div class="icon"></div>').css('background-image', 'url(' + opts.iconBig + ')').appendTo(_container_); 
_contentCss_.top = -48; 
_contentCss_.marginLeft = 48; 
} 
var _content_ = $('<div class="content"></div>').css(_contentCss_).html(opts.content).appendTo(_container_); 

if (opts.buttons != null && opts.buttons.length > 0) { 
_containerHeight_ -= 30; 
var _buttons_ = $('<div class="buttons"></div>').appendTo(_dialog_); 
$.each(opts.buttons, function (i, _button) { 
$('<a href="javascript:;">' + _button.text + '</a>').click(function () { 
_button.fn(me); 
}).appendTo(_buttons_); 
}) 
} 
_container_.css({ height: _containerHeight_ }); 

this.close = function () { 
me.remove(); 
} 

this.setContent = function (content) { 
_content_.html(content); 
} 

return this; 
} 
//設(shè)置默認(rèn)參數(shù) 
$.alert.defaults = { 
title: '信息提示', //對話框標(biāo)題 
content: null, //對話框內(nèi)容 
width: 200, //寬 
height: 100, //高 
opacity: 0.5, //透明度 
icon: null, //顯示在標(biāo)題前面的小圖標(biāo) 
iconBig: null, //顯示在內(nèi)容左側(cè)的大圖標(biāo) 
buttons: null, //按鈕集合[{text:'按鈕顯示文字',fn:回調(diào)函數(shù)(event)}],event = {} 
close: true//是否顯示關(guān)閉按鈕 
} 
})(jQuery); 

調(diào)用

復(fù)制代碼代碼如下:

 
$.alert({ 
title: '火星向你發(fā)出警告', //對話框標(biāo)題 
content: '我們是火星人，我們就要入侵地球了，你們準(zhǔn)備好了嗎？', //對話框內(nèi)容 
width: 300, //寬 
height: 150, //高 
opacity: 0.5, //透明度 
icon: 'icon.png', //顯示在標(biāo)題前面的小圖標(biāo) 
iconBig: 'icon-big.png', //顯示在內(nèi)容左側(cè)的大圖標(biāo) 
buttons: [{ text: '好怕怕', fn: function () { $.alert('我好怕怕呀')} }], //按鈕集合[{text:'按鈕顯示文字',fn:回調(diào)函數(shù)(event)}],event = {} 
close: true//是否顯示關(guān)閉按鈕 
}); 