« Bruce Lee φοβάται του Bruce Lee

Ιδέες δεν παρέχουν στις επιχειρήσεις »

Εκμάθηση jQuery

Σχόλια Dameris 1 / Los_Angeles Αυγούστου, 2008 υπό την Javascript .
Ετικέτες:

Μετάφραση του Ξεκινώντας με jQuery

Αυτό το tutorial είναι μια εισαγωγή στη βιβλιοθήκη jQuery. Θα πρέπει να έχετε βασικές γνώσεις της JavaScript και Document Object Model (DOM). Θα ξεκινήσουμε από την αρχή και να εξηγήσουν τις λεπτομέρειες, όταν είναι αναγκαίο. Καλύπτουν ένα απλό παράδειγμα hello κόσμο, την επιλογή και βασικά περιπτώσει, AJAX, FX, και την παραγωγή και τη χρήση των plugins.

Το φροντιστήριο δεν έχει "πατήστε εδώ" για να δείτε το funcionalides. Η πρόθεση είναι να αντιγράψετε τον κώδικα και να το δοκιμάσετε μόνοι σας. Αντιγραφή, δείτε τι κάνει, και να τροποποιήσετε.

  1. Εγκατάσταση
  2. Γεια σας jQuery
  3. Βρες μου: Χρησιμοποιώντας επιλογείς και εκδηλώσεις
  4. Βαθμολογία μου: Η χρήση Ajax
  5. Μου anime: Χρησιμοποιώντας Επιδράσεις
  6. I προκειμένου: Χρησιμοποιώντας το plugin tablesorter
  7. Κρατήστε μου: Γράφοντας plugins το δικό σας

Εγκατάσταση

Για να ξεκινήσω, χρειαζόμαστε ένα αντίγραφο του jQuery βιβλιοθήκη, διαθέσιμη στην επίσημη ιστοσελίδα . Το jQuery starterkit έρχεται με κάποιο κωδικό και CSS για να διευκολυνθεί. Μετά το τράβηγμα και το απόσπασμα του επιλεγμένου αρχείου, τοποθετήστε το αρχείο jquery.js στον ίδιο κατάλογο, και απλά ανοίξτε το e starterkit.html custom.js στο αγαπημένο σας editor, και starterkit.html με τον browser.

Έχουμε τα πάντα για να ξεκινήσει με το δυσάρεστο παράδειγμα "Hello World".

Γεια σας jQuery

Αρχίζουμε με έναν σκελετό HTML σελίδα:

Απλό Κείμενο
HTML:
  3. src = "jquery.js" > </script> <Script type = "text / javascript" src = "jquery.js"> </ script>
  4. > <Script type = "text / javascript">
  5. / / Προσθήκη κώδικα javascript μας εδώ
  6. </ Script>
  7. </> Head
  9. <--- Προσθήκη περιεχομένου μας εδώ HTML ->
  10. </> Σώμα
  11. </ Html>

Αυτή η σελίδα φορτώνει μόνο του σκελετού jquery.js βιβλιοθήκη (βεβαιωθείτε ότι το URL, το μέρος στο εσωτερικό του src σημεία αποδίδουν σε τοπικό σας αντίγραφο του αρχείου jquery.js! Σε αυτό το παράδειγμα υποθέτουμε ότι είναι στον ίδιο κατάλογο για αυτή τη σελίδα δείγμα). Και οι δύο παρατηρήσεις που αναφέρουν όπου θα πρέπει να προστεθεί νέο κωδικό.

Όπως και έγινε σχεδόν όλα με jQuery διαβάζει ή χειραγωγεί το μοντέλο αντικειμένου εγγράφου (DOM), πρέπει να είμαστε βέβαιοι ότι είμαστε προσθέτοντας γεγονότα (ή άλλες δράσεις), έτσι ώστε το DOM είναι έτοιμη.

Για να γίνει αυτό, θα καταγραφεί ένα συμβάν στο έγγραφο έτοιμο:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. / / Κάνε κάτι όταν το DOM είναι έτοιμη
  3. ))?

Απλά βάλτε ένα συναγερμού () λειτουργία που δεν έχει και πολύ νόημα, δεδομένου ότι το σήμα () δεν απαιτεί τη φόρτωση του DOM. Οπότε ας προσπαθήσουμε κάτι πιο εξελιγμένα: Πρόσκληση συναγερμού (), όταν μια σύνδεση έχει πατηθεί.

Προσθέστε την ακόλουθη εντός <body>:

Απλό Κείμενο
HTML:
  1. > Link </a> <Ένα href = "" <Σύνδεσμος> / a>

Τώρα τροποποιήστε το $ (έγγραφο). Ready:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . click ( function ( ) { $ ("Α"). Κάντε κλικ (λειτουργία () (
  3. "Olá Mundo!" ) ; alert ("Hello World!")?
  4. ))?
  5. ))?

Και έτσι θα πρέπει να δείτε το σήμα ότι έτσι κάνοντας κλικ στο σύνδεσμο.

