|
|
DialogHelper的源代碼如下：
復(fù)制代碼 代碼如下:
//--對(duì)話框輔助對(duì)象-begin
//現(xiàn)在這個(gè)對(duì)象只是簡(jiǎn)單的封裝(未來(lái)可能會(huì)復(fù)雜些)。
//其作用就是簡(jiǎn)化jQuery UI的dialog的的調(diào)用方式，不在需要改動(dòng)獨(dú)立的DOM結(jié)構(gòu)，參數(shù)傳遞方式更直接。
DialogHelper = function() {
var m_title = ""; //設(shè)置標(biāo)題
var m_msg = ""; //設(shè)置消息正文
var m_btns = null; //設(shè)置按鈕
this.dlgDiv = $("<div><p><span class=/"ui-icon ui-icon-alert/" style=/"float: left; margin: 0 7px 20px 0;/"></span></p></div>");//這部分可根據(jù)情況自定義
//todo:圖標(biāo)、高度、寬度、彈出模式等都應(yīng)該可以設(shè)置。
this.set_Title = function(val) {
this.m_title = val;
}
this.get_Title = function() {
return this.m_title;
}
this.set_Msg = function(val) {
this.m_msg = val;
}
this.get_Msg = function() {
return this.m_msg;
}
this.set_Buttons = function(val) {
this.m_btns = val;
}
this.get_Buttons = function() {
return this.m_btns;
}
this.open = function() {
$dlg = this.dlgDiv.clone(); //這個(gè)克隆很重要,否則反復(fù)添加正文。
$dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() + this.get_Msg()); //增加自定義消息
$dlg.dialog({
autoOpen: true,
show: 'blind',
hide: 'explode',
position: 'center',
height: 260,
width: 460,
modal: true,
title: this.get_Title(),
buttons: this.get_Buttons()
});
}
//todo:考慮是否有內(nèi)存泄露的可能
}
//--對(duì)話框輔助對(duì)象-end
使用DialogHelper輔助類的代碼如下：
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$('#opener').click(function() {
//初始化一個(gè)輔助對(duì)象，這個(gè)對(duì)象可以作為全局對(duì)象只創(chuàng)建一次后反復(fù)使用更好！
dlgHelper = new DialogHelper();
//設(shè)置個(gè)性化信息
dlgHelper.set_Title("確認(rèn)要?jiǎng)h除現(xiàn)有項(xiàng)目嗎？");
dlgHelper.set_Msg("執(zhí)行這個(gè)操作，原來(lái)的項(xiàng)目將被刪除，你確認(rèn)要這么做嗎？");
dlgHelper.set_Buttons({
'確定': function(ev) {
//這里可以調(diào)用其他公共方法。
$(this).dialog('close');
},
'取消': function() {
//這里可以調(diào)用其他公共方法。
$(this).dialog('close');
}
});
//打開窗體
dlgHelper.open();
});
});
代碼打包下載 http://xiazai.jb51.NET/201006/yuanma/jQueryUI_DialogDemo.rar
JavaScript技術(shù)：jQueryUI的Dialog的簡(jiǎn)單封裝，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
