2012-02-14 4 views
1

Я не эксперт в этом, это мой первый набег на создание плагина jQuery.jQuery plugin authoring - расширение объекта jQuery, а также объект jQuery.fn

Что я хочу сделать, это создать плагин jQuery, который можно вызвать как на объект dom, так и самостоятельно.

Например, если мой плагин к alert() то, что я хотел бы, чтобы быть в состоянии назвать оба пути ниже:

$.tcAlert('Hello World'); 
// Resulting code: 
// 
// alert('Hello World'); 
// 

$('#myDiv').tcAlert(); 
// Resulting code: 
// 
// theText = $('myDiv').text(); 
// alert(theText); 
// 

Очевидно, что это очень простой пример, но я не могу найти какой-либо документацию о том, как это сделать, чтобы создать плагин. Должен ли я, по сути, создать расширение jQuery, а затем расширение jQuery.fn ссылается на исходное расширение?

Любая помощь/указатели будет очень полезной.

+0

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

+0

В каком смысле извините? –

ответ

4

В общем случае, если это функция, которая что-то делает с элементом, вы должны записать ее в формате плагина, например. $.fn.myPlugin = function() {};. Если это просто служебная функция, добавьте ее в глобальный объект jQuery/$, например. $.myFunction = function() {};

Ваш пример может быть записан следующим образом:

$.tcAlert = function(string) { 
    alert(string); 
}; 

$.fn.tcAlert = function() { 
    // call the `tcAlert` function, passing the .text() of the current element as the argument 
    $.tcAlert(this.text()); 
    // allow chaining 
    return this; 
}; 
+0

круто, это ответ, который я думал. Просто хочу проверить! :) –

1

Вы не можете всегда знать, имеет ли селектор соответствует какие-либо элементы или нет.

Чтобы справиться с этим, сделайте следующее ..

$.fn.myPlugin = function() { 

    //First check length of matched elements 

    if(this.length < 1){ 
    //standalone functionality 
    } 
    else{ 
    return this.each(function(){ 
     //do things to matched elements 
     //where, $(this) refers to current element 
    }); 
    } 

}