J'ai ce petit plugin jQuery:Utilisez la méthode jQuery comme paramètre de rappel

<!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>

Maintenant, je veux l'améliorer afin que vous puissiez contrôler où le texte est inséré au moyen de fournir une fonction de rappel:

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

(S'il vous plaît rappelez-vous ce code est juste échantillon. Je veux apprendre une technique plutôt que résoudre un problème.)

Puis-je passer une méthode jQuery comme argument et de l'utiliser à l'intérieur du plug-in i n au milieu d'une chaîne? Si oui, quelle est la syntaxe? Si non, quelle est l'alternative recommandée?

Mise à jour: myProgress jusqu'à présent

<!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>

Source

2010-07-09 Álvaro González

Bien sûr, vous pouvez, JavaScript est vraiment dynamique:

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

Vous pouvez remplacer l'appel natif de this.prepend() avec la fonction jQuery vous passez dans les options objet en tant que paramètre

Comme la plupart des méthodes jQuery se comportent sur un ensemble d'éléments en cours (l'objet this dans votre plug-in) vous devez utiliser apply ou call pour le faire fonctionner. De cette façon, vous pouvez appeler la fonction options.insertionCallback avec l'objet this actuel comme contexte.

Quelque chose comme:

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

Modifier

Cependant, vous ne pouvez pas accéder à des méthodes jQuery directement à partir de l'espace de noms $, vous avez besoin d'un objet construit jQuery pour accéder à ses méthodes, ou tout simplement utiliser $.fn.functionName comme l'a souligné Nick Craver.

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

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

Source

2010-07-09 10:13:26

Pourriez-vous s'il vous plaît expliquer votre exemple un peu plus? Je ne peux pas saisir la syntaxe exacte. J'obtiens * options.insertionCallback est indéfini * peu importe ce que je fais. –

@ Álvaro G. Vicario: C'est parce que $ .prepend (ou $ .append) est indéfini. J'ai élaboré un peu plus dans la réponse. –

Vous pouvez accéder directement aux méthodes, '$ .fn.prepend';) –

étendre comme ceci:

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

Je ne comprends pas vraiment ce que vous entendez par

Puis-je passer une méthode jQuery comme argument et de l'utiliser à l'intérieur du plug-in au milieu d'une chaîne?

Pourquoi voudriez-vous passer un jQuery method? il est déjà là, vous pouvez donc l'appeler sur jQuery object.

Source

2010-07-09 10:14:40 jAndy

Ce que je veux dire est de pouvoir le faire à l'intérieur du plugin: 'this.insertionCallback ($ (" ") .text (options.text) ) .css ({color:" white ", backgroundCouleur:" black " }); ' –

Vous pouvez également faire cette chaîne basée à garder les choses simples, comme ceci:

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

Ensuite, votre appel ressemble à ceci:

$(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, cela vous permettra d'utiliser append, prepend, html et text, ce qui vous donne quelques options pour définir le contenu. Dans ce cas, nous profitons simplement de JavaScript étant une langue dynamique, où this.prepend(something) est égal à this["prepend"](something).

Source

2010-07-09 10:54:04

Neat! La syntaxe JavaScript ne cessera jamais de me surprendre ... –

Pas une réponse à votre question, mais le style est recommandé:

<script type="text/javascript"> 

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

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

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

</script>

Source

2010-07-09 10:58:38 yfeldblum

Le dernier est le "Custom Alias dans le code du plugin" décrit à http://docs.jquery.com/Plugins/Authoring#Custom_Alias mais je prends note de l'alias dans le code de la page , dont je n'étais pas au courant. –

A droite, c'est pour le code de la page. Le code du plugin doit toujours utiliser l'exemple de style précédent au lieu du premier. – yfeldblum

Utilisez la méthode jQuery comme paramètre de rappel

Mise à jour: myProgress jusqu'à présent

Répondre

Questions connexes