Как написать метод для плагина jQuery? - PullRequest
Новая
       34

Как написать метод для плагина jQuery?

1 голос
/ 24 февраля 2010

Я написал довольно простой плагин jQuery, который берет неупорядоченный список и создает красивый многоотборный список. Называя его 'multiSelector', объявление плагина выглядит так: 

jQuery.fn.multiSelector = function(options) {
    // plugin code
}

Плагин на самом деле работает на содержащем div с неупорядоченным списком внутри (по причинам CSS, в частности), поэтому типичное использование этого плагина выглядит так: 

var $listDiv = $('#listDiv') // div that contains unordered list
$listDiv.multiSelector();

Работает отлично, поэтому у меня нет проблем при создании плагина. Однако сейчас я хотел бы предоставить пользователю способ получить все выбранные элементы из их списка. Я посмотрел в Интернете, как создавать функции из этого плагина, и я не могу найти способов расширить его с помощью функции.

Было бы замечательно сделать что-то вроде этого, где 'itemArray' - это массив строк, основанный на идентификаторе элемента списка (или чем-то еще): 

var itemArray = $listDiv.multiSelector().getSelected();

Я понимаю, что моя логика здесь, вероятно, далека, но я просто ищу руководство о том, как этого добиться. Может быть, мне нужно написать новую функцию jQuery для решения этой конкретной задачи, или, может быть, я все же могу каким-то образом привязать ее к этому плагину multiSelector. Любая помощь будет оценена.

Спасибо.

Ответы [ 5 ]

2 голосов
/ 24 февраля 2010

Я бы предложил добавить опцию для вызова метода в качестве параметра плагина.Это способ, которым большинство (все?) Плагинов пользовательского интерфейса jQuery справляются с этим. 

jQuery.fn.multiSelector = function( options ) {
   if (typeof options === "string") {
      if (options == "selected") {
         ...return the selected elements
      }
      return null;
   }

   options = $.extend( {}, $.fn.multiSelector.defaults, options );

   ... rest of plugin body...
}

Затем называют его 

var selected = $('.selector').multiSelector('selected');
1 голос
/ 24 февраля 2010

Вам нужно, чтобы ваша функция multiSelector возвращала объект, содержащий функцию getSelected.

Например: 

jQuery.fn.multiSelector = function(options) {
    var self = this;

    return {
        getSelected: function() { 
            return self.children('.Selected');
        },
        //Other methods
    };
}

Обратите внимание, что в возвращаемых методах ключевое слово this будет ссылаться на возвращаемый объект ypu, а не на исходный объект jQuery. Чтобы обойти это, вам нужно сохранить ссылку на исходный объект this (self в моем примере)

Также обратите внимание, что это нарушит цепочку методов, что означает, что вы не сможете писать $(...).multiSelector().fadeIn(). (Очевидно)

0 голосов
/ 24 февраля 2010

Обычно плагины обычно предоставляют эту функциональность, позволяя пользователю передавать определенную строку в качестве аргумента метода плагина, который заставит плагин возвращать что-то отличное от обычного объекта jQuery. Например, 

$('#listDiv').multiSelector('getSelected') // will return an array of strings
0 голосов
/ 24 февраля 2010

Я обычно вижу свойства, реализованные так:

$ listDiv.multiselector ('option', 'property'); // получить $ listDiv.multiselector ('option', 'property', 'value'); // set

И я думаю, вы могли бы сделать что-то подобное с выбранным свойством. Я понимаю, что это довольно громоздко.

В качестве примера см. «методы» UI / Droppable , доступ к которым осуществляется через .droppable("method_name").

Чего не следует делать, так это возвращать объект, у которого есть метод getSelected (), как предлагают несколько ответов (если только вы не добавите указанный метод в объект jQuery). Ожидается, что плагины JQuery будут возвращать объект jQuery, и отклонение от этого приведет к печали в долгосрочной перспективе и усложнит использование вашего кода.

0 голосов
/ 24 февраля 2010

Если ваш плагин возвращает объект jQuery, вам нужно просто написать другую функцию jQuery для выполнения операции getSelected.

...