Πώς να Προσαρμογή και Theming jQuery UI Datepicker
jQuery UI είναι απλά φοβερό και λόγω της ευκολίας χρήσης, είναι δημοφιλές και χρησιμοποιείται ευρέως σε σχεδόν οποιαδήποτε ιστοσελίδα που χρειάζονται διαδραστικές δυνατότητες.
Και, σε αυτήν την ανάρτηση, θα εξετάσουμε ένα από τα χαρακτηριστικά που παρέχονται, το widget Datepicker.
Θα προσπαθήσουμε να μάθουμε πώς να προσαρμόζουμε το θέμα του ημερολογίου, έτσι ώστε να μπορείτε να δημιουργήσετε το δικό σας θέμα που θα αντιστοιχεί στο γενικό σας σχέδιο. Ωστόσο, χρειάζεστε λίγη κατανόηση στο JavaScript και εξοικείωση με το CSS προτού ακολουθήσετε αυτό το σεμινάριο.
- Διαδήλωση
- Λήψη πηγής
Εάν είστε έτοιμοι, ας ξεκινήσουμε.
Τα στοιχεία ενεργητικού
Ας προετοιμάσουμε ορισμένα βασικά στοιχεία του ενεργητικού για το ημερολόγιο.
Πρώτον, ο σχεδιασμός του ημερολογίου θα αναφέρεται σε αυτό το αρχείο PSD από τα Premium Pixels. Γι 'αυτό καλύτερα να το κατεβάσετε πρώτα για να μας βοηθήσει να πάρετε ένα δείγμα από τα χρώματα που χρειαζόμαστε. Στη συνέχεια, κατεβάστε δύο σχέδια από Διακριτικό Μοτίβα που θα χρησιμοποιήσουμε ως φόντο του ημερολογίου μας. Σε αυτό το παράδειγμα, αποφασίσαμε να χρησιμοποιήσουμε τα παρακάτω μοτίβα: μαύρο denim και σκούρο δέρμα.
Θα χρειαστεί επίσης ένα εργαλείο ανάπτυξης ιστού, όπως το Firebug, για να επιθεωρήσουμε τις κλάσεις στοιχείων / ids που παράγονται από το jQuery UI.
Λοιπόν, νομίζω ότι είχαμε αρκετή προετοιμασία. Τώρα ας πάμε στο πρώτο βήμα.
Βήμα 1: jQuery UI Datepicker
Πρώτα, μεταβείτε στη σελίδα λήψης jQuery UI. Σε αυτή τη σελίδα θα εμφανιστούν μερικές επιλογές, ως εξής: το Core UI, Widgets, Αλληλεπιδράσεις και Εφέ.
Θα έπρεπε καταργήστε την επιλογή όλων των στοιχείων, καθώς δεν χρειαζόμαστε όλα αυτά.
Στη συνέχεια, στο Widgets επιλέξτε μόνο τον επιλογέα ημερομηνίας. Το jQuery UI θα επιλέξει αυτόματα τις βασικές εξαρτήσεις και μετά Κατεβάστε το αρχείο.
Συνδέστε όλα τα ληφθέντα αρχεία - εκτός από το CSS - στο κενό έγγραφο HTML, ως εξής:
Βήμα 2: Προσαρμογή του Datepicker
Σε αυτό το βήμα, θα διαμορφώσουμε ένα datepicker με τις ακόλουθες επιλογές.
Ο παραπάνω κώδικας θα καθοδηγήσει το jQuery να εμφανίσει το ημερολόγιο σε ένα στοιχείο με datepicker ταυτότητα. Επομένως, πρέπει να θέσουμε τα ακόλουθα div ετικέτα με - αναγνωριστικό ημερομηνίας - στην καρτέλα για να σχηματίσετε το ημερολόγιο:
Τώρα το ημερολόγιο θα έπρεπε να έχει ήδη δημιουργηθεί και να εμφανιστεί έτσι, απλό χωρίς στυλ, αλλά εξακολουθεί να έχει τη λειτουργικότητα.
Βήμα 3: Τα Στυλ
Τώρα ας αρχίσουμε να σχεδιάζουμε το ημερολόγιο. Θα ξεκινήσουμε κανονικοποιώντας όλα τα στοιχεία - όπως συνήθως - και δημιουργώντας ένα νέο φύλλο στυλ, σε αυτό το παράδειγμα το ονομάζω datepicker.css. Στη συνέχεια, συνδέστε τα όλα με το έγγραφο HTML.
Στη συνέχεια, θα επισυνάψουμε πρώτα ένα υπόβαθρο στο σώμα, έτσι ώστε η HTML μας δεν φαίνεται πολύ απλή.
σώμα φόντο: url ('... /img/darkdenim3.png') επαναλάβετε 0 0 # 555; Στη συνέχεια, θα καθορίσουμε το πλάτος της ημερομηνίας, θα το τοποθετήσουμε στο κέντρο και θα προσθέσουμε τη σκιά της πτώσης για να δώσουμε το εφέ στο ημερολόγιο.
.ui-datepicker πλάτος: 216px; ύψος: auto; περιθώριο: 5px αυτόματο 0; γραμματοσειρά: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-σκιά: 0px 0px 10px 0px rgba (0, 0, 0, .5); σκιά κουτιού: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Επίσης, θα αφαιρέσουμε την προεπιλεγμένη διακόσμηση υπογράμμισης από κάθε ετικέτα αγκύρωσης.
.ui-datepicker α κείμενο-διακόσμηση: κανένας;
Το ημερολόγιο στο jQuery UI σχηματίζεται με a τραπέζι. Έτσι, ας προσθέσουμε 100% πλάτος για το τραπέζι, έτσι θα έχει το ίδιο μέγιστο πλάτος με το περιτύλιγμα παραπάνω. αυτό είναι 216px
.ui-datepicker πίνακα πλάτος: 100%;
Σχεδίαση της ενότητας κεφαλίδων
Ο δημιουργός ημερομηνίας έχει μια κεφαλίδα που περιέχει Μήνας χρόνος του ημερολογίου. Αυτή η ενότητα θα έχει τη σκούρα υφή δέρματος που έχουμε κατεβάσει πριν με ελαφρώς λευκό χρώμα γραμματοσειράς και 1px λευκή σκιά στην κορυφή.
.ui-datepicker-header background: url ('... /img/dark_leather.png') επαναλάβετε 0 0 # 000; χρώμα: # e0e0e0; γραμματοσειρά-βάρος: έντονα. -webkit-box-shadow: ένθετο 0px 1px 1px 0px rgba (250,250,250,2); -moz-box-σκιά: ένθετο 0px 1px 1px 0px rgba (250, 250, 250, .2); κουτί-σκιά: ένθετο 0px 1px 1px 0px rgba (250, 250, 250, .2); σκιά κειμένου: 1px -1px 0px # 000; φίλτρο: dropshadow (χρώμα = # 000, offx = 1, offy = -1); γραμμή-ύψος: 30px; πλάτος συνόρου: 1px 0 0 0; μεθοδικό στυλ: συμπαγές; border-color: # 111; Στη συνέχεια, ας κεντράσουμε Μήνας θέση.
.ui-datepicker-title κείμενο-ευθυγράμμιση: κέντρο;
Αντικαταστήστε το Επόμενο και Προηγ κείμενο με τις εικόνες βελών sprite από το PSD.
.ui-datepicker-prev, .ui-datepicker-next εμφάνιση: inline-block; πλάτος: 30px; ύψος: 30px; κείμενο-ευθυγράμμιση: κέντρο; δρομέας: δείκτης; εικόνα-φόντου: url ('... /img/arrow.png'); αναπαράσταση φόντου: όχι-επανάληψη ύψος γραμμής: 600%. υπερχείλιση: κρυφή; Στη συνέχεια, ρυθμίστε τη θέση βέλους αντίστοιχα.
.ui-datepicker-prev float: αριστερά; φόντο-θέση: κέντρο -30px; .ui-datepicker-next float: right; φόντο-θέση: κέντρο 0px;
Ενώ το ημέρα ονόματα Το τμήμα είναι τυλιγμένο σε ένα thead, με βάση την αναφορά του σχεδιασμού μας, θα έχει μια ελαφρώς λευκή κλίση. Και, για να απλοποιήσουμε το έργο μας, θα χρησιμοποιήσουμε αυτό το εργαλείο για να δημιουργήσουμε τον κώδικα κλίσης:
.ui-datepicker thead χρώμα-φόντο: # f7f7f7; εικόνα φόντου: -moz-γραμμική-κλίση (κορυφή, # f7f7f7 0%, # f1f1f1 100%); Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, αριστερή κορυφή, αριστερά κάτω, έγχρωμη διακοπή (0%, # f7f7f7), έγχρωμη διακοπή (100%, # f1f1f1)). εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, # f7f7f7 0%, # f1f1f1 100%); εικόνα-φόντου: -ο-γραμμική-κλίση (κορυφή, # f7f7f7 0%, # f1f1f1 100%); εικόνα-φόντου: -ms-γραμμική κλίση (κορυφή, # f7f7f7 0%, # f1f1f1 100%); εικόνα φόντου: γραμμική κλίση (κορυφή, # f7f7f7 0%, # f1f1f1 100%). φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0). σύνορα-κάτω: 1px στερεό #bbb;
ο ημέρα ονόματα το κείμενο θα έχει το σκούρο γκρι χρώμα # 666666 και θα έχουν επίσης ένα λεπτό λευκό σκιά κειμένου για να δώσει το πιεσμένο αποτέλεσμα.
.ui-datepicker th κείμενο-μετασχηματισμός: κεφαλαία? μέγεθος γραμματοσειράς: 6pt; padding: 5px 0; χρώμα: # 666666; σκιά κειμένου: 1px 0px 0px #fff; φίλτρο: dropshadow (χρώμα = # fff, offx = 1, offy = 0);
Σε αυτό το σημείο, το ημερολόγιο θα εμφανιστεί ως εξής:
Σχεδίαση των ημερομηνιών
Οι ημερομηνίες ημερολογίου είναι τυλιγμένες μέσα td ή δεδομένα πίνακα. Έτσι, θα θέσουμε το padding να 0 για να αφαιρέσετε τους διαστήματα μεταξύ του td και δώστε το σωστό περίγραμμα 1px.
.ui-datepicker tbody td padding: 0; σύνορο-δεξιά: 1px στερεό #bbb;
Εκτός από την τελευταία td, που δεν θα έχουν τα σωστά σύνορα. Ορίσαμε το σωστό περίγραμμα σε 0 για αυτό.
.ui-datepicker tbody td: τελευταίο παιδί border-right: 0px;
Η σειρά των τραπεζιών θα είναι σχεδόν η ίδια. Θα έχει ένα κάτω όριο 1px, εκτός από την τελευταία σειρά.
.ui-datepicker tbody tr σύνορα-κάτω: 1px στερεό #bbb; .ui-datepicker tbody tr: τελευταίο παιδί border-bottom: 0px;
Σχεδίαση του προεπιλεγμένου, του ποντικιού και της ενεργής κατάστασης
Σε αυτό το βήμα θα καθορίσουμε την ημερομηνία και τα ενεργά στυλ. Θα καθορίσουμε πρώτα την κατάσταση προεπιλεγμένης ημερομηνίας καθορίζοντας τη διάσταση. κεντράρετε τη θέση κειμένου ημερομηνίας, προσθέστε χρώμα κλίσης και εσωτερική λευκή σκιά.
.ui-datepicker td span, .ui-datepicker td α εμφάνιση: inline-block; γραμματοσειρά-βάρος: έντονα. κείμενο-ευθυγράμμιση: κέντρο; πλάτος: 30px; ύψος: 30px; γραμμή-ύψος: 30px; χρώμα: # 666666; σκιά κειμένου: 1px 1px 0px #fff; φίλτρο: dropshadow (χρώμα = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default φόντο: #ededed; υπόβαθρο: -moz-γραμμική κλίση (κορυφή, #αποδοχή 0%, #από 100%). υπόβαθρο: -webkit-κλίση (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, έγχρωμη διακοπή (0%, # ededed), έγχρωμη διακοπή (100%, # dedede). υπόβαθρο: -webkit-γραμμική κλίση (κορυφή, #ededed 0%, # dedede 100%). υπόβαθρο: -ο-γραμμική κλίση (κορυφή, #ededed 0%, # dedede 100%). υπόβαθρο: -ms-γραμμική κλίση (κορυφή, #ededed 0%, # dedede 100%). υπόβαθρο: γραμμική κλίση (κορυφή, #ededed 0%, # dedede 100%). φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0). -webkit-box-shadow: ένθετο 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-σκιά: ένθετο 1px 1px 0px 0px rgba (250, 250, 250, .5); κουτί-σκιά: ένθετο 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; χρώμα: # b4b3b3;
Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την ημερομηνία, θα γίνει ελαφρώς λευκό.
.ui-datepicker-ημερολόγιο .ui-state-hover φόντο: # f7f7f7;
Όταν η ημερομηνία είναι σε ενεργή κατάσταση, θα έχει τα ακόλουθα στυλ.
.ui-datepicker-ημερολόγιο .ui-state-active φόντο: # 6eafbf; -webkit-box-shadow: ένθετο 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-σκιά: ένθετο 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: ένθετο 0px 0px 10px 0px rgba (0, 0, 0, .1); χρώμα: # e0e0e0; σκιά κειμένου: 0px 1px 0px # 4d7a85; φίλτρο: dropshadow (χρώμα = # 4d7a85, offx = 0, offy = 1); σύνορα: 1px στερεά # 55838f; θέση: σχετική. περιθώριο: -1px.
Τώρα, το ημερολόγιο πρέπει να φαίνεται πολύ καλύτερα.
Καθορισμός της θέσης
Σε αυτό το σημείο, εξετάστε προσεκτικά την ημερομηνία. Όταν κάνετε κλικ στην ημερομηνία στην πρώτη ή την τελευταία στήλη, θα παρατηρήσετε ότι η ενεργή κατάσταση ξεχειλίζει ένα εικονοστοιχείο από το άκρο του ημερολογίου.
Έτσι, εδώ θα κάνουμε κάποιες μικρές διορθώσεις.
Αρχικά θα μειώσουμε το πλάτος ημερομηνίας σε 29px, και ορίστε το δεξιό περιθώριο της τελευταίας στήλης και το αριστερό περιθώριο της πρώτης στήλης στο 0 για να αντιστρέψετε το -1px περιθώριο που έχουμε ορίσει προηγουμένως για την ενεργή κατάσταση.
.ui-datepicker-ημερολόγιο td: πρώτο-παιδί .ui-state-active width: 29px; περιθώριο-αριστερά: 0; .ui-datepicker-ημερολόγιο td: last-child .ui-state-ενεργό width: 29px; περιθώριο-δεξιά: 0;
Η ημερομηνία στην τελευταία σειρά του ημερολογίου θα έχει παρόμοια μεταχείριση.
.ui-datepicker-ημερολόγιο tr: τελευταίο παιδί .ui-state-active height: 29px; περιθώριο-κάτω: 0;
Τώρα, ας δούμε το αποτέλεσμα. Λοιπόν, το ημερολόγιο φαίνεται τώρα όμορφο και ταιριάζει απόλυτα με τη σχεδίασή μας. Και, μπορείτε να δείτε το demo και να κατεβάσετε την πηγή για να εξετάσετε τον κώδικα από τους συνδέσμους κάτω από την εικόνα.
- Διαδήλωση
- Λήψη πηγής
Μπόνους: Επέκταση του Ημερολογίου
Λοιπόν, σήμερα έχουμε μάθει πολλά για το πώς να δημιουργήσουμε ένα προσαρμοσμένο θέμα για το jQuery UI Datepicker. Αλλά δεν πρέπει να σταματήσετε εδώ, καθώς υπάρχουν ακόμα πολλά πράγματα που μπορούν να επεκταθούν από αυτόν τον συντηρητή. Ανάλογα με την ικανότητά σας στο jQuery και το CSS, επεκτείνετε το ημερολόγιο έτσι ώστε να είναι - η εισαγωγή κειμένου με ένα datepicker επικάλυψης.
- Διαδήλωση
- Λήψη πηγής
Περαιτέρω ανάγνωση
Για περαιτέρω ανάγνωση στο jQuery UI. Μπορείτε να διαβάσετε την πλήρη τεκμηρίωση εδώ:
- Ξεκινώντας με το jQuery UI
- Θερμ
- jQuery UI: Οι κλάσεις API Theming
Τελικές σκέψεις
Σας ευχαριστώ που διαβάσατε και ακολουθώντας αυτό το σεμινάριο, ελπίζω ότι θα το βρείτε χρήσιμο. Και, εάν έχετε κάποιο σχόλιο ή θέλετε να προσθέσετε πράγματα που μπορεί να λείπουν από αυτό το σεμινάριο, μπορείτε να το επισημάνετε στην παρακάτω ενότητα σχολίων. Ευχαριστώ και πάλι).
