[jQuery]关于jQueryUI的Dialog的简单封装

这几天在做一个交互的原型，第一次大量采用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();
 
    });
});