套件還是有一些缺陷

例如呼叫兩個widget的時候，共用的mask應該要ID沒有序號

獨立的widget也不應該寫入self裡面...

範例 : http://ry.url.tw/wp/doc/a15.htm

<meta charset="utf-8">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/sys.css" rel="stylesheet" type="text/css">
<link href="css/ryDlog.css" rel="stylesheet" type="text/css">
<link href="css/btn.css" rel="stylesheet" type="text/css">
<link href="css/page.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/function.js"></script>
<script>
$(function()
{
        $('.ry-state-default').hover(
            function(){ $(this).addClass('ry-state-hover'); }, 
            function(){ $(this).removeClass('ry-state-hover'); }
        );
        $('.ry-state-default').click(function(){
            $(this).toggleClass('ry-state-active');
        });

}) ;

;(function ( $, W, D, undefined ) {
    var pg      = 'ryDlog' ;
    var pgType  = 'troops' ;  //影響如何用data存在元素中
    var logOn   = true ;

    var _ = (function()
    {
        return {
              init: (function()
            {

            })()
            , log: function()
            {
                if (logOn)
                {
                    console.log(arguments) ;
                }
            }
        } ;
    })() ;
    
    $[pg] = function() 
    {
        $[pg].args = Array.prototype.slice.call(arguments) ; 
        if ($[pg].args.length === 2)
        {
            if ($.isFunction( $[pg][ $[pg].args[0] ] ))
            {
                $[pg][ $[pg].args[0] ]( $[pg].args[1] ) ;
            }
            else
            {
                _.log('wrong method: ' + $[pg].args[0]) ;
            }
        }
        else if ($[pg].args.length === 1)
        {
            $[pg].mkSettings($[pg].args[0]) ;
            $[pg].init() ;
        }
        else
        {
            _.log('wrong method: ' + $[pg].args[0]) ;
        }
    } ;

    //內定值，不打算被覆蓋的。各物件有不同值的KEY，絕對不能放這，不然會被覆蓋。
    //因為JS物件 = 是連結的概念，而不是複製。
    var innerSettings = 
    {
          idPrefix: 'data-'+pg+'-'
        , idSuffix: '-id-'
        // 'data-'+pg+'-id-' + 'widget/mask' + '-id-' + number
        , actorsClass :
        {
              widget    : 'ryDlog-widget'
            , zone      : 'ryDlog-zone'
            , top       : 'ryDlog-top'
            , topTitle  : 'ryDlog-top-title'
            , topBtn    : 'ryDlog-top-btn'
            , content   : 'ryDlog-content'
            , footer    : 'ryDlog-footer'
            , footerBtn : 'ryDlog-footer-btn'
            , footerBar : 'ryDlog-footer-bar'
            , minuxBtn  : 'ry-icon-minus'
            , newwinBtn : 'ry-icon-newwin'
            , arrow4Btn : 'ry-icon-arrow-4'
            , closeBtn  : 'ry-icon-close'
            , mask      : 'ryDlog-mask'
        }
        , classList:
        {
              widget    : 'ryDlog-widget rouncConer'
            , zone      : 'ryDlog-zone rouncConer'
            , top       : 'ryDlog-top rouncConer-top'
            , topTitle  : 'ryDlog-top-title'
            , topBtn    : 'ryDlog-top-btn'
            , content   : 'ryDlog-content'
            , footer    : 'ryDlog-footer rouncConer-bottom'
            , footerBtn : 'ryDlog-footer-btn'
            , footerBar : 'ryDlog-footer-bar'            
            , minuxBtn  : 'ry-icon ry-icon-minus'
            , newwinBtn : 'ry-icon ry-icon-newwin'
            , arrow4Btn : 'ry-icon ry-icon-arrow-4'
            , closeBtn  : 'ry-icon ry-icon-close' 
            , mask      : 'ryDlog-mask ryPlugin-mask'
        }
        , buttons:
        {
              minuxBtn  : '<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-minus"></span></div>'
            , newwinBtn : '<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-newwin"></span></div>'
            , arrow4Btn : '<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-arrow-4"></span></div>'
            , closeBtn  : '<div class="ry-state-default ry-corner-all" ><span class="ry-icon ry-icon-close"></span></div>'
            , barBtn    : '<span class="ry-icon ry-icon-grip-diagonal-se ryDlog-resize-bar"></span>'
        }
        , tpl:
        {
            Dlogtpl     : '<div class="{0}">'+
                                '<div class="{1}">'+
                                    '<div class="{2}">'+
                                        '<div class="{3}"></div>'+
                                        '<div class="{4}"></div>'+
                                    '</div>'+
                                    '<div class="{5}"></div>'+
                                    '<div class="{6}">'+
                                        '<div class="{7}"></div>'+
                                        '<div class="{8}"></div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'  
        }
        
    }
    //預設值
    var defaults =
    {
        color: 'red'
    } ;
    //套件域，運算值。
    $[pg].settings = {} ;    
    
    $[pg].id = 1 ;
    $[pg].init = function()
    {
        $(document)[pg]() ;
    }
    
    $[pg].mkSettings = function(arg)
    {
        _.log('0籌備套件全域設定') ;

        //    運算值                  預設值  設定值  內定值
        $[pg].settings = $.extend({}, defaults, arg, innerSettings) ; 

        _.log($[pg].settings) ;
    }

    function Plugin(element)
    {  
        this.element = element ;
        this.ele$    = $(element) ;
        this.args    = Plugin.args ;
        //運算值
        this.settings = this.mkSettings() ;
        _.log(this.settings) ; 
        this.actors = {} ;
        this.init() ;
    }
    
    Plugin.prototype =
    {
          mkSettings: function()
        {
            var self = this ;
            //                  預設值    全域設定值      設定值        內定值
            return $.extend({}, defaults, $[pg].settings, self.args[0], innerSettings) ;
        }
        , init: function()
        {
            _.log('大初始') ;
            var self = this ;
            
            self.id = $[pg].id++ ;

            self.createDlog() ;
        }
        
        , mask: function()
        {
            _.log('mask') ;
            var self = this ;

            self.actors.maskId = self.settings.idPrefix + 'mask' + self.settings.idSuffix + self.id ;
            
            
            self.actors.mask = $('<div />')
                .attr('id', self.actors.maskId)
                .addClass(self.settings.classList.mask)
                .appendTo('body') ;
        }
        , maskResize: function()
        {
            _.log('maskResize') ;
            var self = this ;
            
            var tmp = {} ;
            tmp.width = $(document).outerWidth() ;
            tmp.height = $(document).outerHeight() ;          
            
            self.actors.mask
                .css(tmp) ;              
        }
        , createDlog: function()
        {
            _.log('createDlog') ;
            var self = this ;
            
            if ($('.'+self.settings.actorsClass.widget).size() == 0)
            {
                self.mask() ;
                self.maskResize() ;            
            }
            else
            {
                self.actors.mask = $('.'+self.settings.actorsClass.mask)
            }

            //make hero
            self.actors.widgetId = self.settings.idPrefix + 'widget' + self.settings.idSuffix + self.id ;

            self.actors.widget = $(
                innerSettings.tpl.Dlogtpl
                    .format(
                          self.settings.classList.widget
                        , self.settings.classList.zone
                        , self.settings.classList.top
                        , self.settings.classList.topTitle
                        , self.settings.classList.topBtn
                        , self.settings.classList.content
                        , self.settings.classList.footer
                        , self.settings.classList.footerBtn
                        , self.settings.classList.footerBar
                    )
            )
            .attr('id', self.actors.widgetId) 
            .find('.'+self.settings.actorsClass.topTitle)
                .html(self.settings.title)
                .end()
            .find('.'+self.settings.actorsClass.content)
                .html(self.settings.content)
                .end()
            .addClass('unblock') 
            .appendTo('body') ;

            self.addBtn() ;
          
        }
        , addBtn: function()
        {
            var self = this ;

            self.actors.widget
                .find('.'+self.settings.actorsClass.topBtn)
                .html
                (
                    self.settings.buttons.minuxBtn + 
                    '<span> </span>'+
                    self.settings.buttons.newwinBtn + 
                    '<span> </span>'+
                    self.settings.buttons.arrow4Btn + 
                    '<span> </span>'+
                    self.settings.buttons.closeBtn
                    
                )
                .end()
                .find('.'+self.settings.actorsClass.footerBar)
                .html
                (
                    self.settings.buttons.barBtn
                    
                )
                .end()
                
            self.putCenter() ;
            
        }
        , putCenter: function()
        {
            _.log('putCenter') ;
            var self = this ;
            var eleIn$ = self.actors.widget ;
            var eleOut$ = self.actors.mask ;
            var positionOut = eleOut$.position() ;
            
            var centerOut = 
            {
                  x: ( positionOut.left + (eleOut$.outerWidth() / 2) ) >> 0
                , y: ( positionOut.top + (eleOut$.outerHeight() / 2) ) >> 0
            } ;
            var offsetIn = eleIn$.offset() ;

            eleIn$
                .css(
                {
                      left: ( centerOut.x - (eleIn$.outerWidth() / 2) ) >> 0
                    , top: ( centerOut.y - (eleIn$.outerHeight() / 2) ) >> 0
                }).show() ;
                
            self.actors.widget
                .removeClass('unblock') ;
            //self.bind() ;
        }        
        , bind: function()
        {
            var self = this ;

            

        }
        //, widgetRm: function()
        //{
        //    var self = this ;
        //   
        //    self.actors.widget.remove() ;
        //    self.actors.mask.remove() ;
        //}
    }    
    
    $.fn[pg] = function() 
    {   
        //處裡套件全域設定
        Plugin.args = Array.prototype.slice.call(arguments) ;
        return this.each(function() {
            if (pgType === 'troops')
            {
                $.data(this, 'numPg', innerSettings.id);
                
                if ($.isArray($.data(this, 'plugin_' + pg))  )
                {
                    $.data(this, 'plugin_' + pg).push( new Plugin(this) ) ;
                }
                else
                {
                    $.data(this, 'plugin_' + pg, [ new Plugin(this) ]) ;
                }
            }
            else
            {
                if (!$.data(this, 'plugin_' + pg)) 
                {
                    $.data(this, 'plugin_' + pg, new Plugin(this));
                }
                else if ($.isFunction(Plugin.prototype[ Plugin.args[0] ]))
                {
                    $.data(this, 'plugin_' + pg)[ Plugin.args[0] ]();  //吃參數
                }
                else
                {
                    console.log('wrong way to use this method:' + Plugin.args[0]) ;
                }            
            }
        });
    }
    
    $(document)
        .on('click', '.'+innerSettings.actorsClass.closeBtn, function()
        {        
            var widget = $(this).closest('.'+innerSettings.actorsClass.widget) ;
            
            widget.remove() ;
            
            if ($('.'+innerSettings.actorsClass.widget).size() == 0)
            {
                $('.'+innerSettings.actorsClass.mask).remove() ;
            }
        })
        .on('mousedown', '.'+innerSettings.actorsClass.top, function(orgiE)
        {          
            var top$ = $(this) ;
            var widget$ = top$.closest('.'+innerSettings.actorsClass.widget) ;
            var _position = widget$.position() ;
            var orgiLeft = _position.left ;
            var orgiTop = _position.top ;
            
            top$
                .mousemove(function(moveE)
                {                  
                    widget$
                        .css(
                        {
                              left: orgiLeft + ( moveE.clientX - orgiE.clientX )
                            , top: orgiTop + (moveE.clientY - orgiE.clientY )
                        }) ;
                }) ;
        })
        .on('mouseup', '.'+innerSettings.actorsClass.top, function(e)
        {
            $(this).off('mousemove') ;
            
            console.log($(document).data()) ;
            //self.maskResize() ;
        })
        .on('mouseleave', '.'+innerSettings.actorsClass.top, function(e)
        {
            $(this).off('mousemove') ;
            //self.maskResize() ;
        }) ;         
})( jQuery, window, document );

$(function()
{

    $.ryDlog(
    {
          title: 'title'
        , content: 'my content'
    }) ;

    $.ryDlog(
    {
          title: 'title2'
        , content: 'my content2'
    }) ;

}) ;

</script>
<style>

</style>