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

boxls 2010-07-11

展开全文

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

这几天在做一个交互的原型，第一次大量采用jQueryUI，确实非常方便好用，其中一些功能点用到了弹出确认提示框，看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。

DialogHelper的源代码如下：

    
            01
            //--对话框辅助对象-begin 
        
            02
            //现在这个对象只是简单的封装(未来可能会复杂些)。 
        
            03
            //其作用就是简化jQuery UI的dialog的的调用方式，不在需要改动独立的DOM结构，参数传递方式更直接。 
        
            04
            DialogHelper = function() { 
        
            05
             
            06
                var m_title = ""; //设置标题 
        
            07
                var m_msg = ""; //设置消息正文 
        
            08
                var m_btns = null; //设置按钮 
        
            09
                this.dlgDiv = $("<div><p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin: 0 7px 20px 0;\"></span></p></div>");//这部分可根据情况自定义 
        
            10
             
            11
                //todo:图标、高度、宽度、弹出模式等都应该可以设置。 
        
            12
                this.set_Title = function(val) { 
        
            13
                    this.m_title = val; 
        
            14
                } 
        
            15
                this.get_Title = function() { 
        
            16
                    return this.m_title; 
        
            17
                } 
        
            18
                this.set_Msg = function(val) { 
        
            19
                    this.m_msg = val; 
        
            20
                } 
        
            21
                this.get_Msg = function() { 
        
            22
                    return this.m_msg; 
        
            23
                } 
        
            24
                this.set_Buttons = function(val) { 
        
            25
                    this.m_btns = val; 
        
            26
                } 
        
            27
                this.get_Buttons = function() { 
        
            28
                    return this.m_btns; 
        
            29
                } 
        
            30
             
            31
                this.open = function() { 
        
            32
                    $dlg = this.dlgDiv.clone(); //这个克隆很重要,否则反复添加正文。 
        
            33
                    $dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() + this.get_Msg()); //增加自定义消息 
        
            34
             
            35
                    $dlg.dialog({ 
        
            36
                        autoOpen: true, 
        
            37
                        show: 'blind', 
        
            38
                        hide: 'explode', 
        
            39
                        position: 'center', 
        
            40
                        height: 260, 
        
            41
                        width: 460, 
        
            42
                        modal: true, 
        
            43
                        title: this.get_Title(), 
        
            44
                        buttons: this.get_Buttons() 
        
            45
                    }); 
        
            46
                } 
        
            47
                //todo:考虑是否有内存泄露的可能     
        
            48
            } 
        
            49
            //--对话框辅助对象-end

使用DialogHelper辅助类的代码如下：

    
            01
            $(document).ready(function() { 
        
            02
                $('#opener').click(function() { 
        
            03
                    //初始化一个辅助对象，这个对象可以作为全局对象只创建一次后反复使用更好！ 
        
            04
                    dlgHelper = new DialogHelper(); 
        
            05
             
            06
                    //设置个性化信息 
        
            07
                    dlgHelper.set_Title("确认要删除现有项目吗？"); 
        
            08
                    dlgHelper.set_Msg("执行这个操作，原来的项目将被删除，你确认要这么做吗？"); 
        
            09
                    dlgHelper.set_Buttons({ 
        
            10
                        '确定': function(ev) { 
        
            11
                            //这里可以调用其他公共方法。 
        
            12
                            $(this).dialog('close'); 
        
            13
                        }, 
        
            14
                        '取消': function() { 
        
            15
                            //这里可以调用其他公共方法。 
        
            16
                            $(this).dialog('close'); 
        
            17
                        } 
        
            18
                    }); 
        
            19
             
            20
                    //打开窗体 
        
            21
                    dlgHelper.open(); 
        
            22
             
            23
                }); 
        
            24
            });

下载源代码：

作者：Justin
出处：http://justinw.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。