JQuery плагины: как получить доступ к параметрам?

Question

В настоящее время я пишу плагин jQuery с некоторыми опциями.

Пример упрощен кусок кода с веб-страницы:

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

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

И вот (опять упрощенным) код плагина:

(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); 

Ну, вопрос в списке - как можно Я получаю доступ к параметрам другого объекта изнутри функции плагина? Что-то вроде $ ("# div2"). Options.width

Answer 1

Вы можете сделать это с помощью JQuery-х .data (ключ, вал) метод, чтобы установить эти параметры, прежде чем получить доступ к ним в плагине:

// 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); 

Как вы храните данные в словаре, как объект, вы можете установить почти любой вид данных вы хотите к нему:

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

... и получить его позже, как так:

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

за кулисами, JQuery добавляет одну EXPANDO-свойство элемента DOM йо ur jQuery (внутренне сгенерированное значение UUID), значение которого является уникальным ключом в jQuery.cache, который в основном там, где все ваши данные хранятся в/из них.

Чтобы очистить, вызовите .removeData (key) (если ключ не передан, все данные будут удалены).

Answer 2

Простой ответ: Вы не можете. options object, переданный плагину в каждом экземпляре, используется для назначения значений свойствам локально объявленного объекта options, который не будет доступен за пределами области функции плагина.

Вы могли бы придумать несколько способов сделать то, что вы хотите, например, дополнительные свойства options object, который вы передаете в.

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); 

«В тех случаях, когда это невозможно, вы можете передать дополнительные данные в качестве второго параметра (и функции обработчика, как третья) ...»

jQuery bind

Answer 4

Почему бы не добавить метод к вашему плагину, который возвращает объект options?

Answer 5

см. this answer Вторая часть решает проблему без реструктуризации вашего плагина. В основном сделайте свои варианты глобальными, и они будут доступны после инициализации в первый раз