Ας δούμε τι κάνουμε καλύτερα: $ ("α") είναι ένα jQuery επιλογέας, στην οποία περίπτωση, θα επιλέγει όλα τα στοιχεία. $ Είναι ένα ψευδώνυμο για το jQuery λειτουργία, τότε $ () δημιουργεί ένα νέο αντικείμενο jQuery. Λειτουργία κλικ () κλήση τότε είναι μια μέθοδος του αντικειμένου jQuery. Κολλά μια εκδήλωση κλικ σε όλα τα επιλεγμένα στοιχεία (στην περίπτωση του παραδείγματός μας, ένα ενιαίο σύνδεσμο / link) και εκτελεί την καθορισμένη λειτουργία, όταν πραγματοποιείται το συμβάν.

Όλα αυτά είναι παρόμοια με τον ακόλουθο κώδικα:

Απλό Κείμενο
HTML:
  1. onclick = "alert('Olá Mundo!')" > Link </a> <Ένα href = "" onclick = "alert ('Hello World')"> <Link / a>

Αλλά ο τρόπος μας, δεν χρειαζόμαστε γράψετε onclick () για κάθε στοιχείο. Εμείς ξεχωριστή δομή (HTML) συμπεριφορά (JS), καθώς και ξεχωριστή δομή και την παρουσίαση με χρήση CSS.

Τούτου λεχθέντος, ας διερευνήσουν περαιτέρω επιλογείς και εκδηλώσεις.

Βρες μου: Χρησιμοποιώντας επιλογείς και εκδηλώσεις

jQuery μας δίνει δύο τρόπους να επιλέξετε στοιχεία. Η πρώτη χρησιμοποιεί ένα συνδυασμό των CSS και XPath επιλογείς πέρασε ως κείμενο στην jQuery κατασκευαστή (π.χ.: $ ("div> ul μια")). Η δεύτερη προσέγγιση χρησιμοποιεί διάφορες μεθόδους του jQuery αντικειμένου. Και οι δύο τρόποι μπορούν να αναμειχθούν.

Να πειραματιστούν με κάποια από αυτές τις επιλογείς, επιλέγουμε και να τροποποιήσετε το πρώτο διέταξε κατάλογο των starterkit.

Για να ξεκινήσω, θα επιλέξετε τη λίστα ίδια. Ο κατάλογος έχει το id "orderedlist. Σε καθαρή JavaScript, μπορείτε να επιλέξετε χρησιμοποιώντας document.getElementById ("orderedlist). Με jQuery, θα το πράξουν:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . addClass ( "red" ) ; $ ("# Orderedlist). AddClass (" κόκκινη ")?
  3. ))?

Η starterkit έρχεται με ένα φύλλο στυλ (CSS) με μια κατηγορία που ονομάζεται "κόκκινο", το οποίο ορίζει απλώς ένα κόκκινο φόντο. Έτσι, όταν επαναφορτώσετε τη σελίδα στον browser σας, θα πρέπει να δείτε τον πρώτο πίνακα με κόκκινο φόντο. Και το δεύτερο κατάλογο, με τροποποιήσεις.

Τώρα ας προσθέσουμε μερικές ακόμη κατηγορίες με τα στοιχεία που το παιδί του εν λόγω καταλόγου:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . addClass ( "blue" ) ; $ ("# Orderedlist> li"). AddClass ("μπλε")?
  3. ))?

Η παραπάνω κωδικό επιλέγει παιδιών li στοιχείο με όλα τα id orderedlist τους και προσθέτει την κατηγορία "μπλε".

Τώρα κάτι λίγο πιο πολύπλοκες. Θέλουμε να προσθέσετε και να αφαιρέσετε την κατηγορία, όταν ο χρήστης περνάει πάνω από το li στοιχείο, αλλά μόνο το τελευταίο στοιχείο της λίστας.

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . hover ( function ( ) { $ ("# Li orderedlist: την τελευταία»). Hover (λειτουργία () (
  3. ) . addClass ( "green" ) ; $ (Αυτό). AddClass ("πράσινων")?
  4. ( ) { ), Λειτουργία () (
  5. ) . removeClass ( "green" ) ; $ (Αυτό). RemoveClass ("πράσινων")?
  6. ))?
  7. ))?

Για κάθε onXYZ γεγονός όπως onclick, onchange, onsubmit υπάρχει ένα jQuery ισοδύναμες. Ορισμένα άλλα στοιχεία, όπως είναι έτοιμη και πλανιέμαι, είναι διαθέσιμες ως βολικό μεθόδους για ορισμένα καθήκοντα.

Με αυτές τις επιλογείς και εκδηλώσεις που μπορείτε να κάνετε ήδη πολλά πράγματα, αλλά υπάρχουν και άλλα.

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . find ( "li" ) . each ( function ( i ) { $ ("# Orderedlist). Εύρεση (" LI "). Κάθε (λειτουργία (i) (
  3. ) . append ( " BAM! " + i ) ; $ (Αυτό). Προσάρτηση ("BAM!" + I)?
  4. ))?
  5. ))?

Το να βρείτε () μέθοδος σας επιτρέπει να αναζητήσετε στο απόγονοι του στοιχείου που έχουν ήδη επιλεγεί, στη συνέχεια, $ ("# orderedlist). Εύρεση (" LI ") είναι παρόμοια με $ (" # orderedlist li »).

Η μέθοδος που κάθε () επαναλαμβάνει με κάθε στοιχείο και να επιτρέψουν τη μελλοντική επεξεργασία. Πολύ μεθόδους, όπως addClass (), η χρήση κάθε () μόνα τους.

Στο προηγούμενο παράδειγμα, μπορείτε να προσθέσετε () χρησιμοποιεί για να ενώσετε κάποιο κείμενο στο στοιχείο.

Ένα άλλο έργο που βρίσκεται συνήθως είναι η κλήση των μεθόδων με DOM στοιχεία που δεν υπάρχουν σε jQuery. Φανταστείτε μια μορφή που θα θέλατε να το υποβάλει εκ νέου μετά την επιτυχία μέσω AJAX.

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. / / Χρησιμοποιήστε το για να ξεκινήσει ένα ενιαίο έντυπο
  3. ) . click ( function ( ) { $ ("# Reset"). Κάντε κλικ (λειτουργία () (
  4. ) [ 0 ] . reset ( ) ; $ («Μορφή») [0]. Reset ()?
  5. ))?
  6. ))?

Η παραπάνω κωδικό επιλέγει το πρώτο στοιχείο της φόρμας και στη συνέχεια καλεί reset () του. Αν έχετε περισσότερες από μία μορφή στη σελίδα, θα μπορούσατε να κάνετε και αυτό:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. / / Χρησιμοποιήστε το για να ξεκινήσει πολλαπλές μορφές με τη μία
  3. ) . click ( function ( ) { $ ("# Reset"). Κάντε κλικ (λειτουργία () (
  4. ) . each ( function ( ) { $ («Μορφή»). Κάθε (λειτουργία () (
  5. ( ) ; αυτή. reset ()?
  6. ))?
  7. ))?
  8. ))?

Το προηγούμενο παράδειγμα επιλέγει όλα μορφή του εγγράφου σας, επαναλαμβάνει τους και καλέστε reset () για κάθε μία. Σημειώστε ότι σε κάθε () λειτουργία, αυτό αναφέρεται στο τρέχον στοιχείο. Επίσης, σημειώστε τα εξής, μετά την επαναφορά λειτουργία () ανήκει στο στοιχείο της φόρμας και να μην το jQuery αντικείμενο, δεν μπορούμε απλά να καλέσετε $ ("μορφή"). Reset () να επαναλάβει όλες τις μορφές της σελίδας.

Μια κοινή πρόκληση είναι να επιλέξετε μόνο τα στοιχεία μιας ομάδας παρόμοια ή ίδια. jQuery έχει τις μεθόδους φίλτρου () και δεν () για αυτό. Ενώ φίλτρου () μειώνει την επιλογή των στοιχείων με εκείνα που βρέθηκαν στο χρησιμοποίησε την έκφραση φίλτρο, δεν () κάνει το αντίθετο και καταργεί όλα τα στοιχεία που βρέθηκαν στην έκφραση. Φανταστείτε έναν κατάλογο όπου επιτυγχάνεται με την εντολή που θέλετε να επιλέξετε όλα li στοιχεία που δεν έχουν παιδιά ul.

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . not ( ":has(ul)" ) . css ( "border" , "1px solid black" ) ; $ ("Li"). Δεν έχει (": έχει (UL)»). Css ("συνόρων", "1px solid black")?
  3. ))?

Ο κωδικός αυτός επιλέγει όλα li στοιχεία, αφαίρεση όσων έχουν παιδιά ul, και εφαρμόζει ένα μαύρο περίγραμμα σε αυτούς.

Η σύνταξη] έκφραση [προέρχεται από XPath και μπορεί να χρησιμοποιηθεί για το φιλτράρισμα κατά ιδιότητες. Μπορεί να θέλετε να επιλέξετε όλες τις συνδέσεις που έχουν το όνομα του χαρακτηριστικού:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . css ( "background" , "#eee" ) ; $ ("A [@] όνομα"). Css ("προϋπάρχοντα στοιχεία", "eee #")?
  3. ))?

Πιθανώς περισσότερο κοινό να επιλέξετε συνδέσεις με βάση το όνομα, συνδέσεις που θέλετε να επιλέξετε το χαρακτηριστικό "href" τους. Αυτό μπορεί να είναι ένα πρόβλημα, δεδομένου ότι browsers ασχοληθεί με ασυνέπεια, τι είναι "href" καθένα με τον τρόπο του. Για να επιλέξετε τμήμα της αξίας, μπορούμε να χρησιμοποιήσουμε τον επιλογέα περιέχει "*=" όχι ίση "=":

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . click ( function ( ) { $ ("A [@ href *= / περιεχομένου / gallery]»). Κάντε κλικ (λειτουργία () (
  3. / / Κάνε κάτι με όλες τις συνδέσεις που έχουν / περιεχομένου / gallery
  4. ))?
  5. ))?

Μέχρι σήμερα, όλες οι επιλογείς χρησιμοποιήθηκαν για την επιλογή των παιδιών ή το φίλτρο της τρέχουσας επιλογής. Υπάρχουν καταστάσεις όπου πρέπει να επιλέξετε το επόμενο ή το προηγούμενο στοιχεία, που είναι γνωστή ως αδελφούς. Φανταστείτε μια σελίδα FAQ που είναι τα ερωτήματα που αρχικά κρυμμένο, αλλά εμφανίζονται όταν το ερώτημα είναι πατηθεί. Το jQuery κώδικας για αυτό είναι:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . find ( 'dd' ) . hide ( ) . end ( ) . find ( 'dt' ) . click ( function ( ) { $ ('# Faq »). Εύρεση (δδ). Hide (). End (). Εύρεση (« dt »). Κάντε κλικ (λειτουργία () (
  3. ) . next ( ) . slideToggle ( ) ; $ (Αυτό). Next (). SlideToggle ()?
  4. ))?
  5. ))?

Εδώ χρησιμοποιούμε τον καταρράκτη να μειώσει το μέγεθος κώδικα και τη βελτίωση των επιδόσεων, αφού «# FAQ" είναι επιλεγμένη μόνο μία φορά. Όταν χρησιμοποιείτε τέλος (), η πρώτη βρείτε () είναι σπασμένα, μπορούμε να κοιτάξουμε το επόμενο βρείτε () σχετικά στοιχείο # faq και όχι τα παιδιά των δδ.

Μέσα σε ένα κλικ (), χρησιμοποιούμε $ (αυτό). Επόμενο () για να βρείτε το επόμενο αδελφό του σημερινού dt. Αυτό μας επιτρέπει να επιλέξετε γρήγορα την εξής απάντηση στο ερώτημα πατηθεί.

Εκτός από αδέλφια, μπορείτε επίσης να επιλέξετε στοιχεία γονείς. Ίσως θέλετε να δώσετε έμφαση σύνδεσμος γονέων της παραγράφου είναι ότι ο χρήστης περνά το ποντίκι πάνω. Δοκιμάστε τα εξής:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . hover ( function ( ) { $ ("Α"). Hover (λειτουργία () (
  3. ) . parents ( "p" ) . addClass ( "highlight" ) ; $ (Αυτό). Γονείς ("p"). AddClass ("highlight")?
  4. ( ) { ), Λειτουργία () (
  5. ) . parents ( "p" ) . removeClass ( "highlight" ) ; $ (Αυτό). Γονείς ("p"). RemoveClass ("highlight")?
  6. ))?
  7. ))?

Πάμε πίσω ένα βήμα πριν συνεχίσει: jQuery επικεντρώνεται της μετατροπής του κώδικα μικρότερα και ως εκ τούτου πιο εύκολο να διαβάσει και να διατηρηθεί. Η επόμενη γραμμή είναι μια συντόμευση για $ (έγγραφο). Ready (callback):

Απλό Κείμενο
JAVASCRIPT:
  1. ( ) { $ (Function () (
  2. / / Κώδικας για να τρέξει Όταν το DOM είναι έτοιμη
  3. ))?

Εφαρμόζοντας το παράδειγμα Hello World, έχουμε το εξής:

Απλό Κείμενο
JAVASCRIPT:
  1. ( ) { $ (Function () (
  2. ) . click ( function ( ) { $ ("Α"). Κάντε κλικ (λειτουργία () (
  3. "Olá Mundo!" ) ; alert ("Hello World!")?
  4. ))?
  5. ))?

Καλύπτονται τα βασικά, θα αναζητήσουμε και άλλες πτυχές, που αρχίζει με AJAX.

Βαθμολογία μου: Η χρήση Ajax

Σε αυτό το πλαίσιο έχουμε γράψει μια μικρή εφαρμογή Ajax, να κρατήσει σημειώσεις για κάτι, όπως γίνεται με τα βίντεο στο youtube.com.

Δεν θέλουμε αυτό το παράδειγμα, να εργάζονται χωρίς Αίας, αν είναι δυνατό, τότε θα δημιουργήσει τον κώδικα και κείμενο με jQuery για να ενώσετε σε ένα div με id "ειδικότητα.

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. / / Δημιουργία κώδικα
  3. ) . append ( "Por favor dê nota: " ) ; $ ("# Rating»). Προσάρτηση ("Παρακαλούμε προσέξτε:")?
  5. var i = 1 ; i <= 5 ; i++ ) για (var i = 1? i <= 5? i + +)
  6. ) . append ( "<a href='#'>" + i + "</a> " ) ; $ ("# Rating»). Προσάρτηση ("<a href='#'>" + i + "</ a>")?
  8. / / Προσθέστε κώδικα στο div και να εφαρμόσουν τους διαχειριστές κλικ σε συνδέσμους
  9. ) . click ( function ( e ) { $ ("# Rating σε"). Κάντε κλικ (λειτουργία (ε) (
  10. / / Αποτροπή κανονικής κλικ σε συνδέσμους
  11. ; ε. preventDefault ()?
  13. / / Είτε να ζητήσει Αποστολή
  14. "exemplo.php" , { rating: $ ( this ) . html ( ) } , function ( xml ) { $. Ταχυδρομείων (exemplo.php ", (βαθμολογία: $ (αυτό). Html ()), λειτουργία (XML) (
  15. / / Μορφή και εμφάνιση αποτελέσματος
  16. ) . html ( $ ("# Rating»). Html (
  17. "Ευχαριστώ για τη σημείωση, σημερινός μέσος όρος:" +
  18. , xml ) . text ( ) + $ ("Όρος", xml). Κειμένου () +
  19. "Αριθμός ψήφων:" +
  20. , xml ) . text ( ) $ ("Count", xml). Κείμενο ()
  21. )?
  22. ))?
  23. ))?
  24. ))?

Αυτό το κομμάτι του κώδικα δημιουργεί τα πέντε στοιχεία και να ενώσετε τους στο στοιχείο με αναγνωριστικό "βαθμολογία. Στη συνέχεια, για κάθε κρίκο της div, τότε διευθυντής προστίθεται. Όταν η σύνδεση γίνεται κλικ, ένα αίτημα θέση αποστέλλεται σε exemplo.php με το περιεχόμενο της σχέσης ως παράμετρος. Τα αποτελέσματα επιστρέφονται ως XML προστίθεται στο div, που αντικαθιστά τους συνδέσμους.

Ένα πρόβλημα που αντιμετωπίζουν συχνά, όταν το περιεχόμενό φόρτωση μέσω Ajax είναι η εξής: Με την προσθήκη χειριστές γεγονότων στο εν λόγω έγγραφο θα πρέπει επίσης να αναληφθούν στο περιεχόμενο, θα πρέπει να τις εφαρμόσουν μετά τη φόρτωση του περιεχομένου. Να αποφεύγεται η επανάληψη κώδικα, μπορείτε να αναθέσετε σε μια λειτουργία. Παράδειγμα:

Απλό Κείμενο
JAVASCRIPT:
  1. addClickHandlers λειτουργία () (
  2. , this ) . click ( function ( ) { $ ("A.remote", αυτό). Κάντε κλικ (λειτουργία () (
  3. ) . load ( this . href , addClickHandlers ) ; $ ("# Target»). Φορτίο (this. href, addClickHandlers)?
  4. ))?
  5. )
  6. . ready ( addClickHandlers ) ; $ (Έγγραφο). Ready (addClickHandlers)?

Τώρα addClickHandlers καλείται μόνο μία φορά κατά την DOM είναι έτοιμοι και κάθε φορά που ο χρήστης κάνει κλικ σε μια σύνδεση με την απομακρυσμένη τάξη και το περιεχόμενο έχει ολοκληρωθεί η φόρτωση.

Την προσοχή στο $ ("a.remote", αυτό), αυτό μεταβιβάζεται ως πλαίσιο: Σε περίπτωση που το έγγραφο έτοιμο, αυτό αναφέρεται στο έγγραφο και ως εκ τούτου να απαιτήσει την όλη document για συνδέσεις με τα remote class. Όταν addClickHandlers χρησιμοποιείται ως επανάκλησης να φορτώσει (), αυτό αναφέρεται σε ένα διαφορετικό στοιχείο: Στο παράδειγμά μας, το στοιχείο με αναγνωριστικό "στόχος". Αυτό εμποδίζει την εκδήλωση πατήστε εφαρμόζεται επανειλημμένα στους ίδιους συνδέσμους.

Ένα άλλο κοινό πρόβλημα με τις επιστροφές κλήσης είναι παράμετροι. Μπορείτε να καθορίσετε επανάκλησης σας, αλλά πρέπει να υποστούν πρόσθετη παράμετρο. Ο ευκολότερος τρόπος να κάνει που είναι συσκευασμένο μέσα σε ένα άλλο επανάκλησης λειτουργία:

Απλό Κείμενο
JAVASCRIPT:
  1. / / Get δεδομένα
  2. var foobar = ...?
  4. / / Διευθυντής διευκρινιστεί, θα πρέπει να ημερομηνία ως παράμετρο
  5. data ) { handler λειτουργία (στοιχεία) (
  6. //...
  7. )
  9. / / Προσθήκη κλικ () και να περάσει foobar
  10. ) . click ( function ( ) { $ ('Α'). Κάντε κλικ (λειτουργία () (
  11. ; εξυπηρέτησης (foobar)?
  12. ))?
  14. / / Αν χρειάζεστε το αρχικό πλαίσιο του διαχειριστή, χρήση εφαρμόζεται ():
  15. ) . click ( function ( ) { $ ('Α'). Κάντε κλικ (λειτουργία () (
  16. this , [ foobar ] ) ; handler. εφαρμόζουν (αυτό, [foobar])?
  17. ))?

Τώρα που έχουμε δει λίγο Αίας, θα προσθέσουμε μερικές απλές ενέργειες και κινούμενες εικόνες στη σελίδα.

Μου anime: Χρησιμοποιώντας Επιδράσεις

Οι κινήσεις γίνονται με απλή jQuery δείτε () και απόκρυψη ():
[Javascipt] $ (έγγραφο). Ready (λειτουργία () (
$ ("Α"). Εναλλαγή (λειτουργία () (
$ (. "Stuff".) Απόκρυψη («αργή»)?
), Λειτουργία () (
$ (. "Stuff"). Show («γρήγορο»)?
))?
});[/ Javascipt]

Μπορείτε να δημιουργήσετε οποιοδήποτε συνδυασμό των animations να προσθέσετε κίνηση (), π.χ. διαφάνειες με αδιαφάνεια:
$ (Έγγραφο). Ready (λειτουργία () (
$ ("Α"). Εναλλαγή (λειτουργία () (
$ (. "Stuff"). Κίνηση ((ύψος: «κρύβεται», αδιαφάνεια: «κρύβεται»), «αργή»)?
), Λειτουργία () (
$ (. "Stuff"). Κίνηση ((ύψος: «δείχνουν», αδιαφάνεια: «δείχνουν»), «αργή»)?
))?
))?

Πολλές άλλες νομικές σκοπούς μπορεί να γίνει με μια συλλογή των plugins interface . Παρά το γεγονός ότι Interface να είναι στην κορυφή της λίστας των plugins για jQuery, υπάρχουν και πολλοί άλλοι. Το επόμενο μέρος χρησιμοποιεί το plugin tablesorter .

I προκειμένου: Χρησιμοποιώντας το plugin tablesorter

Το plugin επιτρέπει tablesorter είδος πίνακες απευθείας στο πρόγραμμα περιήγησης. Έχετε συμπεριλάβει το jQuery βιβλιοθήκη και το αρχείο του plugin, απλά μιλά τι πίνακες που θέλετε να ταξινομήσετε.

Για παράδειγμα, το έργο αυτό θα πρέπει να τραβάτε το βύσμα tablesorter και προσθέστε την ακόλουθη γραμμή στο starterkit.html (κάτω από το οποίο περιλαμβάνει την jquery):

Απλό Κείμενο
HTML:
  1. > </script> <Script src = "jquery.tablesorter.js"> </ script>

Μετά την προσθήκη του plugin, μπορείτε να καλέσετε τα εξής:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . tablesorter ( ) ; $ ("# Large"). Tablesorter ()?
  3. ))?

Δοκιμάστε να κάνετε κλικ στις κεφαλίδες πίνακα του δείγματος αρχείο και να δούμε πώς είναι οργανωμένο τρόπο πάνω και κάτω για το πρώτο κλικ στο δεύτερο.

Ένας πίνακας μπορεί να έχουν σειρές που επισημαίνονται, και μπορούμε να το κάνουμε αυτό με το πέρασμα κάποιες επιλογές:

Απλό Κείμενο
JAVASCRIPT:
  1. . ready ( function ( ) { $ (Έγγραφο). Ready (λειτουργία () (
  2. ) . tablesorter ( { $ ("# Large"). Tablesorter ((
  3. / / Ραβδώσεις Visual
  4. ] widgets: ζέβρα '] [
  5. ))?
  6. ))?

Τα περισσότερα plugins μπορούν να χρησιμοποιηθούν επίσης. Περιλαμβάνουν το plugin αρχείο και κλήση των μεθόδων της σε ορισμένα στοιχεία, περνώντας πρόσθετες ρυθμίσεις για παραμετροποίηση.

Ενημερωμένο κατάλογο των plugins μπορείτε να βρείτε στην jQuery Plugin .

Όταν χρησιμοποιείτε jQuery συχνά, μπορείτε να το βρείτε χρήσιμο να τυλίξουν τον κωδικό σας ως plugin, ή να το χρησιμοποιήσετε ξανά τον εαυτό σας ή την εταιρεία σας, ή να το μοιραστείτε με την κοινότητα. Το επόμενο κεφάλαιο δίνει μερικές συμβουλές για το πώς να δομηθεί ένα plugin.

Κρατήστε μου: Γράφοντας το δικό σας plugins

Γράψτε τη δική σας plugin για jQuery είναι αρκετά εύκολη. Και απαντώ με τους ακόλουθους κανόνες, καθιστούν ευκολότερη για τους άλλους ανθρώπους να ενσωματώσει plugin σας.

Το όνομα του plugin

Βρείτε ένα όνομα για αυτήν, θα καλέσουμε το δικό μας "foobar". Δημιουργήστε ένα αρχείο που ονομάζεται jquery.nomedoplugin.js, π.χ. jquery.foobar.js

Προσθέστε τις δικές τους μεθόδους

Δημιουργήστε μία ή περισσότερες μεθόδους plugins για την παράταση της jQuery αντικείμενο, π.χ.

Απλό Κείμενο
JAVASCRIPT:
  1. = function ( ) { jQuery. υποσημείωση. foobar = λειτουργία () (
  2. / / Κάνε κάτι
  3. )?

Η οποία θα είναι διαθέσιμα από τη λειτουργία:

Απλό Κείμενο
JAVASCRIPT:
  1. . foobar ( ) ; $ (...). Foobar ()?

Confirguração πρότυπο

Δημιουργήστε τις προεπιλεγμένες ρυθμίσεις που μπορούν να τροποποιηθούν από τους χρήστες, όπως π.χ.:

Απλό Κείμενο
JAVASCRIPT:
  1. = function ( options ) { jQuery. υποσημείωση. foobar = λειτουργία (επιλογές) (
  2. ( { var ρυθμίσεις = jQuery. επεκτείνει ((
  3. : "pete" , bar: 655 τιμή: 5, το όνομα: "Pete", bar: 655
  4. ; ), Options)?
  5. )?

Μπορείτε να καλέσετε το plugin χωρίς επιλογές, χρησιμοποιώντας τα πρότυπα:

Απλό Κείμενο
JAVASCRIPT:
  1. ) . foobar ( ) ; $ ("..."). Foobar ()?

Ή με κάποιες επιλογές:

Απλό Κείμενο
JAVASCRIPT:
  1. ) . foobar ( { value: 123 , bar: 9 } ) ; $ ("..."). Foobar ((τιμή: 123, bar: 9))?

Τεκμηρίωση

Αν δώσετε plugin σας, μπορείτε να δώσετε κάποια παραδείγματα και τεκμηρίωση. Υπάρχουν πολλά plugins που διαθέτει, ότι μπορείτε να χρησιμοποιήσετε ως αναφορά.

Βασικές γνώσεις για να γράψει plugins που είναι. Ας γράψω ένα μας.

Plugin κουτάκι

Πολλοί άνθρωποι, να χειρίζονται τις μορφές με jQuery, ερωτηματικό και αποεπιλέξτε κουμπιά ή κουτάκια. Ο κωδικός πάει κάπως έτσι:

Απλό Κείμενο
JAVASCRIPT:
  1. ) . each ( function ( ) { $ ("Input [@ type =" κουτάκι']"). Κάθε (λειτουργία () (
  2. = true ; αυτή. ελέγχεται = αλήθεια?
  3. = false ; // ou, para desmarcar αυτή. ελέγχεται = false? / ή για να καθαρίσετε
  4. = ! this . checked ; // ou, para inverter αυτή. ελέγχεται =! αυτό. ελεγχθεί / / ή για την αντίστροφη
  5. ))?

Ως ένα plugin είναι απλή:

Απλό Κείμενο
JAVASCRIPT:
  1. = function ( ) { jQuery. υποσημείωση. ελέγξετε = λειτουργία () (
  2. ( function ( ) { επιστροφή αυτή. καθένα (λειτουργία () (
  3. = true ; αυτή. ελέγχεται = αλήθεια?
  4. ))?
  5. )?

Και τώρα μπορεί να χρησιμοποιηθεί:

Απλό Κείμενο
JAVASCRIPT:
  1. ) . check ( ) ; $ ("Input [@ type =" κουτάκι']"). έλεγχος ()?

Θα μπορούσατε να γράψετε επίσης plugins για να απενεργοποιήσετε () και inverterCheck (). Αλλά αντ 'αυτού ας επεκταθεί plugins μας να δεχτεί κάποιες εναλλακτικές λύσεις.

Απλό Κείμενο
JAVASCRIPT:
  1. = function ( mode ) { jQuery. υποσημείωση. ελέγξετε = λειτουργία (mode) (
  2. / / Αν λειτουργία δεν έχει οριστεί, χρησιμοποιούμε «on» ως προεπιλογή
  3. ; var mode = mode | | «on»?
  5. ( function ( ) { επιστροφή αυτή. καθένα (λειτουργία () (
  6. mode ) { switch (mode) (
  7. : «N περίπτωση»:
  8. = true ; αυτή. ελέγχεται = αλήθεια?
  9. διάλειμμα?
  10. : «Μεμονωμένη περίπτωση»:
  11. = false ; αυτή. ελέγχεται = false?
  12. διάλειμμα?
  13. : «Μπαρέτα περίπτωση»:
  14. = ! this . checked ; αυτή. ελέγχεται =! αυτό. ελεγχθεί?
  15. διάλειμμα?
  16. )
  17. ))?
  18. )?

Επιτρέποντας μια βασική επιλογή, ο χρήστης μπορεί να παραλείψει την επιλογή ή να περάσει ένα άλλο: "την" ή "off" και "μπαρέτα", ex.:

Απλό Κείμενο
JAVASCRIPT:
  1. ) . check ( ) ; $ ("Input [@ type =" κουτάκι']"). έλεγχος ()?
  2. ) . check ( 'on' ) ; $ ("Input [@ type =" κουτάκι']"). έλεγχος («on»)?
  3. ) . check ( 'off' ) ; $ ("Input [@ type =" κουτάκι']"). έλεγχος («εκτός»)?
  4. ) . check ( 'toggle' ) ; $ ("Input [@ type =" κουτάκι']"). έλεγχος («μπαρέτα ')?

Προαιρετικές ρυθμίσεις

Με περισσότερες από μία επιλογές προαιρετικά, αυτό τον τρόπο είναι πολύπλοκη διότι ο χρήστης θα πρέπει να περάσει null αξίες στις οποίες θέλει να παραλείπουν.

Η χρήση του στο παρελθόν tablesorter αποδεικνύει την εφαρμογή ενός αντικειμένου να επιλύσει αυτό το πρόβλημα. Μπορείτε να παραλείψετε όλες τις παραμέτρους που περνούν ή ένα αντικείμενο με το κλειδί / τιμή για κάθε ρύθμιση που πρέπει να αντικατασταθούν.

Σαν άσκηση, μπορείτε να προσπαθήσετε να ξαναγράψουμε τον κώδικα, όπως παραπάνω plugin σημείωμα. Ο σκελετός του κώδικα θα μοιάζουν με:

Απλό Κείμενο
JAVASCRIPT:
  1. = function ( options ) { jQuery. υποσημείωση. rateMe = λειτουργία (επιλογές) (
  2. / / Αντί να επιλέξετε ένα δοχείο με σταθερή
  3. / / $ ("# Rating»), χρησιμοποιούμε το jQuery πλαίσιο
  4. ; var = δοχείο αυτό?
  6. ( { var ρυθμίσεις = jQuery. επεκτείνει ((
  7. url: "exemplo.php"
  8. / / Περισσότερα μοντέλα εδώ θα
  9. ; ), Options)?
  11. / / ... υπόλοιπο του κώδικα ...
  13. / / Αν είναι δυνατόν, η απόδοση "αυτή" να μην σπάσει τον καταρράκτη
  14. επιστρέψετε αυτό?
  15. ))?
  17. Επιτρέποντάς σας να εκτελέσετε το plugin ως εξής:
  18. $ ( ... ) . rateMe ( { url: "test.php" } ) ; [Javascript] $ (...). RateMe ((url: "test.php"))?

  • Anderson
    Γεια σου, βρήκα φροντιστήριο mt σας ενδιαφέροντα και να έχουν μια ερώτηση ...

    Έχω αυτό το ένα και επιλέξτε Πρέπει να καλέσετε την ίδια λειτουργία και στα δύο onchage onclick γεγονότα και κοιτάζει τώρα κάπως έτσι:

    $ ("# Επαγγέλματος»). Μεταβολή (λειτουργία () (
    $. Ταχυδρομείων ("buscaEspecialidade.php» ειδικότητα (: $ (αυτό). Val ()), λειτουργία (απάντηση) (
    if (! απάντηση == "") (
    $ ("# Special"). Show ()?
    $ ("# Περιεχόμενο"). Html (απάντηση)?
    Else ()
    $ ("# Special"). Hide ()?
    $ ("Περιεχόμενο #"). Html ("");
    )
    ))?
    ))

    αλλά πρέπει να συνεργάζονται με την ίδια λειτουργία με το γεγονός κλικ, μπορείτε να φοράτε τα ίδια συσχέτιση λειτουργία των δύο γεγονότων και κλικ στο κουμπί Αλλαγή;;

    Περιμένω την απάντησή σας!

    Valeuuu
blog παρατηρήσεις που κινούνται με Disqus

Έρευνα

Portugus flagItaliano flagCoreano flagChins (simplificado) flagEnglish flagAlemo flagFrancs flagEspanhol flag
Japons flagrabe flagRusso flagHolands flagBlgaro flagTcheco flagCroata flagDinamarqus flag
Finlands flagHindu flagPolons flagRomeno flagSueco flagGrego flagNoruegus flag 
By N2H
Dolet 96 έκπτωση σε Dreamhost φιλοξενία!
Χρησιμοποιήστε το "PROMO CODE" αδράνεια. LAMP με 20GB χώρο και 1TB της μεταφοράς.

Σχετικά άρθρα

  • Δεν υπάρχουν σχετικές θέσεις

Κατηγορίες