jQueryUI的Dialog的简单封装
jQueryUI的Dialog的简单封装
发布时间:2016-12-30 来源:查字典编辑
摘要:写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码...

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

DialogHelper的源代码如下:

复制代码 代码如下:

//--对话框辅助对象-begin

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

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

DialogHelper = function() {

var m_title = ""; //设置标题

var m_msg = ""; //设置消息正文

var m_btns = null; //设置按钮

this.dlgDiv = $("<div><p><span></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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类