打包下載
寫出的代碼有點擰巴，需要再封裝一下！於是就有了下面這個簡單的DialogHelper輔助類，因為這篇文章分享的重點是思路，所以目前版本的代碼也還非常粗糙。思路對了，後續再封裝成什麼樣都不過是形式而已，希望這個思路能給大家點啟迪，同時歡迎大家開拓思維，提出更好的改進意見。
DialogHelper的源代碼如下：
代碼如下:
//--對話框輔助對象-begin
//現在這個對象只是簡單的封裝(未來可能會復雜些)。
//其作用就是簡化jQuery UI的dialog的的調用方式，不在需要改動獨立的DOM結構，參數傳遞方式更直接。
DialogHelper = function() {
var m_title = ""; //設置標題
var m_msg = ""; //設置消息正文
var m_btns = null; //設置按鈕
this.dlgDiv = $("<div><p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin: 0 7px 20px 0;\"></span></p></div>");//這部分可根據情況自定義
//todo:圖標、高度、寬度、彈出模式等都應該可以設置。
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(); //這個克隆很重要,否則反復添加正文。
$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:考慮是否有內存洩露的可能
}
//--對話框輔助對象-end
使用DialogHelper輔助類的代碼如下：
代碼如下:
$(document).ready(function() {
$('#opener').click(function() {
//初始化一個輔助對象，這個對象可以作為全局對象只創建一次後反復使用更好！
dlgHelper = new DialogHelper();
//設置個性化信息
dlgHelper.set_Title("確認要刪除現有項目嗎？");
dlgHelper.set_Msg("執行這個操作，原來的項目將被刪除，你確認要這麼做嗎？");
dlgHelper.set_Buttons({
'確定': function(ev) {
//這裡可以調用其他公共方法。
$(this).dialog('close');
},
'取消': function() {
//這裡可以調用其他公共方法。
$(this).dialog('close');
}
});
//打開窗體
dlgHelper.open();
});
});