jQuery: hvordan bygge en forlengelse Plugin
Tirsdag, 23. september 2008Som alle biblioteker av denne typen også jQuery kan utvide sin grunnleggende funksjonalitet ved hjelp av real-plugin-modulen. Respektere reglene i sin drift, nemlig restituiendo alltid en peker til den valgte eller jQuery seg selv, kan du skrive en plugin-modul med noen få linjer kode. Ta som eksempel koden foreslått i jQuery mot alle: en målestokk med 5 nettleser som var (etter korrigering rapportert av Luca):
- ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown'). Css ( "markøren", "pekeren"). Klikk (
- funksjon () (
- $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; hvis ($ (denne). neste (). er ( ': hidden')) $ (denne). neste (). slideDown (); else $ (denne). neste (). slideUp ();
- )
- );
Ipotizionamo ønsker trasfromare denne "funksjonen" i en metode som kalles direkte av jQuery. Ring vår metode simpleAccordion() Først av alt vi lage en fil med syntaks:
[nomeplugin].jquery.js
- . js jquery. [nomeplugin]. js
Så i vårt tilfelle:
simpleaccordion.jquery.js
- jquery. simpleaccordion. js
Innenfor denne filen skriver:
- / **
- * @ Forfatter User
- * /
- / **
- * SimpleAccordion Plugin demo
- *
- * /
- ( $ ) { (Function ($) (
- ( { $. Fn. Extend ((
- options ) { simpleAccordion: function (ekstrautstyr) (
- var defaults = (
- hastighet: "normalt"
- );
- ( defaults, options ) ; Var = $ alternativer. forlenge (defaults, valg);
- ( function ( ) { returnere dette. hvert (funksjon () (
- this ) ; __e var = $ (denne);
- . css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). Css ( "markøren", "pekeren"). Klikk (funksjon () (
- $ ( this ) . next ( ) . is ( ':hidden' ) ) hvis ($ (denne). neste (). er ( ': hidden'))
- ) . next ( ) . show ( options. speed ) ; $ (Denne). Neste (). Vis (options.ico hastighet);
- ellers
- ) . next ( ) . hide ( options. speed ) ; $ (Denne). Neste (). Skjul (options.ico hastighet);
- ));
- ));
- )
- ));
- ; )) (JQuery);
Denne filen må lastes etter jQuery bibliotek, ved hjelp av vanlig form for inkludering:
<script type="text/javascript" src="simpleaccordion.jquery.js"></script>
- src = "jquery.simpleaccordion.js" > </script> <script type = "text/javascript" src = "jquery.simpleaccordion.js"> </ script>
Vår "forlengelse" er nå tilgjengelig og vi kan prøve det med følgende kode:
- ) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ( 'H2.dropdown'). SimpleAccordion (). Klikk (funksjon () ($ (denne). Css ( 'color', 'rød')));
- / / Eller endre standard
- ) . simpleAccordion ( { speed: 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ( 'H2.dropdown'). SimpleAccordion ((hastighet: "treg")). Klikk (funksjon () ($ (denne). Css ( 'color', 'rød')));
I de ovennevnte endringer fargen h2 våre forlengelse oppfyller standarden jQuery, den puntantore tilbake til valgt (i dette tilfellet h2.dropdown En mulig skjelett er dette:
- / **
- * Skisse jQuery Plugin
- *
- * /
- ( $ ) { (Function ($) (
- ( { $. Fn. Extend ((
- options ) { mymethod: function (ekstrautstyr) (
- ; var defaults = ();
- ( defaults, options ) ; Var = $ alternativer. forlenge (defaults, valg);
- ( function ( ) { returnere dette. hvert (funksjon () (
- this ) ; __e var = $ (denne);
- / / Todo
- / / Standard valg i "valg"
- ));
- )
- ));
- ; )) (JQuery);
Luke sa:
Hallo,
endelig noen som skriver på italiensk som det bygger en plugg med jquery!
Vi fortsatt gjøre en avklaring, kan jeg?
Vanligvis mønsteret er brukt jquery. [Nomeplugin]. JS mens du invertere i [nomeplugin]. Jquery.js
Det er det
PS: Når du kommer tilbake for å snakke om Actionscript3?
Giovambattista Fazioli sa:
@ Luke: noen endelig forsiktig! Jeg liker denne setningen ... faktisk i den offisielle dokumentasjonen av jQuery er vist syntaksen som viser deg, nemlig:
jquery.[insert name of plugin].jsMin feil ... selv om jeg må si, er ikke dårlig enten
[insert name of plugin].jquery.jsfor å indikere en "forlengelse". Men husk at andre lesere, for å avslutte eksempel, fungerer også med filnavn "galt".Kom tilbake snart for å snakke om Actionscript 3 selv - håper jeg - i en Flash-CS4; nettopp gitt ut
Simone D'Amico »Blog Archive» Opprett en plugg for jQuery sa:
[...] Opprett en plugg, akkurat bare har diskrete kunnskap av Javascript. Giovambattista Fazioli denne koblingen har skrevet en interessant veiledning i hvordan du skal lage vår plugin-modulen [...]