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对象的函数
Dec 22 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
JS定时器实例详细分析
Oct 11 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
React 高阶组件入门介绍
Jan 11 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类
2006/07/15 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python二维键值数组生成转json的例子
2019/12/06 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
用python对oracle进行简单性能测试
2020/12/05 Python
在线服装零售商:SheIn
2016/07/22 全球购物
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
六查六看剖析材料
2014/02/15 职场文书
人事专员工作职责
2014/02/22 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL