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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
详解vue express启动数据服务
2017/07/05 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Django中template for如何使用方法
2021/01/31 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
高中毕业自我评价
2014/02/08 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
党员个人剖析材料
2014/09/30 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年统战工作总结
2015/05/19 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