У меня есть этот маленький JQuery плагин:метод использования JQuery в качестве параметра обратного вызова

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
(function($){ 
    $.fn.foo = function(options){ 
     var options = $.extend({ 
      text: "Foo!", 
      }, options 
     ); 

     this.prepend(
      $("<span></span>").text(options.text) 
     ).css({color: "white", backgroundColor: "black"}); 

     return this; 
    }; 
})(jQuery); 


$(function(){ 
    $("div").foo().foo({text: "Bar!"}).css({border: "1px solid red"}); 
}); 
//--></script> 
</head> 
<body> 

<div>One</div> 
<div>Two</div> 
<div>Three</div> 

</body> 
</html>

Теперь я хочу, чтобы улучшить его, так что вы можете контролировать, где текст Вставляется посредством предоставления функции обратного вызова:

$(function(){ 
    var optionsFoo = { 
     text: "Foo!", 
     insertionCallback: $.append 
    } 
    var optionsBar = { 
     text: "Bar!", 
     insertionCallback: $.prepend 
    } 
    $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"}); 
});

(Пожалуйста, помните, что это просто пример кода. Я хочу, чтобы узнать технику, а не устранить проблему.)

Могу ли я передать метод JQuery в качестве аргумента и использовать его внутри плагина я n середина цепочки? Если да, то какой синтаксис? Если нет, какова рекомендуемая альтернатива?

Обновление: MyProgress до сих пор

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
(function($){ 
    $.fn.foo = function(options){ 
     var options = $.extend({ 
      text: "Foo!", 
      insertionCallback: $.append 
      }, options 
     ); 

     options.insertionCallback.call(this, // options.insertionCallback is undefined 
      $("<span></span>").text(options.text) 
     ).css({color: "white", backgroundColor: "black"}); 

     return this; 
    }; 
})(jQuery); 


$(function(){ 
    var optionsFoo = { 
     text: "Foo!", 
     insertionCallback: $.append 
    } 
    var optionsBar = { 
     text: "Bar!", 
     insertionCallback: $.prepend 
    } 
    $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"}); 
}); 
//--></script> 
</head> 
<body> 

<div>One</div> 
<div>Two</div> 
<div>Three</div> 

</body> 
</html>

источник

2010-07-09 Álvaro González

Конечно, вы можете, JavaScript действительно динамическая:

this.prepend(
     $("<span></span>").text(options.text) 
    ).css({color: "white", backgroundColor: "black"});

Вы можете заменить родной вызов this.prepend() с помощью функции JQuery вы передаете в параметрах объекта как параметр.

Поскольку большинство методов JQuery себя на текущем наборе элементов (this объекта в плагине) вам нужно использовать apply или call, чтобы заставить его работать. Таким образом вы можете вызвать функцию options.insertionCallback с текущим объектом this в качестве своего контекста.

Что-то вроде:

options.insertionCallback.call(this, // pass the current context to the jQuery function 
     $("<span></span>").text(options.text) 
    ).css({color: "white", backgroundColor: "black"});

Редактировать

Однако вы не можете получить доступ к методам JQuery непосредственно из $ пространства имен, необходимо сконструированный объект JQuery, чтобы получить доступ к его методам, или просто использовать $.fn.functionName как отметил Ник Крейвер.

alert($.prepend); // won't alert the function 

alert($.fn.prepend); // will alert the function

источник

2010-07-09 10:13:26

Не могли бы вы уточнить ваш пример немного больше? Я не могу понять точный синтаксис. Я получаю * options.insertionCallback undefined * независимо от того, что я делаю. –

@ Álvaro G. Vicario: Это потому, что $ .prepend (или $ .append) не определен. В ответ я уточнил немного. –

Вы можете получить доступ к методам напрямую, '$ .fn.prepend';) –

продлить его следующим образом:

(function($){ 
    $.fn.foo = function(options){ 
     var options = $.extend({ 
      text: "Foo!", 
      cb: null 
      }, options 
     ); 

     if($.isFunction(options.cb)){ 
      // optimal also pass parameters for that callback 
      options.cb.apply(this, []); 
     } 

     this.prepend(
      $("<span></span>").text(options.text) 
     ).css({color: "white", backgroundColor: "black"}); 

     return this; 
    }; 
})(jQuery);

Я не очень понимаю, что вы имеете в виду с

Могу ли я передать метод JQuery в качестве аргумента и использовать его внутри плагина в середине цепи?

Зачем вам нужно пройти jQuery method? он уже там, поэтому вы можете просто называть его любым jQuery object.

источник

2010-07-09 10:14:40 jAndy

То, что я могу сделать это внутри плагина: 'this.insertionCallback ($ (" ") .text (options.text) ) .css ({color:" white ", backgroundColor:" black " }); ' –

Вы также можете сделать эту строку на основе, чтобы сохранить его простым, как это:

(function($){ 
    $.fn.foo = function(options){ 
    var options = $.extend({ 
     text: "Foo!", 
     insertionCallback: "append" 
     }, options 
    ); 
    return this[options.insertionCallback]($("<span></span>").text(options.text)) 
       .css({color: "white", backgroundColor: "black"}); 
    }; 
})(jQuery);

Тогда ваш вызов выглядит следующим образом:

$(function(){ 
    var optionsFoo = { 
    text: "Foo!", 
    insertionCallback: "append" 
    } 
    var optionsBar = { 
    text: "Bar!", 
    insertionCallback: "prepend" 
    } 
    $("div").foo(optionsFoo).foo(optionsBar).css({border: "1px solid red"}); 
});

You can test it here, это позволит использовать append, prepend, html и text, что дает вам несколько возможностей для настройки содержимого. В этом случае мы просто используем JavaScript, являющийся динамическим языком, где this.prepend(something) равно this["prepend"](something).

источник

2010-07-09 10:54:04

Аккуратно! Синтаксис JavaScript никогда не перестанет удивлять меня ... –

не ответ на ваш вопрос, но рекомендуемый стиль:

<script type="text/javascript"> 

    //this 
    jQuery(function($) { 
    //... stuff using the jQuery lib, using the $ 
    }); 

    //not this 
    $(function() { 
    //... 
    }); 

    //or this 
    (function($) { 
    //... 
    })(jQuery); 

</script>

источник

2010-07-09 10:58:38 yfeldblum

Последним является «Пользовательский псевдоним в коде плагина», описанный в http://docs.jquery.com/Plugins/Authoring#Custom_Alias, но я принимаю к сведению псевдоним в коде страницы , о котором я не знал. –

Правильно, это для кода страницы. Код плагина всегда должен использовать последний пример стиля вместо первого. – yfeldblum

метод использования JQuery в качестве параметра обратного вызова

Обновление: MyProgress до сих пор

ответ

Смежные вопросы