Создание плагина jquery с принятием параметров, подобных пользовательскому интерфейсу jquery - PullRequest
Новая
       25

Создание плагина jquery с принятием параметров, подобных пользовательскому интерфейсу jquery

0 голосов
/ 17 января 2011

Я пытаюсь создать плагин, очень похожий на плагин jquery ui для диалогов .Пример использования, который мне нужен, выглядит следующим образом:

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

$('#myId').dialog({
    value1 : 'someValue',
    value2 : 'anotherValue',
    //...
});

Кроме того, я хочууметь связывать определенные события, используя «ключевые слова».Например, в jquery.UI вы можете вызвать это, чтобы закрыть диалоговое окно 

$('#myId').dialog('close');

Мой вопрос заключается в том, как настроить плагин так, чтобы он выполнял одно действие, если он был передан в настройках, или другойчто зависит от ключевых слов, переданных в?Я попытался посмотреть на некоторый код пользовательского интерфейса jquery, но не уверен, что понимаю, что он делает, и даже с чего начать, чтобы просто извлечь эту функциональность.

Ответы [ 2 ]

3 голосов
/ 17 января 2011

Посмотрите на jQuery Plugins / Authoring , в частности Методы плагинов .

Пример: 

(function( $ ){

  var methods = {
    init : function( options ) { /* THIS */ },
    show : function( ) { /* IS */ },
    hide : function( ) { /* GOOD */ },
    update : function( content ) { /* !!! */ }
  };

  $.fn.tooltip = function( method ) {

    // Method calling logic
    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 );

Тогда ... 

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method
0 голосов
/ 17 января 2011

проверьте, какой тип объекта вы передаете: 

if (typeof arguments[0] === 'string') {
 // I was given a string, my convention tells me this is a command
} else if (typeof arguments[0] === 'object') {
  // my convention tells me that this is an instantiation object
}

Вы также можете проверить свойства объекта или использовать $.isArray()

...