Complementos de Jquery: cómo acceder a las opciones?

Question

Actualmente estoy escribiendo un complemento jQuery con algunas opciones.

Un ejemplo pieza simplificada del código de una página web:

<div id="div1"></div> 
<div id="div2"></div> 

$(document).ready(function(){ 
    $("#div1").myFunc({width: 100, height: 100}); 
    $("#div2").myFunc({width: 200, height: 200}); 
}); 

Y aquí es un (nuevo simplificado) código del plugin:

(function($) { 
$.fn.myFunc = function(options) { 
    // extending default settings 
    var options = $.extend({ 
    width: 300, 
    height: 200 
    }, options); 

    return this.each(function() { 
     // doing something for example with #div1 
     $(this).click(function() { 
      // here I need to access ANOTHER (e.g. #div2) object's options 
      // how can I do it? 
     }); 
    }); 
} 
})(jQuery); 

Bueno, la cuestión está en la lista - ¿cómo puede ¿Puedo acceder a las opciones de otro objeto desde dentro de la función del complemento? Algo como $ ("# div2"). Options.width

Answer 1

esto se puede hacer mediante el uso de jQuery de .data (clave, val) método para establecer las opciones antes de acceder a ellos en su plugin:

// set 'options' for '#div2' 
    $("#div2").data('options', {width: 500, height: 500}); 

    // get 'options' for '#div2' (this would be in your plugin code) 
    var opts = $('#div2').data('options'); 
    alert('options.height:' + opts.height + '\n' 
     'options.width:' + opts.width); 

Como está almacenando datos en un objeto de diccionario similar, puede establecer casi cualquier tipo de datos desea que:

$("#div2").data('priority', 2); 
    $("#div2").data('flagColors', ['red', 'white', 'blue']); 
    $("#div2").data('parts', {arm: 2, legs: 2}); 

... y recuperarlo más adelante, así:

var foo = $("#div2").data('priority'); 
    var foo2 = $("#div2").data('flagColors'); 
    var foo3 = $("#div2").data('parts'); 

Detrás de las escenas, jQuery añade un único expando-propiedad al elemento DOM de yo su selección de jQuery (un valor de UUID generado internamente), cuyo valor es una clave única en jQuery.cache, que es básicamente donde se almacenan o recuperan todos sus datos.

Para realizar la limpieza, llame al .removeData (clave) (si no se pasa ninguna clave, se eliminan todos los datos).

Answer 2

Respuesta simple es: no se puede. El options object que se transfiere al complemento en cada instancia se usa para asignar valores a las propiedades de un objeto declarado localmente, options, que no será accesible fuera del alcance de la función del complemento.

Es posible llegar a algunas maneras de hacer lo que desee, por ejemplo, las propiedades adicionales de la options object que se pasa en.

Answer 3

(function($) { 
$.fn.myFunc = function(options) { 
    var options = $.extend({ 
    width: 300, 
    height: 200 
    }, options); 

    return this.each(function() { 

     $(this).bind('click', {myOptions: options}, function(event) { 
       optionsHere = event.data.myOptions; 
     }); 
    }); 
} 
})(jQuery); 

"En los casos en que no sea posible, se puede pasar datos adicionales como el segundo parámetro (y la función de controlador como la tercera) ..."

jQuery bind

Answer 4

¿Por qué no agregar un método a su complemento que devuelve el objeto de opciones?

Answer 5

ver this answer la segunda parte resuelve el problema sin reestructurar su plugin. Básicamente haga que sus opciones sean globales, y serán accesibles una vez inicializadas por primera vez