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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
js实现倒计时关键代码
May 05 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
Javascript如何实现扩充基本类型
Aug 26 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调用三种数据库的方法(2)
2006/10/09 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
npm scripts 使用指南详解
2018/10/08 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
详解Python字典小结
2018/10/20 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
怎么写好自荐信
2013/10/30 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
信息技术培训感言
2014/03/06 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技