jQueryUI的Dialog的简单封装
更新时间:2010年06月07日 22:21:20 作者:
这几天在做一个交互的原型,第一次大量采用jQueryUI,确实非常方便好用,其中一些功能点用到了弹出确认提示框,看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭
写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的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.jb51.net/201006/yuanma/jQueryUI_DialogDemo.rar
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.jb51.net/201006/yuanma/jQueryUI_DialogDemo.rar
您可能感兴趣的文章:
- jQuery UI库中dialog对话框功能使用全解析
- 浅析JQuery UI Dialog的样式设置问题
- jQuery UI Dialog 创建友好的弹出对话框实现代码
- jquery ui dialog ie8出现滚动条的解决方法
- jquery表格datatables实例解析 直接加载和延迟加载
- jQuery插件dataTables添加序号列的方法
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
- jQuery DataTables插件自定义Ajax分页实例解析
- jQuery表格插件datatables用法总结
- jQuery dataTables与jQuery UI 对话框dialog的使用教程
相关文章
详解jquery validate实现表单验证 (正则表达式)
本篇文章主要介绍了jquery validate实现表单验证 (正则表达式),用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈。有兴趣的可以了解一下。2017-01-01
浅谈jQuery中的eq()与DOM中element.[]的区别
下面小编就为大家带来一篇浅谈jQuery中的eq()与DOM中element.[]的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
从这节开始,我们开始学习如何在ASP.NET控件中使用jQuery validation 插件,首先要用它,必须先了解它有什么用2012-02-02
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
这篇文章主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下2018-07-07
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
这篇文章主要介绍了jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法,涉及jQuery中load方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03


最新评论