javascript - plugin - select js

¿Cómo tener múltiples instancias de jQuery plugin en una sola página?

Question

Estoy escribiendo un complemento simple de jQuery, pero tengo problemas para poder usar varias instancias en una página.

Por ejemplo, aquí hay un complemento de ejemplo para ilustrar mi punto:

(function($) {
  $.fn.samplePlugin = function(options) {
    if (typeof foo != ''undefined'')
    {
      alert(''Already defined!'');
    } else {
      var foo = ''bar'';
    }
  };
})(jQuery);

Y luego si hago esto:

$(document).ready(function(){
  $(''#myDiv'').samplePlugin({}); // does nothing
  $(''#myDiv2'').samplePlugion({}); // alerts "Already defined!"
});

Obviamente, este es un ejemplo simplificado para explicar el punto. Entonces mi pregunta es, ¿cómo tengo dos instancias separadas del complemento? Me gustaría poder usarlo en varias instancias en la misma página.

Supongo que parte del problema podría estar en la definición de las variables en un ámbito global. ¿Cómo puedo definirlos únicos para esa instancia del complemento entonces?

¡Gracias por su orientación!

Answer 1

Esto funcionó un placer para mí! Tenía parámetros específicos para las páginas / lugares en los que quería ejecutar un complemento y pude lograr el éxito utilizando una simple sentencia if. ¡Espero que esto ayude a alguien!

<!-- Begin JQuery Plugin Foo -->
<script src="js/foo_fun.js"></script>

<?php 
if(substr_count(strtolower($currentUrl),"member")>0)
{
?>
    <script>
    $(document).ready(function(){
        $(''#vscroller'').vscroller({newsfeed:''news_employee.xml'', speed:1000,stay:2000,cache:false});
    });
    </script>
<?php
}
else
{
?>
    <script>
    $(document).ready(function(){
        $(''#vscroller'').vscroller({newsfeed:''news_company.xml'', speed:1000,stay:2000,cache:false});
    });
    </script>
<?php
}
?>
<!-- End JQuery Foo--> 

Answer 2

No estoy seguro de qué quiere decir con tener más de una instancia de un complemento. Un complemento estaría disponible para usar en cualquier elemento.

Este comentario no me aclara mucho:

Así que diga que fue un complemento que tomó un parámetro de "color" y convirtió el objeto en ese color. Bueno, en ese caso necesitarías varias instancias, ya que estás tratando con más de un elemento de página que gira más de un color.

En este caso, pasarías en diferentes colores los argumentos según sea necesario:

$(''div#foo'').makeColor(''red'');
$(''div#bar'').makeColor(''blue'');

Cada vez que llame al complemento, utilizará los argumentos que le dé. El plugin no es una clase que necesita instancias.

Answer 3

Para responder a su pregunta directamente, puede usar jQuery.noconflict () para evitar colisiones en el espacio de nombres y, por lo tanto, potencialmente tener múltiples instancias en una página.

var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function() {
  // etc

mira here

Pero cuestiono tu diseño. ¿Por qué estás escribiendo un complemento que parece no funcionar en un conjunto envuelto jQuery? .. Los complementos deben escribirse para asumir que están operando en una matriz jQuery contenida en ''esto''. En cuyo caso, se puede almacenar cualquier estado en cada uno de los elementos sobre los que se actúa ... ¿Pero quizás está construyendo algo diferente?

Por favor revise esta página

Answer 4

Solo estoy lanzando mi solución aquí:

(function ($){

    $.fn.plugin = function (options){
        var settings = $.extend({}, $.fn.plugin.defaults, options);
        settings.that = $(this);
        $.fn.plugin.init (settings);
    };

    $.fn.plugin.defaults = { objval: ''default'' };

    $.fn.plugin.init = function (settings){
        settings.that.val (settings.objval);
    };

}( jQuery ));

$(''#target1'').plugin ({objval: ''not default''});
$(''#target2'').plugin ();

DEMO

La variable de configuración se aísla cada vez que inicializa el objeto.

Answer 5

Tengo el mismo problema, pero encuentro una solución muy útil, la publicaré para alguien que pueda tener este problema.

Cuando defina sus variables en el complemento, podría usar .data () para almacenar todas las variables que defina.

Me gusta esto

(function($) {
  $.fn.samplePlugin = function(options) {
    var base = this;
    this.foo // define foo

    // do stuff with foo and other variables

    // Add a reverse reference to the DOM object
    this.data("pluginname", base);

  };})(jQuery);

Y cuando quieras usar la misma variable foo, deberías recuperar la referencia con esto:

base = this.data("pluginname");
base.foo

Espero eso ayude

Logan

Answer 6

Tuve el mismo problema: ¿cómo usar muchas instancias de un complemento en un solo formulario? La forma habitual falla porque, de hecho, la instancia no es una instancia del complemento: es una instancia de jQuery. Por lo tanto, si más de un elemento está definido para ser administrado por un complemento, cada definición anula los parámetros anteriores.

Era necesario echar un vistazo al problema desde otro lado.

Un complemento se hace generalmente para reaccionar en un evento específico para un elemento específico. p.ej. Haga clic en un botón o cuando el mouse esté sobre el elemento. En mi caso, tuve que usar un complemento de autocompletado para un campo de ciudad, pero mi formulario tiene 5 pestañas y en total 4 campos para las ciudades para 4 partes diferentes de la información que se recopilará. Para cada campo, los parámetros son específicos.

Por cierto, me he dado cuenta de que no necesito tener el complemento activo cada vez: basta con el evento apropiado en el campo.

Así que tuve una idea: un gestor de eventos para cada elemento. Cuando el evento se agrega, entonces defino la acción del complemento. Algunos códigos serán más eficientes de explicar: imagina que tienes 3 bloques div y tu complemento debe cambiar los colores, pero con colores específicos dependiendo de qué div se vea afectado.

$(document).ready(function(){
    // Wich elements are affected by the plugin
    var ids = [''myDiv1'',''myDiv2'',''myDiv3''];
    // foe each one :
    for (v in ids) 
    {
        //define from an event :
        $(''#''+ ids[v]).focus(function()
        {
            // depending which id is active :
            var  aParams, idDiv = $(this).attr(''id'');
            // Choosing the right params
            switch(idDiv)
            {
                case ''myDiv1'':
                    aParams = {''color'': ''#660000'', ''background-color'': ''#0000ff''};
                    break;
                case ''myDiv2'':
                    aParams = {''color'': ''#006600'', ''background-color'': ''#ff00ff''};
                    break;
                case ''myDiv3'':
                    aParams = {''color'': ''#000066'', ''background-color'': ''#ff0000''};
                    break;
                default:
                    aParams = {''color'': ''#000000'', ''background-color'': ''#ffffff''};
            };
            // Defining the plugin on the right element with the right params
            $(this).myPlugin(
            {
                colors: aParams
            });
        });
    }
});

Y esto funciona bien.

Lo siento si mi inglés no es perfecto, espero que lo entiendas bien.

Answer 7

en lugar de escribir esto

$("#divid1").samplePlugin();
$("#divid2").samplePlugin();

puedes hacer esto

$.plugin(''samplePlugin1'', samplePlugin);
$("#divid1").samplePlugin1();

$.plugin(''samplePlugin2'', samplePlugin);
$("#divid2").samplePlugin2();

Puedes tener muchos detalles desde aquí http://alexsexton.com/?p=51

Answer 8

html:

<code class="resize1">resize1</code>
<code class="resize2">resize2</code>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
       jQuery(document).ready(function($) {
           $(''.resize1'').ratiofix({message:''resize1''});
           $(''.resize2'').ratiofix({message:''resize2''});
       });
</script>

He encontrado 2 soluciones: la primera es jquery widget factory http://jqueryui.com/widget/ js code:

$.widget("custom.ratiofix",{
    options:{
        message:"nothing"
    },
    _create:function (){
        var self=this;
        this.setListeners();
    },
    setListeners:function (){
        var self=this;
        $(window).on(''resize'',$.proxy(self.printMsg,self));
    },
    printMsg:function (){
         console.log(this.options.message);
    }
});

Y el segundo (sin fábrica de widgets):

(function ($){
var Ratiofix = {
  init: function(options, elem) {
    this.options = $.extend({},this.options,options);
    this.elem  = elem;
    this.$elem = $(elem);
    this.setListeners();
    return this;
  },
  options: {
    message: "No message"
  },
  printMsg: function(){
     console.log(this.options.message);
  },
  setListeners:function (){
    var self=this;
    this.$elem.on(''click'',function (){
         console.log(self.options.message);
    });
    $(window).on(''resize'',$.proxy(self.printMsg, self));
  }
};

  $.fn.ratiofix=function (options){
    this.init= function(options, elem) {
      this.options = $.extend({},this.options,options);
      this.elem  = elem;
      this.$elem = $(elem);

      return this;
  };

    if ( this.length ) {
      return this.each(function(){
        var ratiofix = Object.create(Ratiofix);
        ratiofix.init(options, this); 
        $.data(this, ''ratiofix'', ratiofix);
      });
    }


  };
})(jQuery);

En ambos casos los complementos funcionan por separado y tienen configuraciones propias. En mi caso, 2 widgets escuchan el tamaño de la ventana e imprimen en la consola opciones propias.

Answer 9

this.foo usar this.foo lugar de var foo , para que la variable solo esté relacionada con el objeto actual.