Σενάρια Jquery. Μια συλλογή από σενάρια jQuery από την Dimox. Δημιουργία νέων στοιχείων
Με την αυγή του WEB 2.0, αναπτύχθηκαν επίσης πλαίσια javascript, επιτρέποντας στους webmasters να δημιουργούν δυναμικά στοιχεία ιστότοπου πολύ πιο γρήγορα και εύκολα. Ένα τέτοιο πλαίσιο είναι το jQuery, το οποίο έχει κερδίσει τεράστια δημοτικότητα για την απλότητα και το απίστευτα μικρό βάρος του. Σας παρουσιάζω λοιπόν τα 10 πιο χρήσιμα σενάρια jQuery για τη βελτίωση της διεπαφής της ιστοσελίδας σας.
Χοντρό κουτί
Περιγραφή: Απαιτείται για να επιστήσει την προσοχή του χρήστη σε κάποιο κείμενο, εικόνα ή φόρμα ιστού μέσω ενός παραθύρου.
Πότε και πού να χρησιμοποιήσετε: Όταν πρέπει να εμφανίσετε περισσότερες πληροφορίες στον χρήστη, να εμφανίσετε μια μεγαλύτερη εικόνα, να κάνετε μερικές ερωτήσεις με μια φόρμα ιστού ή να εμφανίσετε μια φόρμα σύνδεσης, αλλά δεν θέλετε ο χρήστης να φύγει από τη σελίδα.
Σενάριο, παράδειγμα, τεκμηρίωση
WordPress plugin
Πίνακες
Περιγραφή: Σας επιτρέπει να εμφανίζετε περιεχόμενο σελίδας σε καρτέλες.
Πότε και πού να χρησιμοποιείται: Όταν θέλετε να ελευθερώσετε χώρο στην οθόνη παρέχοντας γρήγορη πρόσβαση σε κρυφές πληροφορίες. Χρησιμοποιείται συχνά σε widget για διάφορα premium θέματα WordPress.
Σενάριο, παράδειγμα, τεκμηρίωση
WordPress plugin
Ρυθμιστικό Coda
Περιγραφή: Δημιουργεί ένα ρυθμιστικό, όπως στο στιγμιότυπο οθόνης από τον ιστότοπο της Coda.
Πότε και πού να χρησιμοποιείται: Όπως και με το Coda, αυτό το σενάριο είναι εξαιρετικό για την παρουσίαση προϊόντων ή υπηρεσιών ομαδοποιημένων σε ενότητες. Οι χρήστες λαμβάνουν μια γρήγορη επισκόπηση καθώς και μια διαισθητική πλοήγηση.
Σενάριο, παράδειγμα, τεκμηρίωση
Θέμα για το WordPress
Galleria
Περιγραφή: Η Galleria είναι μια γκαλερί javascript γραμμένη σε jQuery. Φορτώνει εικόνες μία προς μία και εμφανίζει μικρογραφίες τους.
Πότε και πού χρησιμοποιείται: Για την εμφάνιση φωτογραφιών ενός συμβάντος ή ενός προϊόντος, για παράδειγμα.
Σενάριο, παράδειγμα, τεκμηρίωση
jΣυμβουλή
Περιγραφή: Συμβουλές εργαλείων που εφαρμόζονται στο jQuery.
Πότε και πού χρησιμοποιείται: Όταν χρειάζεται να δώσετε περισσότερες πληροφορίες για ένα αντικείμενο στο πλαίσιο ενός άρθρου ή να εφαρμόσετε υποδείξεις στον χρήστη σε διάφορες φόρμες ιστού.
Σενάριο, παράδειγμα, τεκμηρίωση
WordPress plugin
Εναλλαγή φύλλων στυλ
Περιγραφή: Επιτρέπει στους επισκέπτες στον ιστότοπό σας να αλλάζουν ανεξάρτητα στυλ σχεδίασης "με ένα κλικ".
Πότε και πού να χρησιμοποιείται: Όταν θέλετε να επιτρέψετε στο χρήστη να επιλέξει διαφορετικά μεγέθη γραμματοσειράς, να εμφανίσει πληροφορίες που έχουν σχεδιαστεί για κινητό τηλέφωνο ή να εκτυπώσει ή να του επιτρέψετε να προσαρμόσει τα χρώματα. Η εναλλαγή φύλλων στυλ μπορεί πραγματικά να βοηθήσει στη βελτίωση της χρηστικότητας του ιστότοπού σας.
Σενάριο, παράδειγμα, τεκμηρίωση
WordPress plugin
Μενού jQuery Accordion
Περιγραφή: Σας επιτρέπει να δημιουργείτε δυναμικά μενού.
Σενάριο, παράδειγμα, τεκμηρίωση
WordPress plugin
Slider Gallery
Περιγραφή: Παρουσιάζει προϊόντα/εικόνες σε μια συλλογή με δυνατότητα κύλισης.
Πότε και πού να χρησιμοποιήσετε: Όταν θέλετε να χωρέσετε όλα τα στοιχεία στην πλαϊνή γραμμή, αλλά δεν υπάρχει αρκετός χώρος για όλες τις επιλογές.
Σενάριο, παράδειγμα, τεκμηρίωση
Επικύρωση φόρμας
Περιγραφή: Επικυρώστε φόρμες ιστού χρησιμοποιώντας την επικύρωση φόρμας για να αποφύγετε εσφαλμένα συμπληρωμένα πεδία.
Πότε και πού χρησιμοποιείται: Στις περισσότερες μορφές. Αυτό βοηθά τους χρήστες να κατανοήσουν ακριβώς πού συμπλήρωσαν εσφαλμένα πεδία επισημαίνοντας τα λάθη τους.
Σενάριο, παράδειγμα, τεκμηρίωση
jGrowl
Περιγραφή: Εμφανίζει μηνύματα στο πρόγραμμα περιήγησης όπως το Growl στο MacOSX
Πότε και πού να χρησιμοποιηθεί: Εάν ενημερώσετε τον χρήστη για μια ενέργεια, αλλά δεν θέλετε να φύγει από την τρέχουσα σελίδα/ανανεώστε την. Αυτός είναι ένας πολύ καλός τρόπος για να επιβεβαιώσετε ενέργειες που εκτελούνται από τον χρήστη, όπως η εγγραφή. Μπορείτε επίσης να χρησιμοποιήσετε το jGrowl σε διάφορα καταστήματα κ.λπ. για να επιβεβαιώσετε την προσθήκη ενός προϊόντος στο καλάθι σας ή να επιβεβαιώσετε μια συναλλαγή.
Σενάριο, παράδειγμα, τεκμηρίωση
Το jQuery είναι μια βιβλιοθήκη JavaScript που επιτρέπει στους προγραμματιστές ιστού να προσθέτουν προηγμένες λειτουργίες στους ιστότοπούς τους. Διατίθεται από και δωρεάν υπό την άδεια του MIT. Τα τελευταία χρόνια, το jQuery έχει γίνει η πιο δημοφιλής βιβλιοθήκη JavaScript που χρησιμοποιείται στην ανάπτυξη ιστού.
Παράδειγμα jQueryΓια να εφαρμόσει το jQuery, ένας προγραμματιστής ιστού πρέπει να αναφέρει ένα αρχείο JavaScript στον κώδικα HTML μιας ιστοσελίδας. Ορισμένοι ιστότοποι φιλοξενούν το δικό τους τοπικό αντίγραφο, ενώ άλλοι απλώς συνδέονται με μια βιβλιοθήκη που φιλοξενείται από την Google ή έναν διακομιστή. Για παράδειγμα, μια ιστοσελίδα θα μπορούσε να φορτώσει τη βιβλιοθήκη jQuery χρησιμοποιώντας την ακόλουθη γραμμή στην ενότητα HTML (παράδειγμα jQuery και cookie):
Παραδείγματα jQuery και AjaxΜόλις φορτωθεί η βιβλιοθήκη, η ιστοσελίδα μπορεί να καλέσει οποιαδήποτε λειτουργία που υποστηρίζεται από τη βιβλιοθήκη. Τα συνήθη παραδείγματα περιλαμβάνουν την αλλαγή κειμένου, την επεξεργασία δεδομένων φόρμας, τη μετακίνηση στοιχείων σε μια σελίδα και την εκτέλεση κινούμενων εικόνων. Το jQuery μπορεί επίσης να λειτουργήσει με κώδικα Ajax και παρόμοια με PHP και ASP για πρόσβαση σε δεδομένα από μια βάση δεδομένων. Επειδή το jQuery εκτελείται στην πλευρά του πελάτη (όχι στον διακομιστή ιστού), μπορεί να ενημερώσει πληροφορίες σε μια ιστοσελίδα σε πραγματικό χρόνο χωρίς να φορτώσει ξανά τη σελίδα. Ένα συνηθισμένο παράδειγμα είναι η αυτόματη συμπλήρωση, στην οποία μια φόρμα αναζήτησης εμφανίζει αυτόματα γενικά δεδομένα καθώς εισάγετε ένα ερώτημα.
Τα οφέλη της βιβλιοθήκηςΕκτός από τη δωρεάν άδειά του, ο άλλος κύριος λόγος για τον οποίο το jQuery έχει αποκτήσει τόση δημοτικότητα είναι η συμβατότητα μεταξύ προγραμμάτων περιήγησης. Δεδομένου ότι κάθε πρόγραμμα περιήγησης αποδίδει τη JavaScript διαφορετικά, μπορεί να είναι δύσκολο για έναν προγραμματιστή ιστού να κάνει έναν ιστότοπο να φαίνεται ίδιος σε όλα τα προγράμματα περιήγησης. Αντί να γράφει προσαρμοσμένες λειτουργίες για κάθε πρόγραμμα περιήγησης, ένας προγραμματιστής ιστού μπορεί να χρησιμοποιήσει μια μεμονωμένη λειτουργία jQuery που θα λειτουργεί σε Chrome, Safari, Firefox και Internet Explorer. Η υποστήριξη πολλών προγραμμάτων περιήγησης έχει κάνει πολλούς προγραμματιστές να μετακινηθούν από την τυπική JavaScript στο jQuery, καθώς απλοποιεί σημαντικά τη διαδικασία κωδικοποίησης.
Η σύνταξη jQuery χρησιμοποιείται για την απλοποίηση της πλοήγησης σε έγγραφα, την επιλογή στοιχείων DOM, τη δημιουργία κινούμενων εικόνων, τον χειρισμό συμβάντων και την ανάπτυξη εφαρμογών Ajax. Το jQuery δίνει επίσης στους προγραμματιστές τη δυνατότητα να δημιουργούν πρόσθετα πάνω από τη βιβλιοθήκη JavaScript. Επιτρέπει στους προγραμματιστές να δημιουργούν αφηρημένα σχέδια για αλληλεπίδραση και κινούμενα σχέδια χαμηλού επιπέδου, προηγμένα εφέ και υψηλού επιπέδου, θεματικά widget. Η αρθρωτή προσέγγιση της βιβλιοθήκης jQuery σάς επιτρέπει να δημιουργείτε ισχυρές, δυναμικές ιστοσελίδες και εφαρμογές Ιστού.
Σύνολο βασικών λειτουργιών:
- επιλογή στοιχείων DOM.
- παράκαμψη και χειραγώγηση με χρήση του μηχανισμού επιλογής.
- νέο στυλ προγραμματισμού?
- αλγόριθμοι συγχώνευσης και δομές δεδομένων DOM.
Το στυλ επηρέασε την αρχιτεκτονική άλλων πλαισίων JavaScript, όπως το YUI v3 και το Dojo, και επίσης ενέπνευσε τη δημιουργία του τυπικού Selectors API.
Η Microsoft και η Nokia παρέχουν jQuery στις πλατφόρμες τους. Η Microsoft το περιλαμβάνει με το Visual Studio για χρήση σε ASP.NET AJAX και ASP.NET MVC και η Nokia το έχει ενσωματώσει στην πλατφόρμα ανάπτυξης Web Time Widget.
Το jQuery είναι μια βιβλιοθήκη στοιχείων Document Object Model (DOM). Το DOM είναι μια αναπαράσταση της δενδρικής δομής όλων των στοιχείων μιας ιστοσελίδας. Το jQuery απλοποιεί τη σύνταξη για την εύρεση, επιλογή και χειρισμό αυτών των στοιχείων DOM. Η βιβλιοθήκη μπορεί να χρησιμοποιηθεί για να βρει ένα στοιχείο σε ένα έγγραφο με μια συγκεκριμένη ιδιότητα (για παράδειγμα, όλα τα στοιχεία με ετικέτα h1), να αλλάξει ένα ή περισσότερα από τα χαρακτηριστικά του (χρώμα, ορατότητα) ή να απαντήσει σε ένα συμβάν (για παράδειγμα, ένα κλικ του ποντικιού).
ΑνάπτυξηΗ βιβλιοθήκη χρησιμοποιεί δημοφιλείς λειτουργίες JavaScript, όπως fade ins και fade outs για απόκρυψη στοιχείων, κινούμενα σχέδια και εργασία με στοιχεία jQuery CSS. Το jQuery παρέχει επίσης ένα παράδειγμα για το χειρισμό συμβάντων που υπερβαίνει την επιλογή και το χειρισμό στοιχείων DOM. Η αντιστοίχιση ενός συμβάντος και ο καθορισμός μιας συνάρτησης επανάκλησης γίνονται σε ένα βήμα σε ένα σημείο στον κώδικα.
Αρχές ανάπτυξης με jQuery (παραδείγματα):
- Διαχωρίστε JavaScript και HTML - Η βιβλιοθήκη παρέχει μια απλή σύνταξη για την προσθήκη εργαλείων χειρισμού συμβάντων στο DOM χρησιμοποιώντας JavaScript, αντί να προσθέτει χαρακτηριστικά συμβάντων HTML για την κλήση συναρτήσεων JS. Έτσι, ενθαρρύνει τους προγραμματιστές να διαχωρίσουν πλήρως τον κώδικα JavaScript από τη σήμανση HTML.
- Συνοπτικότητα και σαφήνεια - Προωθεί τη συνοπτικότητα και τη σαφήνεια με εργαλεία όπως η αλυσίδα και τα συντομευμένα ονόματα συναρτήσεων.
- Εξαλείψτε τις ασυμβατότητες μεταξύ προγραμμάτων περιήγησης - Οι μηχανές JavaScript διαφέρουν ελαφρώς μεταξύ των προγραμμάτων περιήγησης, επομένως ο κώδικας JS που λειτουργεί για ένα πρόγραμμα περιήγησης ενδέχεται να μην λειτουργεί για άλλο. Όπως και άλλες εργαλειοθήκες JavaScript, το jQuery χειρίζεται όλες αυτές τις ασυνέπειες μεταξύ των προγραμμάτων περιήγησης και παρέχει μια συνεπή εμπειρία που λειτουργεί σε όλα τα προγράμματα περιήγησης.
- Επεκτασιμότητα - Νέα συμβάντα, στοιχεία και μέθοδοι μπορούν εύκολα να προστεθούν και στη συνέχεια να χρησιμοποιηθούν ξανά ως πρόσθετο.
Το jQuery κυκλοφόρησε αρχικά τον Ιανουάριο του 2006 στο BarCamp NYC από τον John Resig και επηρεάστηκε από την πρώιμη βιβλιοθήκη cssQuery του Dean Edwards. Αυτή τη στιγμή συντηρείται από μια ομάδα προγραμματιστών με επικεφαλής τον Timmy Willison (με τον επιλογέα jQuery - Sizzle, με επικεφαλής τον Richard Gibson).
Η βιβλιοθήκη περιλαμβάνει τις ακόλουθες λειτουργίες:
- επιλογή στοιχείων DOM χρησιμοποιώντας τη μηχανή επιλογής πολλαπλών διακομιστών ανοιχτού κώδικα Sizzle.
- επισήμανση του έργου χειρισμού DOM που βασίζεται σε επιλογέα CSS, το οποίο χρησιμοποιεί ονόματα στοιχείων και χαρακτηριστικά όπως id και class ως κριτήρια για την επιλογή κόμβων στο DOM.
- Εκδηλώσεις;
- εφέ και κινούμενα σχέδια?
- Αϊάς;
- αντικείμενα αναβολής και υπόσχεσης για τον έλεγχο της ασύγχρονης επεξεργασίας.
- JSON ανάλυση;
- Επεκτασιμότητα μέσω προσθηκών.
- βοηθητικά προγράμματα όπως η ανακάλυψη χαρακτηριστικών.
- μέθοδοι συμβατότητας που είναι εγγενώς διαθέσιμες στα σύγχρονα προγράμματα περιήγησης αλλά απαιτούν παλαιότερες εκδόσεις, όπως το inArray() και το κάθε(), multi-browser (δεν πρέπει να συγχέεται με το cross-browser).
Η βιβλιοθήκη jQuery είναι ένα ενιαίο αρχείο JavaScript που περιέχει όλες τις κοινές λειτουργίες DOM, συμβάντα, εφέ και Ajax. Μπορεί να συμπεριληφθεί σε μια ιστοσελίδα μέσω σύνδεσης σε ένα τοπικό αντίγραφο ή σε ένα από τα πολλά αντίγραφα που είναι διαθέσιμα σε δημόσιους διακομιστές. Η βιβλιοθήκη διαθέτει ένα δίκτυο παράδοσης περιεχομένου (CDN) που φιλοξενείται από το MaxCDN.
Παράδειγμα jQuery στην PHP:
Το jQuery έχει δύο στυλ χρήσης:
Η πρόσβαση και ο χειρισμός πολλών κόμβων DOM στο JQuery ξεκινά συνήθως καλώντας τη συνάρτηση $ με τη συμβολοσειρά. Αυτό επιστρέφει ένα αντικείμενο jQuery που αναφέρεται σε όλα τα στοιχεία που ταιριάζουν στη σελίδα HTML.
Λειτουργία χωρίς συγκρούσειςΤο jQuery περιλαμβάνει μια λειτουργία .noConflict() που απελευθερώνει τον έλεγχο του $. Αυτό είναι χρήσιμο εάν το jQuery χρησιμοποιείται με άλλες βιβλιοθήκες που χρησιμοποιούν επίσης το $ ως αναγνωριστικό. Σε λειτουργία χωρίς συγκρούσεις, οι προγραμματιστές μπορούν να χρησιμοποιήσουν βιβλιοθήκες ως αντικαταστάσεις για $ χωρίς να χάσουν τη λειτουργικότητα.
Οι συναρτήσεις επανάκλησης για τη διαχείριση συμβάντων σε στοιχεία που δεν έχουν ακόμη φορτωθεί μπορούν να καταχωρηθούν στο .ready() ως ανώνυμες συναρτήσεις. Αυτοί οι χειριστές θα καλούνται μόνο όταν ενεργοποιηθεί το συμβάν. Για παράδειγμα, ο ακόλουθος κώδικας προσθέτει έναν χειριστή για ένα κλικ του ποντικιού σε ένα στοιχείο εικόνας img:
$("img").on("click",function())(
//χειρίζεται το συμβάν κλικ σε οποιοδήποτε στοιχείο img στη σελίδα
Ορισμένες συναρτήσεις επιστρέφουν συγκεκριμένες τιμές (για παράδειγμα, $("#input-user-email").Val()). Σε αυτές τις περιπτώσεις η αλυσίδα δεν λειτουργεί επειδή η τιμή δεν αναφέρεται σε ένα αντικείμενο jQuery.
Δημιουργία νέων στοιχείωνΕκτός από την πρόσβαση στους κόμβους DOM μέσω της ιεραρχίας αντικειμένων, είναι επίσης δυνατή η δημιουργία νέων στοιχείων εάν η συμβολοσειρά που μεταβιβάζεται ως όρισμα στο $() μοιάζει με HTML. Για παράδειγμα, η γραμμή βρίσκει ένα στοιχείο επιλογής HTML με ταυτότητες και προσθέτει ένα στοιχείο επιλογής με την τιμή VAG και το κείμενο Volkswagen:
$("# επιλεγμένες αυτοκινητοβιομηχανίες")
Προσθήκη($("")
Attr((τιμή:VAG))
Προσάρτημα (Volkswagen)).
Βοηθητικά προγράμματαΟι συναρτήσεις jQuery με πρόθεμα $ είναι βοηθητικές συναρτήσεις που επηρεάζουν τις καθολικές ιδιότητες και συμπεριφορά. Το παρακάτω παράδειγμα χρησιμοποιεί τη συνάρτηση every(), η οποία επαναλαμβάνεται μέσω πινάκων:
$.each(,function())(
console.log(this+1);
Αυτό το παράδειγμα ανάρτησης jQuery γράφει 2, 3, 4 στην κονσόλα.
ΑϊάςΕίναι δυνατό να κάνετε Ajax χρησιμοποιώντας το $.ajax() του jQuery, ένα παράδειγμα του οποίου είναι οι σχετικές μέθοδοι φόρτωσης και επεξεργασίας απομακρυσμένων δεδομένων:
url: "/process/submit.php",
όνομα: Γιάννης
τοποθεσία: Βοστώνη
)).done(function(msg)(
alert("Δεδομένα Αποθηκευμένα:"+msg);
)).fail(function(xmlHttpRequest, statusText, errorThrown)(
συναγερμός(
"Δεν μπορέσαμε να στείλουμε το μήνυμά σας.\N\n"
+"Αίτημα XML Http:"+JSON.stringify(xmlHttpRequest)
+ ",\nΚείμενο κατάστασης:"+statusText
+ ",\nError Thrown:"+errorThrown);
Σε αυτό το παράδειγμα, ο διακομιστής έχει dataname=John και location=Boston για /process/submit.php. Όταν ολοκληρωθεί αυτό το αίτημα, καλείται μια λειτουργία για να ειδοποιήσει τον χρήστη. Εάν το αίτημα αποτύχει, θα ειδοποιήσει τον χρήστη σχετικά με το σφάλμα, την κατάσταση του αιτήματος και το συγκεκριμένο σφάλμα.
ΠρόσθεταΗ αρχιτεκτονική jQuery επιτρέπει στους προγραμματιστές να δημιουργούν κώδικα με δυνατότητα σύνδεσης για να επεκτείνουν διάφορες λειτουργίες. Υπάρχουν χιλιάδες πρόσθετα διαθέσιμα στο διαδίκτυο που καλύπτουν μια σειρά λειτουργιών όπως βοηθοί Ajax, υπηρεσίες ιστού, δυναμικές λίστες, εργαλεία XML και XSLT, μεταφορά και απόθεση, συμβάντα, χειρισμός cookie και τρόποι λειτουργίας.
Υπάρχουν εναλλακτικές προσθήκες μηχανών αναζήτησης, όπως το jquer.in, που ακολουθούν πιο εξειδικευμένες προσεγγίσεις, όπως η λίστα μόνο προσθηκών που πληρούν ορισμένα κριτήρια (για παράδειγμα, εκείνες με δημόσιο αποθετήριο κώδικα). Ο προγραμματιστής παρέχει το Κέντρο εκμάθησης, έναν πόρο jQuery για αρχάριους που μπορεί να βοηθήσει τους χρήστες να κατανοήσουν τη JavaScript και να ξεκινήσουν την ανάπτυξη προσθηκών.
jQuery UIΤο jQuery UI είναι μια συλλογή από γραφικά στοιχεία GUI, κινούμενα γραφικά και θέματα που υλοποιούνται με χρήση jQuery CSS (βιβλιοθήκη JavaScript), Cascading Style Sheets και HTML. Σύμφωνα με την υπηρεσία ανάλυσης JavaScript Libscore, το jQuery UI χρησιμοποιείται από πάνω από 197.000 κορυφαίους ιστότοπους, καθιστώντας το τη δεύτερη πιο δημοφιλή βιβλιοθήκη JS. Τα πιο διάσημα από αυτά: Pinterest, PayPal, IMDb, The Huffington Post και Netflix.
Το jQuery UI είναι δωρεάν και ανοιχτού κώδικα, που διανέμεται από το Ίδρυμα υπό την άδεια MIT. Εκδόθηκε για πρώτη φορά τον Σεπτέμβριο του 2007.
jQuery MobileΤο jQuery Mobile είναι ένα πλαίσιο ιστού βελτιστοποιημένο στην αφή (γνωστό και ως πλαίσιο για κινητά). Ο κύριος στόχος της ανάπτυξης είναι η δημιουργία μιας υποδομής συμβατής με ένα ευρύ φάσμα smartphones και υπολογιστών tablet, απαραίτητης για την αναπτυσσόμενη αγορά ψηφιακής τεχνολογίας. Συμβατό με άλλες πλατφόρμες εφαρμογών για κινητά όπως το PhoneGap, το Worklight και πολλές άλλες.
Αυτό, θα έλεγε κανείς, είναι ένα είδος τελικής ανάρτησης αυτού που κατάφερα να «μαγειρέψω» διατηρώντας αυτό το blog, χρησιμοποιώντας το υπέροχο πλαίσιο jQuery.
- — δύο πολύ απλές καθολικές επιλογές για τη δημιουργία διακοπτών καρτελών. Παράδειγμα στην πλαϊνή γραμμή.
- — αυτή τη στιγμή το παράδειγμα εργασίας βρίσκεται επάνω δεξιά κάτω από τη φόρμα αναζήτησης. Σκέφτομαι να αφαιρέσω αυτή τη δυνατότητα από το ιστολόγιο. Αναρωτιέμαι αν το χρησιμοποιεί όντως κάποιος;
- - ένα σενάριο που αλλάζει το μέγεθος της γραμματοσειράς της σελίδας ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για τον εαυτό μου, δεν έχω βρει ακόμα τη χρήση αυτού του σεναρίου πουθενά.
- — εμφανίζεται μια προεπισκόπηση κάτω από τη φόρμα για την προσθήκη σχολίου καθώς πληκτρολογείτε. Μπορείτε να το επισυνάψετε σε οποιονδήποτε ιστότοπο με μια φόρμα.
- — εμφανίζεται μια προεπισκόπηση όταν κάνετε κλικ στο αντίστοιχο κουμπί και εμφανίζεται αντί για ένα πεδίο κειμένου. Κατά τη γνώμη μου, αυτή είναι μια πιο όμορφη λύση από την πρώτη επιλογή. Αυτό το σενάριο μπορεί επίσης να επισυναφθεί σε οποιονδήποτε ιστότοπο.
- . Αυτό το σενάριο είναι για χρήστες της διεπαφής ιστού Twitter και λάτρεις του προγράμματος περιήγησης Opera. Αν και, νομίζω ότι υπάρχει τρόπος να το επισυνάψετε σε άλλα προγράμματα περιήγησης.
- — Με βάση την παραπάνω 2η επιλογή, δημιούργησα αυτό το πρόσθετο. Μου αρέσει πολύ πώς έγινε. Μέχρι σήμερα, έχει ληφθεί περίπου 8 χιλιάδες φορές.
- — μια προσθήκη παρόμοια με την προηγούμενη, μόνο για τη σελίδα δημιουργίας/επεξεργασίας ανάρτησης στον πίνακα διαχείρισης.
- - είναι για όσους ξέρουν πώς να συνδέουν σενάρια UserJS στο πρόγραμμα περιήγησής τους. Βολική αναδυόμενη φόρμα σύνδεσης.
- — εμφανίζει στον επισκέπτη ένα μήνυμα καλωσορίσματος δίπλα στη φόρμα προσθήκης σχολίου εάν έχει αφήσει ένα σχόλιο τουλάχιστον μία φορά.
- — η ιδέα δανείστηκε από το Habrahabr. Είναι λογικό να το τοποθετούμε όταν σχηματίζονται μεγάλα νήματα συζήτησης στα σχόλια του ιστότοπου.
— όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο, εμφανίζεται μια λίστα με συνδέσμους για την αποθήκευση της σελίδας στους σελιδοδείκτες κοινωνικής δικτύωσης. Όταν κάνετε κλικ στο σύνδεσμο "Προσθήκη στους σελιδοδείκτες", κάνετε εναλλαγή μεταξύ της λίστας των υπηρεσιών σελιδοδείκτη και των κοινωνικών δικτύων. Δυστυχώς, δεν υπάρχουν όλα τα κοινωνικά δίκτυα που πρόσθεσα στη λίστα αυτή τη στιγμή.
Πρόσφατα εγκατέλειψα αυτό το σενάριο για μια πιο όμορφη λύση - δημιούργησα ένα αιωρούμενο πάνελ, το οποίο μπορείτε τώρα να δείτε στα αριστερά της ανάρτησης. Μου αρέσει περισσότερο αυτή η επιλογή και είναι περισσότερο σύμφωνη με τις σύγχρονες τάσεις. Μάλλον θα γράψω μια ανάρτηση για τη δημιουργία ενός τέτοιου πάνελ.
- αυτό είναι για χρήστες WordPress που έχουν τη λειτουργία προσωρινής αποθήκευσης από το Maxim.
Το σενάριο έχει ένα σφάλμα με το UTF-8 - εάν γράψετε το όνομα με ρωσικά γράμματα μέσω του FireFox, τότε οι χαρακτήρες από το cookie εισάγονται με ανόητους τρόπους. Προτάθηκε μια λύση στα σχόλια, αλλά τίποτα δεν λειτούργησε για μένα.
— η διεπαφή λειτουργεί χρησιμοποιώντας jQuery και η μετάφραση λειτουργεί χρησιμοποιώντας το Google API.
Βρήκα μια πολύ επιτυχημένη και δημοφιλή λύση - το widget μου αυτή τη στιγμή κατέχει σταθερά τη 2η θέση στη λίστα με τα περισσότερα ληφθέντα, κάτι που είναι καλά νέα.
Και μερικά ακόμη σενάρια jQuery για τα οποία δεν έχω γράψει πουθενά, αλλά χρησιμοποιούνται σε αυτό το ιστολόγιο:
- Παράθεση ενός σχολίου - εάν επιλέξετε οποιοδήποτε κομμάτι κειμένου στα σχόλια, ένα πλαίσιο με έναν σύνδεσμο "εισάγετε μια προσφορά στο πεδίο απάντησης" εμφανίζεται κοντά στην επιλογή, όταν κάνετε κλικ σε αυτό, το επιλεγμένο κείμενο θα εισαχθεί στη φόρμα για προσθήκη σχολίου.
- Επικύρωση των πεδίων «Όνομα» και «Ηλεκτρονικό ταχυδρομείο» στη φόρμα για την προσθήκη σχολίου. Εάν ένα από αυτά τα πεδία συμπληρωθεί λανθασμένα, επισημαίνονται.
Εδώ είναι μια σημαντική λίστα. Νομίζω ότι θα μεγαλώσει ακόμη περισσότερο με την πάροδο του χρόνου - μου αρέσει πολύ το jQuery και η διαδικασία της συγγραφής σεναρίων σε αυτό.
Γενικά, το jQuery για μένα είναι το επόμενο στάδιο στην ανάπτυξή μου ως web developer, μετά το CSS και το HTML. Εάν είμαι ήδη αρκετά δυνατός στις δύο τελευταίες τεχνολογίες και δεν υπάρχει πού να κινηθώ, τότε το jQuery είναι, όπως λένε, ένα χωράφι χωρίς όργωμα και υπάρχει περιθώριο να προχωρήσουμε προς αυτήν την κατεύθυνση.
Ο Blogger Max1mus στο προσωπικό του blog δημοσιεύει τρέχοντες τρόπους για να κερδίσετε χρήματα στο Διαδίκτυο, χρήσιμες πληροφορίες σχετικά με το blogging, το SEO, το SMO και επίσης μοιράζεται την προσωπική του εμπειρία σχετικά με την προώθηση ιστότοπου.
Αυτό θα εγκαταστήσει το jQuery στον κατάλογο node_modules. Μέσα στο node_modules/jquery/dist/ θα βρείτε μια μη συμπιεσμένη έκδοση, μια συμπιεσμένη έκδοση και ένα αρχείο χάρτη.
σύνδεσμος Λήψη του jQuery χρησιμοποιώντας το BowerΗ δεύτερη έκδοση σάς βοηθά να ενημερώσετε τον κώδικα ώστε να εκτελείται σε jQuery 3.0 ή νεότερη έκδοση, αφού έχετε χρησιμοποιήσει το Migrate 1.x και έχετε αναβαθμίσει σε jQuery 1.9 ή νεότερη έκδοση:
Σύνδεση Δοκιμή μεταξύ προγραμμάτων περιήγησης με jQueryΦροντίστε να δοκιμάσετε ιστοσελίδες που χρησιμοποιούν jQuery σε όλα τα προγράμματα περιήγησης που θέλετε να υποστηρίξετε. Ο ιστότοπος καθιστά διαθέσιμες εικονικές μηχανές για τη δοκιμή πολλών διαφορετικών εκδόσεων του Internet Explorer. Μπορείτε να βρείτε παλαιότερες εκδόσεις άλλων προγραμμάτων περιήγησης στο oldversion.com.
σύνδεσμος jQuery Pre-release BuildsΗ ομάδα jQuery εργάζεται συνεχώς για τη βελτίωση του κώδικα. Κάθε δέσμευση στο αποθετήριο Github δημιουργεί μια έκδοση σε εξέλιξη του κώδικα που ενημερώνουμε στο jQuery CDN. Αυτές οι εκδόσεις είναι μερικές φορές ασταθείς και ποτέ δεν είναι κατάλληλες για εγκαταστάσεις παραγωγής.Συνιστούμε να χρησιμοποιούνται για να καθοριστεί εάν ένα σφάλμα έχει ήδη διορθωθεί κατά την αναφορά σφαλμάτων σε εκδόσεις που έχουν κυκλοφορήσει ή για να δούμε εάν έχουν εισαχθεί νέα σφάλματα.
σύνδεσμος Χρήση jQuery με σύνδεσμο CDN Άλλα CDNΤα ακόλουθα CDN φιλοξενούν επίσης συμπιεσμένες και μη συμπιεσμένες εκδόσεις των εκδόσεων jQuery. Ξεκινώντας με το jQuery 1.9 μπορούν επίσης να φιλοξενήσουν . ελέγξτε την τεκμηρίωση του ιστότοπου.
Σημειώστε ότι ενδέχεται να υπάρξουν καθυστερήσεις μεταξύ μιας έκδοσης jQuery και της διαθεσιμότητάς της εκεί. Να είστε υπομονετικοί, λαμβάνουν τα αρχεία την ίδια στιγμή που η ανάρτηση του ιστολογίου δημοσιοποιείται. Οι υποψήφιοι beta και κυκλοφορίες δεν φιλοξενούνται από αυτά τα CDN.
Πριν από 10 χρόνια, όταν το jQuery ήταν μόλις στα σπάργανα, το οικοσύστημα του προγράμματος περιήγησης ήταν πολύ διαφορετικό και καθένα από τα υπάρχοντα προϊόντα εκείνη την εποχή πάλευε με την πολυπλοκότητα της διαχείρισης στοιχείων DOM. Ο φιλόδοξος στόχος που έθεσαν οι προγραμματιστές του jQuery ήταν να αναπτύξουν μια καθολική προσέγγιση για την επίλυση αυτών των προβλημάτων και να δημιουργήσουν ένα API που θα λειτουργούσε εξίσου καλά σε κάθε περίπτωση.
Από όσο μπορούσαν να κρίνουν, αλλά μετά από 10 χρόνια ύπαρξής του, το jQuery παραμένει μια από τις πιο δημοφιλείς βιβλιοθήκες JavaScript.
Η ίδια η JavaScript είναι πλέον ένα εντελώς ώριμο προϊόν, καλά τεκμηριωμένο και υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης. Η σύγχρονη κοινότητα του προγράμματος περιήγησης είναι επίσης πιο ενοποιημένη και, στις περισσότερες περιπτώσεις, μπορείτε να είστε σίγουροι ότι εάν, ας πούμε, μια σελίδα εμφανίζεται σωστά στο Crome, τότε θα φαίνεται το ίδιο και στον Firefox. Τα querySelectors υποστηρίζονται επίσης από σχεδόν όλα τα σύγχρονα προγράμματα περιήγησης.
Φαίνεται ότι η ιστορία της ανάπτυξης του jQuery κινείται προς το ηλιοβασίλεμα - γιατί υπερφόρτωση σελίδων και σπατάλη επιπλέον κύκλων επεξεργαστή, εάν τα περισσότερα προβλήματα μπορούν να επιλυθούν χρησιμοποιώντας εργαλεία τυπικής γλώσσας; Από την άλλη πλευρά, σε μια τόσο μακρά περίοδο για τη βιομηχανία των υπολογιστών, έχει αναπτυχθεί ένας τεράστιος αριθμός λύσεων που μπορούν απλά να χρησιμοποιηθούν και να χρησιμοποιηθούν, εδώ και τώρα.
Νομίζω ότι αυτή η επιλογή πρέπει να γίνει από τον ίδιο τον προγραμματιστή σε κάθε συγκεκριμένη περίπτωση, εστιάζοντας όχι στη μόδα και τις τάσεις, αλλά στην κοινή λογική και τις προοπτικές ανάπτυξης της δημιουργίας του.
Σε αυτήν την ανασκόπηση, έχω συγκεντρώσει όλα τα δωρεάν πρόσθετα jQuery για τα οποία γνωρίζω και τα οποία αναπτύσσονται ενεργά αυτήν τη στιγμή ή που έχουν ενημερωθεί τουλάχιστον μία φορά τον περασμένο χρόνο. Κάποια από αυτά τα χρησιμοποίησα ενεργά και τα χρησιμοποιώ στην πρακτική μου, κάποια τα γνωρίζω μόνο επιφανειακά, αλλά με εντυπωσίασαν με τις δυνατότητές τους. Ανάμεσά τους υπάρχουν εξαιρετικά εξαιρετικές, φτιαγμένες με μεγάλη φαντασία. Και ακόμα κι αν δεν βρείτε τρόπο να τα χρησιμοποιήσετε στα έργα σας, ίσως σας εμπνεύσουν να δημιουργήσετε τις δικές σας, ακόμα πιο απίστευτες λύσεις.
multiscroll.js Μια ενδιαφέρουσα λύση για να τραβήξετε την προσοχή του επισκέπτη - η κύλιση σελίδας γίνεται με τη μορφή δύο πλαισίων, το ένα εκ των οποίων σύρεται προς τα πάνω και το άλλο προς τα κάτω, ανοίγοντας το επόμενο μπλοκ. Λειτουργεί επίσης εξαιρετικά σε όλα τα προγράμματα περιήγησης, ακόμη και σε πολύ ξεπερασμένα προγράμματα περιήγησης.
Ένα πολύ πρωτότυπο πρόσθετο που πιστεύω ότι θα αρέσει στους επισκέπτες αν έχετε πολύ μεγάλο υλικό κειμένου.
