Heim > Web-Frontend > js-Tutorial > Hauptteil

jQueryUI的Dialog的简单封装_jquery

WBOY
Freigeben: 2016-05-16 18:25:30
Original
1122 Leute haben es durchsucht

写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙。思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见。

DialogHelper的源代码如下:

复制代码 代码如下:

//--对话框辅助对象-begin
//现在这个对象只是简单的封装(未来可能会复杂些)。
//其作用就是简化jQuery UI的dialog的的调用方式,不在需要改动独立的DOM结构,参数传递方式更直接。
DialogHelper = function() {
var m_title = ""; //设置标题
var m_msg = ""; //设置消息正文
var m_btns = null; //设置按钮
this.dlgDiv = $("

");//这部分可根据情况自定义
//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
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage