jQuery: πώς θα οικοδομήσουμε μια επέκταση Plugin

Τρίτη, 23 Σεπτεμβρίου 2008

Όπως όλα τα βιβλιοπωλεία του είδους αυτού, επίσης, jQuery σας δίνει τη δυνατότητα να επεκτείνει τις βασικές λειτουργίες, χρησιμοποιώντας πραγματικά plugin. Σεβασμός των κανόνων της λειτουργίας της, δηλαδή restituiendo πάντα ένα δείκτη για το επιλεγμένο ή jQuery ίδια, μπορείτε να γράψετε ένα plugin με λίγες γραμμές κώδικα. Πάρτε ως παράδειγμα τον κώδικα προτείνεται στην jQuery εναντίον όλων: ένα σημείο αναφοράς με 5 browser, η οποία (μετά τη διόρθωση που αναφέρθηκαν από Luke):

Απλού κειμένου
JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown »). Css (« δρομέας »,« δείκτη »). Κάντε κλικ στο κουμπί (
  2. λειτουργία () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (αυτό). επόμενη (). είναι ( "κρυφά")) $ (αυτό). επόμενη (). slideDown ()? άλλο $ (αυτό). επόμενη (). slideUp ()?
  4. )
  5. )?

Ipotizionamo θέλουν trasfromare αυτό το "χαρακτηριστικό" σε μια μέθοδο που καλείται άμεσα από jQuery. Καλέστε μας μέθοδο simpleAccordion() Πρώτα από όλα να δημιουργήσουμε ένα αρχείο με τη σύνταξη:

[nomeplugin].jquery.js

Απλού κειμένου
ΚΩΔΙΚΟΣ:
  1. . js jQuery. [nomeplugin]. js

Έτσι, στην περίπτωσή μας:

simpleaccordion.jquery.js

Απλού κειμένου
ΚΩΔΙΚΟΣ:
  1. jQuery. simpleaccordion. js

Εντός αυτού του αρχείου, γράψτε:

Απλού κειμένου
JavaScript:
  1. / **
  2. * @ Συντάκτης χρήστη
  3. * /
  4. / **
  5. * SimpleAccordion Plugin demo
  6. *
  7. * /
  8. ( $ ) { (Function ($) (
  9. ( { $. Fn. Επεκτείνετε ((
  10. options ) { simpleAccordion: λειτουργία (επιλογές) (
  12. var αθετήσεις = (
  13. ταχύτητα: "κανονικό"
  14. )?
  15. ( defaults, options ) ; = $ var επιλογές. επέκταση (προεπιλογές, επιλογές)?
  17. ( function ( ) { επιστρέψετε αυτό. καθένα (λειτουργία () (
  18. this ) ; __e var = $ (αυτή)?
  19. . css ( 'cursor' , 'pointer' ) . click ( function ( ) { $ (__e). Css ( «δρομέας», «δείκτη»). Κάντε κλικ (λειτουργία () (
  20. $ ( this ) . next ( ) . is ( ':hidden' ) ) if ($ (αυτό). επόμενη (). είναι ( "κρυφά"))
  21. ) . next ( ) . show ( options. speed ) ; $ (Η). Επόμενο (). Παρουσίαση (options. ταχύτητας)?
  22. άλλος
  23. ) . next ( ) . hide ( options. speed ) ; $ (Η). Επόμενο (). Hide (options. ταχύτητας)?
  24. ))?
  25. ))?
  26. )
  27. ))?
  28. ; )) (JQuery)?

Αυτό το αρχείο, πρέπει να φορτώνονται μετά την jQuery βιβλιοθήκη, με τη συνήθη μορφή της καταχώρισης:

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

Απλού κειμένου
HTML:
  1. src = "jquery.simpleaccordion.js" > </script> <script "text/javascript" τύπο = src = "jquery.simpleaccordion.js"> </ script>

Η "επέκταση" είναι πλέον διαθέσιμη και μπορούμε να το δοκιμάσετε με τον ακόλουθο κώδικα:

Απλού κειμένου
JavaScript:
  1. ) . simpleAccordion ( ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ( 'H2.dropdown »). SimpleAccordion (). Κάντε κλικ (λειτουργία () ($ (αυτό). Css (« χρώμα »,« κόκκινα')));
  2. / / Ή από την τροποποίηση των προκαθορισμένων
  3. ) . simpleAccordion ( { speed: 'slow' } ) . click ( function ( ) { $ ( this ) . css ( 'color' , 'red' ) } ) ; $ ( 'H2.dropdown »). SimpleAccordion ((ταχύτητα:« αργή »)). Κάντε κλικ (λειτουργία () ($ (αυτό). Css (« χρώμα »,« κόκκινα')));

