jQueryUI的Dialog的简单封装


Posted in Javascript onJune 07, 2010

写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的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(); 
}); 
});

代码打包下载 http://xiazai.3water.com/201006/yuanma/jQueryUI_DialogDemo.rar
Javascript 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
JavaScript数组方法总结分析
May 06 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 #Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 #Javascript
jquery 注意事项与常用语法小结
Jun 07 #Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 #Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 #Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 #Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 #Javascript
You might like
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
python获取标准北京时间的方法
2015/03/24 Python
Python reduce()函数的用法小结
2017/11/15 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python中entry用法讲解
2020/12/04 Python
python制作抽奖程序代码详解
2021/01/15 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
几个常见的软件测试问题
2016/09/07 面试题
《赶海》教学反思
2014/04/20 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
廉政承诺书2015
2015/04/28 职场文书