Διπλό ημερολόγιο σε μορφή html javascript. Ημερολόγιο JQuery όταν συμπληρώνετε την ημερομηνία στο πεδίο Εισαγωγή. Στυλ HTML και CSS ημερολογίου
Την παραμονή του νέου έτους, προέκυψε ένα πολύ ασήμαντο έργο - να δημιουργήσετε έναν ιστότοπο ημερολογίου, όπου για κάθε μήνα ήταν απαραίτητο να εμφανιστεί το δικό του ημερολόγιο για τον μήνα. Το πρώτο στάδιο επίλυσης του προβλήματος ήταν η αναζήτηση έτοιμων λύσεων. Μετά από αναζήτηση σε μια ντουζίνα λύσεις που παρατίθενται στο Διαδίκτυο, η επιλογή έγινε. Ορισμένες εκδόσεις αποδείχθηκαν εντελώς μη λειτουργικές, ορισμένες ήταν πολύ δυσκίνητες - θα έπρεπε να τροποποιηθούν σημαντικά για να λάβουν το απαιτούμενο αποτέλεσμα. Λοιπόν, ας δούμε πώς να γράψουμε ένα απλό ημερολόγιο στην PHP.
Η βάση του σεναρίου βρέθηκε στο Διαδίκτυο, τα σφάλματα διορθώθηκαν, ορισμένα πράγματα ολοκληρώθηκαν, ειδικότερα, προστέθηκε η λειτουργικότητα της επισήμανσης Σαββατοκύριακων με ξεχωριστή τάξη CSS.
Υλοποίηση μηνιαίου ημερολογίου σε καθαρή PHP χωρίς χρήση mySQL, jQuery κ.λπ. δίνεται παρακάτω:
Η συνάρτηση draw_calendar λαμβάνει τον σειριακό αριθμό του μήνα και του έτους ως είσοδο. Το αποτέλεσμα της εκτέλεσης της συνάρτησης είναι ο κώδικας html του ημερολογίου για τον συγκεκριμένο μήνα. Η χρήση της παραπάνω δυνατότητας είναι εύκολη και μπορεί να το κάνει ακόμη και ένας αρχάριος στην ανάπτυξη ιστού. Το παρακάτω παράδειγμα θα εμφανίσει ένα ημερολόγιο για τον Ιανουάριο του 2016.
Ιανουαρίου «16
Η έξοδος της λεζάντας του ημερολογίου, η οποία περιλαμβάνει το όνομα του μήνα και του έτους, δεν συμπεριλήφθηκε σκόπιμα στη συνάρτηση, έτσι ώστε να μπορεί να αλλάξει ελεύθερα και, ενδεχομένως, να αφαιρεθεί εντελώς.
Ημερολόγιο php για ένα χρόνοΑπό την παραπάνω συνάρτηση μπορείτε εύκολα να λάβετε ένα σενάριο ημερολογίου PHP για ένα έτος και για οποιοδήποτε έτος. Για να το κάνετε αυτό, αρκεί να κάνετε loop σε όλους τους μήνες και για καθέναν από αυτούς να καλέσετε τη συνάρτηση για την εμφάνιση του ημερολογίου του μήνα.
Ωστόσο, αυτό θα απαιτήσει τη δημιουργία ενός πίνακα με μια λίστα ονομάτων μηνών στα ρωσικά, καθώς μπορείτε να λάβετε ονόματα μηνών μόνο από την PHP στα Αγγλικά.
Ο κωδικός σε αυτή την περίπτωση θα είναι ο εξής:
"16
Μπορείτε να κατεβάσετε τα παραδείγματα που δίνονται σε αυτήν την ανάρτηση από το Github.
Σε αυτό το παράδειγμα, θα επικεντρωθούμε στη δημιουργία ενός στοιχείου ημερολογίου με HTML5 και CSS3 και αργότερα θα προσθέσουμε κάποια διαδραστικότητα χρησιμοποιώντας javascript.
Θα χρειαστούν ημερολόγια σε ιστότοπους είτε μόνο για ενημέρωση είτε όταν απαιτείται εισαγωγή ημερομηνίας. Ο χρήστης είναι πάντα πρόθυμος να δει ωραία πράγματα.
Μπορούμε να δημιουργήσουμε ημερολόγια με HTML5 και να τα διαμορφώσουμε με CSS3, αλλά αυτό είναι απλώς στατικό. Πιθανότατα, θα θέλετε να το κάνετε διαδραστικό.
Αυτό ενεργοποιείται από τη javascript (ή τις βιβλιοθήκες της) που μπορεί να σας βοηθήσει να κάνετε κίνηση και να αλλάξετε τις προβολές γρήγορα και εύκολα. Ας ξεκινήσουμε όμως με html και css.
1.ΠροαπαιτούμεναΑπαιτείται η ακόλουθη ρύθμιση για να επιτύχετε τα αποτελέσματα που εξηγούνται.
1.1 Βασική ρύθμισηΠροχωρήστε και δημιουργήστε ένα νέο αρχείο html μέσα στο φάκελο του έργου σας με τη βασική σύνταξη:
Στοιχείο ημερολογίου
1.2 Λήψη BootstrapΤο Bootstrap είναι ένα καινοτόμο και εύχρηστο πλαίσιο CSS που θα χρησιμοποιήσουμε κυρίως για τη δομή του που βασίζεται σε πλέγμα.
Για να το χρησιμοποιήσετε, απλώς συνδέστε τα αρχεία css και js στην ενότητα head από τους επίσημους συνδέσμους τους όπως παρακάτω:
Στοιχείο ημερολογίου
2.Δημιουργία ΗμερολογίουΠαρακάτω, μπορείτε να δείτε τη δημιουργία ημερολογίου βήμα προς βήμα. Θα δημιουργήσουμε το ημερολόγιο πρώτα σε html και μετά θα προσθέσουμε το css.
2.1 HTMLΗ ενότητα html θα περιλαμβάνει την ακόλουθη βασική δομή:
1. Ένα περιτύλιγμα – αυτή η ετικέτα θα τυλίξει όλα τα στοιχεία μέσα στο ημερολόγιο
2. Μια κεφαλίδα – θα περιέχει τον τίτλο του μήνα και τα εικονίδια πλοήγησης αριστερά και δεξιά
3. Ένα σώμα ημερολογίου – θα περιέχει τη σειρά των καθημερινών και τις σειρές ημερομηνιών.
4. Μια τρέχουσα ημερομηνία – θα είναι μια ενότητα στο κάτω μέρος του ημερολογίου που δείχνει την πραγματική ημερομηνία.
Θα χρειαστούμε 1 σειρά για τις καθημερινές και 5 σειρές για σειρές ημερομηνιών. Η δομή θα μοιάζει με αυτό:
Δεν εμφανίζεται τίποτα ακόμα στο πρόγραμμα περιήγησης. Τώρα που δημιουργήσαμε τις σειρές, ας προσθέσουμε τα ακόλουθα στοιχεία:
1. Εικονίδια πλοήγησης – υπάρχει μια κατηγορία στο bootstrap για αυτά τα εικονίδια: glyphicon glyphicon-chevron-left/right
2. Προσθέστε τον μήνα που εμφανίζεται το ημερολόγιο στην ενότητα κεφαλίδας τυλιγμένο μέσα σε μια ετικέτα p
3. Διαχωρίστε τις σειρές σε 7 στήλες με την κλάση του bootstrap: col-xs-1 και προσθέστε τις καθημερινές μέσα σε ετικέτες p
4. Χρησιμοποιήστε το ίδιο col-xs-1 στις ημερομηνίες, αλλά τυλίξτε την παράγραφο μέσα σε ετικέτες αγκύρωσης, πρέπει να κάνετε κλικ σε αυτές
Με τον παραπάνω κώδικα που προστέθηκε, το html μας μοιάζει τώρα με αυτό:
Ιανουάριος 2015
Δευτέρα 26 ΙανουαρίουΛοιπόν, τώρα έχουμε μια προβολή στο πρόγραμμα περιήγησης:
Μην ανησυχείτε για το σωστό εικονίδιο πλοήγησης, θα το διορθώσουμε με το css. Σημειώστε επίσης ότι έχω προσθέσει μια ανενεργή τάξη σε ορισμένες ημερομηνίες.
Αυτό συμβαίνει επειδή αυτές οι ημερομηνίες δεν είναι από τον τρέχοντα μήνα και πρέπει να έχουν λίγο διαφορετικό στυλ (δηλαδή πιο ανοιχτό χρώμα από τα υπόλοιπα).
2.2 CSSΕδώ έρχεται το διασκεδαστικό κομμάτι, το στυλ είναι αυτό που δίνει στα στοιχεία σχήμα και συνολική εμφάνιση. Ας ξεκινήσουμε με αυτά τα καθολικά χαρακτηριστικά:
Σώμα ( γραμματοσειρά-οικογένεια: "Montserrat"; /* just a cutsom font */ ) a:-webkit-any-link( text-decoration:none !important; /* μην υπογραμμίζετε συνδέσμους */ χρώμα: μαύρο; !σημαντικό ; /* δώστε στους συνδέσμους ένα προεπιλεγμένο χρώμα */ )
Για να εμφανίζονται τα Navicons δεξιά, προσθέστε pull-αριστερά και pull-right δίπλα στις άλλες κλάσεις:
Τώρα δώστε στα βασικά στοιχεία της δομής μερικά χαρακτηριστικά στυλ:
Περιτύλιγμα ( περιθώριο: 10 εκ. /* μόνο ένα περιθώριο θερμοκρασίας */ περίγραμμα: 0,1 εκ. στερεό #cccc; /* τυλίξτε το ημερολόγιο μέσα σε ένα πλαίσιο */ πλάτος: 20 εκ. /* ορίστε ένα πλάτος για το πλαίσιο */ ύψος: 24 εκ. /* ορίστε ένα ύψος για το πλαίσιο */ box-shadow: 0.1em 0.2em 0.8em #cccc -color: #3f51b5 .col-xs-1 ( πλάτος: 2,5em; /* δώστε σε κάθε στήλη ένα σταθερό πλάτος */ margin-left: 0,2em; /* έχουν κάποιο διάστημα μεταξύ της στήλης */ text-align: κέντρο; /* στοίχιση κειμένου στο κέντρο */)
Η προβολή του ημερολογίου μας έγινε:
Styling – Μέρος 1
Εντάξει, στη συνέχεια προσθέστε χαρακτηριστικά σε μεμονωμένα στοιχεία για να βελτιώσετε την εμφάνισή τους μέσα στο ημερολόγιο: .header p ( padding-top: 1,2em; /* κατακόρυφο κεντράρισμα */ text-transform: κεφαλαία; /* text all caps */ ) .header span ( padding: 1,3em; /* κάθετα και οριζόντια εικονίδια κεντραρίσματος */ ) .inactive ( /* οι ανενεργές ημερομηνίες αποκτούν ανοιχτό γκρι χρώμα κειμένου */ χρώμα: #cccc; ) .weekdays ( padding: 1em; /* δίνοντας λίγο χώρο στις καθημερινές περίπου */ ) .dates ( padding: 0,2em 1em 0,2em 1em; /* δίνοντας στις ημερομηνίες λίγο διάστημα */ ) .line ( /* διαχωριστικό γκρι γραμμής */ ύψος: 0,1em, περίγραμμα: 0,1em συμπαγές #EEEEEE; ) .current-date ( /* στυλ της ενότητας τρέχουσας ημερομηνίας */ text-transform: κεφαλαία; text-align: center; padding: 0,7em; ) .calendar-body .row .col-xs-1 p:hover ( color: #4778a6, /* κατάσταση του ποντικιού σε όλες τις ημερομηνίες */ )
Και επιτέλους έχουμε ένα όμορφο στυλ και μοντέρνο ημερολόγιο. Κοίτα αυτό:
Όσο απλό, φαίνεται ότι τελειώσαμε. Πριν ολοκληρώσουμε αυτό το παράδειγμα, ας δούμε ένα προκατασκευασμένο ημερολόγιο από το http://demos.telerik.com/ όπου το ημερολόγιο έχει πλήρη διαδραστικότητα ενεργοποιημένη από τη βιβλιοθήκη jQuery.
3. Διαδραστικότητα; Ναι, με jQuery!Σε αυτήν την ενότητα, σκοπεύω να σας ενημερώσω ότι τα ημερολόγια μπορούν και πρέπει να είναι πλήρως διαδραστικά με την επιλογή ημερομηνίας/μήνας/έτος.
Το παρακάτω παράδειγμα είναι απλώς για επίδειξη, είναι ένα πρότυπο στο διαδίκτυο που έχει διαδραστική συμπεριφορά.
html ( μέγεθος γραμματοσειράς: 12 px; οικογένεια γραμματοσειράς: Arial, Helvetica, sans-serif; ) Παράδειγμα διεπαφής χρήστη Kendo για WCG $(document).ready(function() ( // δημιουργία Ημερολογίου από το στοιχείο HTML div $("#calendar ").kendoCalendar(); ));
Όλα είναι εκεί μέσα, συμπεριλαμβανομένων των html, css και js, αλλά τα css και js συνδέονται από το διαδίκτυο.
Το παράδειγμα για το οποίο ο κώδικας είναι παραπάνω θα μοιάζει με αυτό:
Διαδραστικό Ημερολόγιο - jQuery
4. ΣυμπέρασμαΠαρόλο που τα ημερολόγια μπορούν εύκολα να δημιουργηθούν και να διαμορφωθούν σε html και css, όσον αφορά τη διαδραστικότητα, θα χρειαστείτε ένα πιο επαγγελματικό επίπεδο κωδικοποίησης σε javascript, εάν θέλετε να το κάνετε πλήρως προσαρμοσμένο από την αρχή.
Ωστόσο, μη διστάσετε να ετοιμάσετε τον κώδικα jQuery για να ζωντανέψετε τα πράγματα λίγο, ενώ μπορείτε να έχετε το δικό σας html και css.
Σημειώστε ότι μπορεί επίσης να χρειαστεί να βάλετε χαρακτηριστικά όπως τιμή ή όνομα στα στοιχεία σας όταν εξετάζετε ένα υποστηρικτικό ημερολόγιο υποστήριξης, όπου οι πληροφορίες υποβάλλονται και πρέπει να αποστέλλονται κάπου.
Ένα από τα σημαντικά στοιχεία στον ιστότοπο είναι το ημερολόγιο, με το οποίο οι χρήστες σας μπορούν να παρακολουθούν εκδηλώσεις και νέα προϊόντα. Ή απλώς διαβάστε τις σημειώσεις ή ό,τι άλλο μπορείτε να σκεφτείτε. Αφού αφιερώσετε λίγο χρόνο σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργείτε ένα σενάριο ημερολογίου PHP για τον ιστότοπό σας. Δεν θα περιοριστούμε στον προγραμματισμό, θα δώσουμε επίσης προσοχή στη δομή CSS και html του ημερολογίου. Με μια λέξη, θα κάνουμε τα πάντα, από την αρχή μέχρι το τέλος!
CSSΜιλήστε λιγότερο, δουλέψτε περισσότερο. Ας ξεκινήσουμε αμέσως με τα στυλ css του ημερολογίου. Ο παρακάτω κώδικας είναι συμβατός με το προβληματικό πρόγραμμα περιήγησης IE6.
/* calendar */ table.calendar ( border-left:1px solid #999; ) tr.calendar-row ( ) td.calendar-day ( min-height:80px; font-size:11px; position:relative; ) * html div.calendar-day ( ύψος:80px; ) td.calendar-day:hover ( background:#eceff5; ) td.calendar-day-np ( background:#eee; min-height:80px; ) * html div. calendar-day-np ( height:80px; ) td.calendar-day-head ( background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; Περιγραφή: 1 px συμπαγής #999; περιθώριο:-5px 0 0px πλάτος:20px:td.calendar-day, td.calendar-day-np; 999; περίγραμμα δεξιά: 1px συμπαγές #999;
PHPΟλόκληρος ο κώδικας δέσμης ενεργειών ημερολογίου PHP βασίζεται βασικά σε μια μεμονωμένη συνάρτηση που απαιτεί δύο παραμέτρους: τον επιθυμητό μήνα και έτος. Να σημειωθεί ότι στη μέση της συνάρτησης, άφησα χώρο για τη βάση δεδομένων. Εάν θέλετε, μπορείτε να εμφανίσετε τα απαραίτητα συμβάντα στο πλέγμα ημερολογίου. Όταν έγραφα αυτό το σενάριο, χρησιμοποίησα πίνακες αντί για μπλοκ div, καθώς είναι πιο πρακτικά σε περίπτωση που μια μέρα είναι γεμάτη γεγονότα.
Η αγγλόφωνη γραφή ημερολογίου λήφθηκε ως βάση, επομένως θα παράσχω δύο εκδόσεις: ένα ημερολόγιο σε αγγλικό και ρωσικό στιλ. Διαλέξτε ποιο σας αρέσει! Η μόνη διαφορά είναι στον κώδικα PHP. Τα στυλ CSS παραμένουν τα ίδια και για τις δύο επιλογές.
Σενάριο ημερολογίου PHP σε ρωσικό στυλ| ".implode(" | ",$headings)." |
