jQuery: comment construire une extension de plugins

Comme toutes les bibliothèques de ce type a également jQuery vous permet d'étendre sa fonctionnalité de base en utilisant des plugins réel. Respecter les règles de son fonctionnement, c'est-retour, il est toujours un pointeur vers l'élément sélectionné ou jQuery lui-même, vous pouvez écrire un plugin avec quelques lignes de code. Prenez par exemple le code proposé dans jQuery contre tout le monde: un benchmark avec 5 navigateur , qui a été (après la correction rapportés par Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css («curseur», «pointeur»). Cliquez sur (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () (:) «caché») slideDown $ (this) suivante () (); else $ (this) suivante () slideUp ();....
}
);

Ipotizionamo voulez retraitement cette «fonctionnalité» dans une méthode appelable directement à partir de jQuery. Nous appellerons notre méthode simpleAccordion() . Tout d'abord, nous créons un fichier avec la syntaxe suivante:

[nomeplugin].jquery.js

1
jQuery. [nomeplugin]. js

Donc dans notre cas:

simpleaccordion.jquery.js

1
jquery.simpleaccordion.js

Dans ce fichier, nous écrivons:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25e
26
27
28
/ **
* @ Auteur utilisateur
* /
/ **
* Démo simpleAccordion plugins
*
* /
( $ ) { (Function ($) {
( { $. Fn. Extend ({
( options ) { simpleAccordion: function (options) {

{ par défaut var = {
vitesse: «normaux»
};
$. extend ( defaults , options ) ; options var = $ extension (par défaut, les options).;

( function ( ) { retourner ce. chaque fonction (() {
$ ( this ) ; __E var = $ (this);
. css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__E). Css («curseur», «pointeur»). Cliquez sur (function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) if (.. $ (this) next () (': hidden "))
) . next ( ) . show ( options. speed ) ; $ (Ce) Next () Voir (options. vitesse)..;
d'autre
) . next ( ) . hide ( options. speed ) ; $ (Ce) Next () Cacher (options. vitesse)..;
});
});
}
});
; }) (JQuery);

Ce fichier doit être chargé après la bibliothèque jQuery, en utilisant le formulaire habituel de l'inclusion:

<script type="text/javascript" src="simpleaccordion.jquery.js"></script>

1
"text/javascript" src = "jquery.simpleaccordion.js" >< / script > < script de type = "text / javascript" src = "jquery.simpleaccordion.js"> </ scripts >

Notre «extension» est maintenant disponible et nous pouvons essayer avec le code suivant:

1
2
3
) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown'). SimpleAccordion (). Cliquez sur (function () {$ (this). Feed ('couleur', 'rouge')});
/ / Ou en changeant les paramètres par défaut
) . simpleAccordion ( { speed : 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ('H2.dropdown') SimpleAccordion ({vitesse: «lent»}).. Cliquez sur (function () {$ (this) Css ('couleur', 'rouge')});.

). Dans les changements exemple ci-dessus la couleur de la ( h2 ) pour vérifier que notre extension est conforme à la norme puntantore jQuery retour de l'élément sélectionné (dans ce cas h2.dropdown ). Un squelette est alors possible de:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* Croquis plugin jQuery
*
* /
( $ ) { (Function ($) {
( { $. Fn. Extend ({
( options ) { MyMethod: function (options) {

{ } ; par défaut var = {};
$. extend ( defaults , options ) ; options var = $ extension (par défaut, les options).;

( function ( ) { retourner ce. chaque fonction (() {
$ ( this ) ; __E var = $ (this);
/ / TODO
Options / / par défaut dans "options"
});
}
});
; }) (JQuery);

3 commentaires à "jQuery: comment construire une extension de plugins"

  1. 25 septembre 2008 Luc :

    Bonjour,
    enfin quelqu'un qui écrit en italien comment construire un plugin avec jQuery!

    Je vais faire une dernière précision, je peux? :)
    Habituellement, le motif est utilisé jquery. [Nomeplugin]. Js et que vous avez inversé [nomeplugin]. Jquery.js
    C'est elle :)

    PS: Lorsque vous revenez à parler ActionScript3? :)

    Répondre Citer
  2. 25 septembre 2008 Giovambattista Fazioli :

    @ Luc: enfin quelqu'un! J'aime cette déclaration ... en fait dans la documentation officielle de jQuery syntaxe est montré à indiquer aussi, à savoir: jquery.[insert name of plugin].js .
    Mon erreur ... même si, je dois dire, ce serait pas mal non plus [insert name of plugin].jquery.js , presque pour indiquer une «extension». Toutefois, d'autres lecteurs de se rappeler que la fin de l'exemple, tout fonctionne bien avec le nom du fichier "mauvais".
    Je serai de retour pour parler Actionscript 3, même - je l'espère - dans un Flash CS4; vient de sortir :)

    Répondre Citer
  3. 14 octobre 2008 Simone D'Amico »Blog Archive» Création d'un plugin pour jQuery :

    [...] Pour créer un plugin, vous avez juste des connaissances décentes de Javascript. Giovambattista Fazioli à ce lien a écrit un guide intéressant sur la façon de créer notre plugin pour [...]

Laisser un commentaire

XHTML TAG PERMIS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CODE D'INSERTION: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Arrêtez SOPA