Στο παραπάνω παράδειγμα, μπορείτε να αλλάξετε το χρώμα της h2 για να ελέγξετε ότι η επέκταση πληροί τα πρότυπα jQuery, επιστρέφοντας το puntantore το επιλεγμένο στοιχείο (στην περίπτωση αυτή h2.dropdown Ένας σκελετός είναι το εξής:

Απλού κειμένου
JavaScript:
  1. / **
  2. * Σκίτσο jQuery Plugin
  3. *
  4. * /
  5. ( $ ) { (Function ($) (
  6. ( { $. Fn. Επεκτείνετε ((
  7. options ) { mymethod: λειτουργία (επιλογές) (
  9. ; var αθετήσεις = ()?
  10. ( defaults, options ) ; = $ var επιλογές. επέκταση (προεπιλογές, επιλογές)?
  12. ( function ( ) { επιστρέψετε αυτό. καθένα (λειτουργία () (
  13. this ) ; __e var = $ (αυτή)?
  14. / / Todo
  15. / / Default επιλογές σε "επιλογές"
  16. ))?
  17. )
  18. ))?
  19. ; )) (JQuery)?

Σχετικές Post

Ετικέτες:

3 σχόλια στο "jQuery: πώς θα οικοδομήσουμε μια επέκταση Plugin"

  1. getAvatar 1,0 Πέμπτη, 25 Σεπτεμβρίου 2008 στις 10.17 π.μ.
    Luke είπε:

    Γειά,
    τέλος, κάποιος που γράφει στα ιταλικά πώς να οικοδομήσουμε ένα plugin με jQuery!

    Μήπως να κάνω ένα ακόμα, μπορώ; :)
    Συνήθως χρησιμοποιείται το πρότυπο jQuery. [Nomeplugin]. Js αντιστρέψετε ενώ στο [nomeplugin]. Jquery.js
    Αυτό είναι :)

    PS: Όταν μιλάμε για επιστροφή στην Actionscript3; :)

    Απάντηση Μετοχή
  2. getAvatar 1,0 Πέμπτη, 25 Σεπτεμβρίου 2008 στις 10.31 π.μ.
    Giovambattista Fazioli δήλωσε:

    @ Luke: κάποιος τελικά προσεκτικοί! Μου αρέσει αυτή η δήλωση ... στην πραγματικότητα στην επίσημη τεκμηρίωση του jQuery σύνταξη εμφανίζεται δείχνουν υπερβολικά, και συγκεκριμένα: jquery.[insert name of plugin].js
    Λάθος μου ... αν και πρέπει να πω, δεν θα πειράξει είτε [insert name of plugin].jquery.js να αναφέρεται ως "επέκταση". Ωστόσο, να θυμάστε ότι οι άλλοι παίκτες, για τον τερματισμό της παράδειγμα, συνεργάζεται επίσης με το όνομα του αρχείου "λάθος".
    Ελάτε πίσω σύντομα να μιλήσουμε για Actionscript 3, ακόμη και - ελπίζω - σε Flash CS4? Μόλις κυκλοφόρησε :)

    Απάντηση Μετοχή
  3. getAvatar 1,0 Τρίτη, 14 Οκτωβρίου 2008 στις 10.02 π.μ.
    Simone D'AMICO »Blog Archive» Δημιουργήστε ένα plugin για jQuery, δήλωσε:

    [...] Δημιουργήστε ένα plugin, το μόνο που έχουν γνώση των διακριτών Javascript. Giovambattista Fazioli αυτό το link έχει γράψει ένα ενδιαφέρον οδηγό για το πώς να δημιουργήσετε τη δική μας [...] plugins

Αφήστε ένα σχόλιο

TAG XHTML επιτρέπεται: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Χρησιμοποίησε <pre> να επισυνάψουν κωδικός