jquery插件擴展默認值問題

Question

這是我的第一篇文章，所以我希望我發佈到正確的地方。

我想開發一個對話框/模式插件。這是我的第一個插件，我不確定我是否以正確的方式製作了它。我遇到的問題是$ .extend沒有更新設置對象。我有2個使用插件的元素。 #dialog元素不會擴展插件設置對象。我一直在嘗試了幾天的學習插件是如何工作的，並從它裏面:)

$("#icon_menu").Dialog(); 
$("#dialog").Dialog({closeable:false,clear_on_close : true}); 

任何幫助殺了我，你能不能給我將不勝感激

這裏是代碼

(function($){ 

$.fn.Dialog = function(method) {   

    var elem = this; 

    var settings = { 
     'mask'   : '#mask', 
     'closeable' : true, 
     'clear_on_close' : false 
    }; 

    var methods = { 
    init : function(options) { 

       if (options) { 
        $.extend(settings, options); 
       } 

       console.log(settings); 

      }, 
    open : function(options) { 

      var window_width = $(window).width(); 
      var window_height = $(window).height(); 

      var modal_height = ""; 
      var modal_width = ""; 

      var top = ""; 
      var left = ""; 

      if(!settings.set_width) 
      { 
       modal_width = elem.outerWidth(); 
      }else{ 
       modal_width = settings.set_width; 
      } 

      if(!settings.set_height) 
      { 
       modal_height = elem.outerHeight(); 
      }else{ 
       modal_height = settings.set_height; 
      } 

      if(!settings.set_y_pos) 
      { 
       top = (window_height-modal_height)/2; 
      }else{ 
       top = settings.set_y_pos; 
      } 

      if(!settings.set_x_pos) 
      { 
       left = (window_width-modal_width)/2; 
      }else{ 
       left = settings.set_x_pos; 
      } 

      elem.addClass('active').css({'top': top + 'px', 'left': left + 'px'}); 

      $(settings.mask).css({ 'display' : 'block', opacity : 0}).fadeTo(500,0.8); 

      elem.css({ 'display' : 'block', opacity : 0}).fadeTo(500,1); 

       if(settings.closeable){$(settings.mask).bind('click.Dialog', methods.close);} 

       $(window).bind('scroll.Dialog', methods.reposition);    

    }, 
    open_ajax : function(options) 
    { 

     $.get(options.page, function(data){ 
      elem.html(data); 
      methods.open(); 
     });//$.get("sign_in.html", 

    }, 
    close : function(options) { 

       $(settings.mask).fadeOut(500); 

       elem.fadeOut(500); 

       //alert(settings.clear_on_close) 

       console.log(settings.clear_on_close) 

       if(settings.clear_on_close) 
       { 

        elem.html(""); 

       } 

       $(window).unbind('scroll.Dialog'); 
       $(settings.mask).unbind('click.Dialog'); 


    }, 
    reposition : function(options) 
    { 



      $(settings.mask).css({"marginTop": ($(window).scrollTop()) + "px"}); 
      elem.stop().animate({"marginTop": ($(window).scrollTop()) + "px"},1000); 


    } 

    }; 


    if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.tooltip'); 
    }  

    }; 

})(jQuery); 

Answer 1

問題是你的插件有一個內部狀態。每當你在一個對象上調用對話方法時，都會創建一個新狀態 - 舊狀態從不被引用或保存。

閱讀本教程中的數據部分了解如何存儲狀態更多的想法在函數調用：http://docs.jquery.com/Plugins/Authoring#Data

Answer 2

這是我通常使用的模式。請注意，我在我的插件代碼中定義它們之後直接應用默認值。我不是100％，我的模式也是正確的。但它確實工作。

(function($) { 
$.fn.extend({ 

    dropList: function(options) { 

     var defaults = { 
      url: '', 
      sortable: false, 
      hoverClass: 'ui-state-highlight', 
      rowSelected: function() { 
      }, 
      rowDblClicked: function() { 
      }, 
      onDrop: function(ui) { 
      } 
     }; 

     var options = $.extend(defaults, options); 

     return this.each(function() { 
      //this is where I act on the selected element 
     } 
    } 
}); })(jQuery) 

Answer 3

這是創建一個jQuery插件，一個夢幻般的資源：

http://jqueryboilerplate.com/