Question

我想通过一个例子来问这个问题。

我经常需要一个在多个页面上使用的类似外观的对话框。我目前的工作方式如下所示，可在http://jsbin.com/aSOdOdiG/1/处找到。基本步骤是：

使用JavaScript（我在此示例中执行）向主体添加DIV，或者直接将HTML输出到页面。
将jQueryUI Dialog插件应用于该DIV。
将jQuery click事件添加到所需的目标元素，以将某些特定消息存储到jQuery数据中，然后打开该对话框。

现在，问题。如何将插件封装在另一个插件中？或者换句话说，如何创建一个名为“myMessageDialog”的插件，它提供相同的功能，如下所示配置并使用现有的jQueryUI对话框插件？

$('#popup1').myMessageDialog('Hello, this is my custom message for popup1.')

我目前是怎么做的.....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Testing</title>  
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <style type="text/css">
            div.hide-title-bar .ui-dialog-titlebar {display:none}
        </style> 
        <script type="text/javascript"> 
            $(function(){
                $('body').append('<div id="dialog-popup" title=""></div>');
                $("#dialog-popup").dialog({
                    autoOpen    : false,
                    resizable   : false,
                    height      : 300,
                    width       : 440, 
                    dialogClass : 'hide-title-bar',
                    modal       : true,
                    open: function(event, ui){
                        var $t=$(this);
                        $t.html($t.data('message'));
                    },
                    buttons: [
                        {
                            text     : 'CLOSE',
                            "class"  : 'gray',
                            click    : function() {$(this).dialog("close");}
                        }
                    ]
                });

                $('#popup1').click(function(){$("#dialog-popup").data('message','Hello, this is my custom message for popup1.').dialog("open");})

                $('#popup2').click(function(){$("#dialog-popup").data('message','Hello, again.  This is my custom message for popup2.').dialog("open");})

            });
        </script>
    </head>

    <body>
        <button id="popup1">popup1</button>
        <button id="popup2">popup2</button>
    </body> 
</html>

将插件封装在另一个插件中

0 个答案: