汇盛国际:jQueryUI的Dialog的简单封装

时间: 作者:者然

  

[jQueryUI,Dialog]jQueryUI的Dialog的简单封装

  写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙。思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见。

  
  
DialogHelper的源代码如下:  
  
代码如下:

  
//--对话框辅助对象-begin  
//现在这个对象只是简单的封装(未来可能会复杂些)。

  
//其作用就是简化jQuery UI的dialog的的调用方式,不在需要改动独立的DOM结构,参数传递方式更直接。

  
DialogHelper = function() {  
var m_title = ""; //设置标题  
var m_msg = ""; //设置消息正文  
var m_btns = null; //设置按钮  
this.dlgDiv = $("

");//这部分可根据情况自定义  
//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();  
});  
});  

  
代码打包下载

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际