jquery extension étendre défaut problème

Question

c'est mon premier poste, donc j'espère que je poste au bon endroit. J'essaye de développer un dialogue/module modal. C'est mon premier plugin et je ne suis pas sûr si je l'ai produit correctement. Le problème que je rencontre est que $ .extend ne met pas à jour l'objet settings. J'ai 2 éléments utilisant le plugin. l'élément #dialog n'étend pas l'objet de paramètres plugins. J'ai essayé pendant deux ou trois jours pour apprendre comment fonctionnent les plugins et son me tuer de l'intérieur :)

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

Toute aide que vous pouvez me donner serait grandement apprécié

est le code ici

(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

Le problème est que votre plugin a un état interne. Chaque fois que vous appelez la méthode de dialogue sur un objet, un nouvel état est créé - l'ancien état n'est jamais référencé ou enregistré.

Lire la section de données dans ce tutoriel pour plus d'idées sur la façon de stocker l'état à travers des appels de fonctions: http://docs.jquery.com/Plugins/Authoring#Data

Answer 2

C'est le motif que j'utilise généralement. Notez que j'applique les valeurs par défaut directement après qu'elles sont définies dans mon code de plugin. Je ne suis pas 100% mon patron est correct non plus. Mais fonctionne.

(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

C'est une ressource fantastique pour la création d'un plugins jquery:

http://jqueryboilerplate.com/