|
|
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();
});
});
代碼打包下載 http://xiazai.jb51.NET/201006/yuanma/jQueryUI_DialogDemo.rar
JavaScript技術：jQueryUI的Dialog的簡單封裝，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
