快捷導(dǎo)航

jMessageBox 基于jQuery的窗口插件

更新時(shí)間：2009年12月09日 20:48:51 作者：

在WinForm程序開發(fā)中，經(jīng)常用MessageBox彈出某些提示，功能雖簡(jiǎn)單但卻非常的實(shí)用！而在Web頁面中，瀏覽器也提供了Alert或Confirm等腳本語句用于彈出提示窗口

如下圖：

但是這些彈出來的窗口的樣式非常的單調(diào)無法設(shè)置，并且窗口標(biāo)題還根據(jù)不同的瀏覽器顯示不同的標(biāo)題內(nèi)容，非常的丑陋！對(duì)于高審美觀的現(xiàn)代人來說，就大打折扣了！

jQuery現(xiàn)在這么流行、這么火，但網(wǎng)上卻好像還是沒有提供類似于MessageBox的插件（或者只是我沒有找到而已），類似的模式窗口插件倒是有一大堆，但這都不是我想要的。沒現(xiàn)成的，就只好花點(diǎn)時(shí)間將我以前寫的基于我的個(gè)人JS框架的MessageBox移值過來，也就是本文的JMessageBox。

它的使用非常的簡(jiǎn)單 CSS + JS搭配使用。CSS是用于定制窗口的樣式（具體示例可參考文后的源碼包中的CSS樣式文件），JS則是負(fù)責(zé)調(diào)用，如下面示例：

示例1：簡(jiǎn)單調(diào)用

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

jQuery.jMessageBox.show('Hello word!');

代碼很簡(jiǎn)單吧？是不是找到了MessageBox中的感覺？但這個(gè)方法你無法控制標(biāo)題的內(nèi)容（其實(shí)可以通過改變配置參數(shù)來改變標(biāo)題）和“是”那個(gè)按鈕的動(dòng)作，點(diǎn)擊它就只是關(guān)閉窗口。

效果圖：

示例2：普通調(diào)用

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

jQuery.jMessageBox.show('系統(tǒng)消息', '您好!');

代碼也很簡(jiǎn)單，不是嗎？雖然可以改變標(biāo)題的內(nèi)容了，但這個(gè)方法你還是無法控制“是”那個(gè)按鈕的動(dòng)作，點(diǎn)擊它就只是關(guān)閉窗口。

效果圖：

示例3：復(fù)雜調(diào)用

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

 
jQuery.jMessageBox.show({ 
width : 350, 
title : '系統(tǒng)消息', 
message : '是否繼續(xù)下一步操作?', 
yesButton : { 
click : function(){ 
jQuery.jMessageBox.hide(); 
} 
}, 
cancelButton : { 
click : function(){ 
jQuery.jMessageBox.hide(); 
} 
}, 
bottom : { 
text : '說明: 如果你想繼續(xù)操作,請(qǐng)點(diǎn)擊"是"!', 
click : function(){ 
alert('你在點(diǎn)我嗎？'); 
} 
} 
}); 

在本示例中，我們定義了：窗口的寬度；標(biāo)題；內(nèi)容；yes按鈕的動(dòng)作；no按鈕的動(dòng)作；cancel按鈕的動(dòng)作；底部的文字說明與動(dòng)作。

效果圖：

JMessageBox的參數(shù)定義
1、全局配置參數(shù)：jQuery.jMessageBox.setttings
　注：全局配置參數(shù)只在第一次調(diào)用show方法之前或調(diào)用簡(jiǎn)單的show方法時(shí)采用！
width : 設(shè)置窗口的默認(rèn)寬度，默認(rèn)值是350。
title : 設(shè)置窗口的默認(rèn)標(biāo)題，默認(rèn)值為空。
bottomText : 設(shè)置窗口底部文字說明，默認(rèn)值為空。
yesButtonText : yes按鈕的文字，默認(rèn)值為空。
noButtonText : no按鈕的文字，默認(rèn)值為空。
cancelButtonText : cancel按鈕的文字，默認(rèn)值為空。

2、窗口配置參數(shù)。
窗口配置參數(shù)可在每次調(diào)用show方法(如上面的示例3）時(shí)傳入，用于配置顯示的窗口樣式。
width : 設(shè)置窗口的寬度，如果不設(shè)置將取全局配置參數(shù)中的width值。
height ：設(shè)置窗口的高度，如果不設(shè)置將設(shè)置為自動(dòng)（推薦）
top ：設(shè)置窗口顯示時(shí)的上邊距距離。
left ：設(shè)置窗口顯示時(shí)的左邊距距離。
注意：top與left值必須同時(shí)設(shè)置或不設(shè)置。如果不設(shè)置（推薦），則默認(rèn)固定居中顯示！
title ：設(shè)置窗口的標(biāo)題，如果不設(shè)置將取全局配置參數(shù)中的title值。而如果值設(shè)置為null或空字符串，將隱藏標(biāo)題欄！
message ：設(shè)置窗口需要顯示的內(nèi)容。如果不設(shè)置，或設(shè)置為null或空字符串，則隱藏內(nèi)容區(qū)。
yesButton ：設(shè)置窗口中的yes按鈕的文字(text)和點(diǎn)擊后處理的事件(click)。如果不設(shè)置，窗口不顯示yes按鈕。
noButton ：設(shè)置窗口中的no按鈕的文字(text)和點(diǎn)擊后處理的事件(click)。如果不設(shè)置，窗口不顯示no按鈕。
cancelButton ：設(shè)置窗口中的cancel按鈕的文字(text)和點(diǎn)擊后處理的事件(click)。如果不設(shè)置，窗口不顯示cancel按鈕。
bottom ：設(shè)置窗口底部文字欄的描述文字(text)和點(diǎn)擊后處理的事件(click)。如果不設(shè)置，窗口不顯示底部文字欄。

源碼與示例下載（示例中帶兩種風(fēng)格的窗口樣式）：
http://xiazai.jb51.net/200912/yuanma/jmessagebox.rar