快捷導(dǎo)航

jQueryUI的Dialog的簡(jiǎn)單封裝

更新時(shí)間：2010年06月07日 22:21:20 作者：

這幾天在做一個(gè)交互的原型，第一次大量采用jQueryUI，確實(shí)非常方便好用，其中一些功能點(diǎn)用到了彈出確認(rèn)提示框，看了jQueryUI Dialog的例子，效果還不錯(cuò)，就是用起來(lái)有點(diǎn)兒別扭

寫(xiě)出的代碼有點(diǎn)擰巴，需要再封裝一下！于是就有了下面這個(gè)簡(jiǎn)單的DialogHelper輔助類，因?yàn)檫@篇文章分享的重點(diǎn)是思路，所以目前版本的代碼也還非常粗糙。思路對(duì)了，后續(xù)再封裝成什么樣都不過(guò)是形式而已，希望這個(gè)思路能給大家點(diǎn)啟迪，同時(shí)歡迎大家開(kāi)拓思維，提出更好的改進(jìn)意見(jiàn)。

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'); 
} 
}); 
//打開(kāi)窗體 
dlgHelper.open(); 
}); 
}); 