jQuery: kako izgraditi produžetak Plugin
Utorak 23 Rujan, 2008Kao i sve knjižnice ove vrste također jQuery možete proširiti svoje osnovne funkcije koristite pravi dodatka. Poštujući pravila njegovog rada, naime restituiendo uvijek pokazivač na odabrane ili jQuery sama, možete napisati dodatak uz nekoliko linija koda. Uzmi kao primjer kod predložene u jQuery protiv svakoga: 5 presedan s preglednikom koji je (nakon korekcija izvijestila Luca):
- ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown'). CSS ( 'kursor', 'pointer'). Pritisnite (
- funkcija () (
- $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (ova). sljedeća (.) je ( ': skrivena')) $ (ova). sljedeća (). slideDown (); drugo $ (ova). sljedeća (). slideUp ();
- )
- );
Ipotizionamo želite trasfromare ovaj "značajka" u metodu od pozva direktno jQuery. Nazovite naš način simpleAccordion() Najprije ćemo napraviti datoteku s sintaksa:
[nomeplugin].jquery.js
- . js jquery. [nomeplugin]. js
Tako je u našem slučaju:
simpleaccordion.jquery.js
- jquery. simpleaccordion. js
U okviru ove datoteke napisati:
- / **
- * @ Autor Korisnika
- * /
- / **
- * SimpleAccordion Plugin demo
- *
- * /
- ( $ ) { (Funkcija ($) (
- ( { $. Fn. Produžite ((
- options ) { simpleAccordion: funkcija (opcija) (
- var zadane = (
- Brzina: 'normalno'
- );
- ( defaults, options ) ; var = $ opcija. proširiti (zadane postavke, opcije);
- ( function ( ) { povratak tome. svakog (funkcija () (
- this ) ; __e var = $ (ove);
- . css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). CSS ( 'kursor', 'pointer'). Pritisnite (funkcija () (
- $ ( this ) . next ( ) . is ( ':hidden' ) ) if ($ (ova). sljedeća (.) je ( ': skrivena'))
- ) . next ( ) . show ( options. speed ) ; $ (To). Dalje (). Show (options.ico brzine);
- drugi
- ) . next ( ) . hide ( options. speed ) ; $ (To). Dalje (). Sakrij (options.ico brzine);
- ));
- ));
- )
- ));
- ; )) (JQuery);
Ta datoteka mora biti učitan nakon jQuery knjižnica, koristeći uobičajeni oblik inkluzije:
<script type="text/javascript" src="simpleaccordion.jquery.js"></script>
- src = "jquery.simpleaccordion.js" > </script> <script type = "text/javascript" src = "jquery.simpleaccordion.js"> </ script>
Naši "ekstenzija" je sada dostupan i možete probati sa sljedeći kod:
- ) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ( 'H2.dropdown'). SimpleAccordion (). Pritisnite (funkcija () ($ (ova). CSS ( 'color', 'crveno')));
- / / Ili promijenite zadani
- ) . simpleAccordion ( { speed: 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ( 'H2.dropdown'). SimpleAccordion ((brzina: 'spor')). Pritisnite (funkcija () ($ (ova). CSS ( 'color', 'crveno')));
U gore navedene promjene boje h2 kako bi bili sigurni da naše proširenje zadovoljava standardne jQuery, u puntantore povratka u odabrane (u ovom slučaju h2.dropdown Jedan od mogućih je skelet ovo:
- / **
- * Skeč jQuery Plugin
- *
- * /
- ( $ ) { (Funkcija ($) (
- ( { $. Fn. Produžite ((
- options ) { mymethod: funkcija (opcija) (
- ; var zadane = ();
- ( defaults, options ) ; var = $ opcija. proširiti (zadane postavke, opcije);
- ( function ( ) { povratak tome. svakog (funkcija () (
- this ) ; __e var = $ (ove);
- / / Todo
- / / Default opcija u "opcijama"
- ));
- )
- ));
- ; )) (JQuery);
Luka je rekao:
Zdravo,
napokon netko tko piše na talijanskom kao to izgrađuje dodatak s jquery!
Mi još uvijek ne pojašnjenja, mogu?
Obično se koristi u obrascu jquery. [Nomeplugin]. Js dok vam izokrenuti u [nomeplugin]. Jquery.js
To je to
PS: Kad ste se vratili na razgovor o Actionscript3?
Giovambattista Fazioli je rekao:
@ Luka: netko konačno pažljivi! Volim ovu izjavu ... u stvari u službenu dokumentaciju jQuery je prikazano na sintaksu koja će vam, naime:
jquery.[insert name of plugin].jsMoj grešku ... iako ja moram reći, nije bilo loše
[insert name of plugin].jquery.jsgotovo da ukazuje na "produžetak". No uvijek imajte na umu da drugi čitatelji, na kraju je, primjerice, također radi sa filename "krivi".Vrati se uskoro pričati o Actionscript 3, čak i - nadam se - u Flash CS4; samo pustili
Simone D'Amico »Blog Arhiva» Napravite dodatak za jQuery je rekao:
[...] Napravite dodatak, samo imati samo diskretne znanje Javascript. Giovambattista Fazioli ovaj link je napisao zanimljiv vodič o tome kako napraviti naš dodatka [...]