HTML5 Tutorial Πώς να φτιάξετε μια ενιαία σελίδα προϊόντος
Αυτό το άρθρο είναι μέρος του μας "Σειρά HTML5 / CSS3 Tutorials" - αφιερωμένο να σας βοηθήσει να κάνετε έναν καλύτερο σχεδιαστή και / ή προγραμματιστή. Κάντε κλικ ΕΔΩ για να δείτε περισσότερα άρθρα από την ίδια σειρά.
Σε αυτήν την ανάρτηση πρόκειται να εργαστούμε σε ένα φανταστικό έργο, δημιουργώντας μια ενιαία σελίδα προϊόντος για να προσφέρουμε το iPhone 4S και σε αυτό το έργο θα εφαρμόσουμε επίσης τις μεθόδους που έχουμε συζητήσει στις προηγούμενες θέσεις. ο στοιχείο και τον επιλογέα άρνησης.
Ας αρχίσουμε.
Η σήμανση HTML5
Πρώτον, πρέπει να δημιουργήσουμε ένα html έγγραφο με την ακόλουθη σήμανση:
Apple iPhone 4 - 16GB
Το πιο εκπληκτικό iPhone ακόμα.
Το γρηγορότερο τσιπ A5 διπλού πυρήνα. Η φωτογραφική μηχανή 8MP με ολοκαίνουργια οπτικά διαθέτει επίσης βίντεο 1080p HD. Και εισάγοντας το Siri. Είναι το πιο εκπληκτικό iPhone ακόμα.
Χαρακτηριστικά Προϊόντος
Φωτογραφική μηχανή 8 mega pixel με πλήρη εγγραφή βίντεο 1080p
Siri φωνή βοηθός
iCloud
Εκτύπωση αέρα
Οθόνη αμφιβόλου
Γεωγραφική σήμανση φωτογραφιών και βίντεο
Χρησιμοποιούμε αρκετές νέες ετικέτες από spec HTML5, όπως το επί κεφαλής, hgroup, φιγούρα, Ενότητα, και μία που συζητήσαμε προηγουμένως. ο Λεπτομέριες και περίληψη ετικέτα.
Ωστόσο, δεν πρόκειται να σκάψουμε σε αυτές τις ετικέτες, όχι επειδή δεν είμαστε πρόθυμοι να, αλλά μάλλον αυτά είναι βασικά θέματα που μπορείτε εύκολα να βρείτε αλλού. Έτσι, εάν είστε πραγματικά νέοι στην HTML5, θα σας συνιστούσα να διαβάσετε τις παρακάτω αναφορές αυτών των ετικετών. τους έχουν εξηγήσει συνολικά:
Ας μιλήσουμε για το Σημασιολογικό
Το στοιχείο κεφαλίδας HTML5
Το στοιχείο hgroup
Αναφορά ετικέτας HTML5
Τώρα ας δούμε την πρώτη εμφάνιση της σελίδας μας.
Λοιπόν, φαίνεται λογικό χωρίς στυλ. Στην κορυφή υπάρχει η επικεφαλίδα και έπειτα έρχεται η ενότητα για την εικόνα, την περιγραφή και τέλος το κουμπί "Αγοράστε τώρα". Τώρα, ας εντυπωσιάσουμε αυτή τη σελίδα.
Τα Στυλ
Θα ξεκινήσουμε κανονικοποιώντας όλα τα προεπιλεγμένα στυλ χρησιμοποιώντας αυτό το φύλλο στυλ και προσθέτουμε ένα φόντο με κλίση στο html ετικέτα.
Θυμηθείτε ότι όλα τα στοιχεία του προϊόντος μας είναι τυλιγμένα σε ένα div με την κλάση προϊόντος. Έτσι, εδώ θα θέλαμε να κεντράσουμε το περιτύλιγμα και να ρυθμίσουμε το πλάτος 650px.
.περιτύλιγμα πλάτος: 650px; περιθώριο: αυτόματη; padding: 25px 0px;
Η ενότητα κεφαλίδας
Στην επικεφαλίδα έχουμε δύο επικεφαλίδες h1 και h4, έτσι ας στυλίσουμε αυτά τα στοιχεία.
Ως συνήθως, ο IE (Internet Explorer) προκαλεί πάντα κάποιο πρόβλημα. εάν ανοίξετε αυτό σε οποιοδήποτε IE μικρότερο από 9, η σελίδα θα παραμείνει χωρίς στυλ.
Αυτό συμβαίνει επειδή ο Internet Explorer δεν αναγνωρίζει τα νέα στοιχεία (Ενότητα, επί κεφαλής, κ.λπ.), ώστε να μην ισχύουν τα στυλ που έχουμε καθορίσει. Έτσι, στο επόμενο βήμα θα εργαστούμε για την επίλυση αυτού του προβλήματος.
Δοκιμή υποστήριξης προγράμματος περιήγησης
Στην προηγούμενη ανάρτησή μας, αντιμετωπίσαμε την υποστήριξη του προγράμματος περιήγησης για το στοιχείο λεπτομερειών χρησιμοποιώντας αυτό το polyfill. έτσι ώστε να μπορεί να λειτουργήσει στα μη υποστηριζόμενα προγράμματα περιήγησης. Ωστόσο, αυτή τη φορά θα δοκιμάσουμε διαφορετικούς τρόπους να το κάνουμε με το Modernizr.
Από την επίσημη ιστοσελίδα της, "Το Modernizr είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που σας βοηθά να δημιουργήσετε την επόμενη γενιά HTML5 και CSS3-powered ιστοσελίδες". Τεχνικά, η Modernizr θα δοκιμάσει την υποστήριξη του προγράμματος περιήγησης για ορισμένα νέα στοιχεία και δυνατότητες. Εάν δεν παρέχεται υποστήριξη, τότε πρέπει να παρέχουμε μια εναλλακτική λύση αν είναι δίνοντας διαφορετικά στυλ ή παρέχοντας πολυπροπυλένια. Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε το Modernizr για να μας βοηθήσετε να δοκιμάσουμε τα στοιχεία και το συνοπτικό στοιχείο.
Πηγαίνετε στο Modernizr και προχωρήστε στη σελίδα λήψης.
Στη σελίδα λήψης, το Modernizr παρέχει ορισμένες επιλογές για τη διαμόρφωση της βιβλιοθήκης, οπότε πρέπει μόνο να επιλέξετε ορισμένες λειτουργίες που χρειάζεστε πραγματικά για τον ιστότοπό σας. Σε αυτή την περίπτωση, χρειαζόμαστε:
HTML5Shiv 3.4
Προσθήκη κλάσεων CSS, αυτή η δυνατότητα θα εισαγάγει αυτόματα κλάσεις στην ετικέτα html.
ο Modernizr.load,
μεταβείτε στο πλαίσιο πρόσθετων κοινοτήτων και επιλέξτε elem-λεπτομέρειες,
Στην ενότητα Επεκτασιμότητα, επιλέξτε Modernizr.addTest.
Δημιουργήστε και κατεβάστε το αρχείο.
Συνδέστε το με το html και επαναλάβετε τη φόρτωση της σελίδας στον Internet Explorer. Η σελίδα θα πρέπει τώρα να έχει σχεδιαστεί, καθώς ο Internet Explorer μπορεί τώρα να αναγνωρίσει τις ετικέτες.
Και αν δείτε την πηγή ή το στοιχείο επιθεώρησης, θα βρείτε την κατηγορία μη-λεπτομερειών που έχει εισαχθεί στην ετικέτα html. που δείχνει ότι το πρόγραμμα περιήγησης όπου προεπισκόπηση της σελίδας? δεν υποστηρίζει επί του παρόντος στοιχεία στοιχείων. @@@@ [Δεν μπορώ να καταλάβω αυτή την πρόταση. ]
Στη συνέχεια, μπορούμε να δημιουργήσουμε μια εναλλακτική λύση χρησιμοποιώντας αυτήν την κατηγορία ως το γάντζο, το οποίο θα κάνουμε στο επόμενο βήμα.
Το Fallback
Σε αυτό το βήμα θα παράσχουμε παρόμοια Λεπτομέριες για άλλα προγράμματα περιήγησης (εκτός του Chrome). Στην προηγούμενη ανάρτηση, αυτό το βήμα έγινε αυτόματα χρησιμοποιώντας αυτό το σενάριο, αλλά αυτή τη φορά θα το δημιουργήσουμε μόνοι μας.
Σημείωση: Απλά αναθεωρήσαμε λίγο από την προηγούμενη ανάρτησή μας. το στοιχείο στοιχείων υποστηρίζεται αυτήν τη στιγμή μόνο στο πρόγραμμα περιήγησης Chrome.
Ας αρχίσουμε λοιπόν να δουλεύουμε πρώτα στο CSS.
Στην ετικέτα περίληψης, αλλάζουμε τη λειτουργία του δρομέα σε δείκτη, οπότε ο χρήστης θα παρατηρήσει ότι είναι clickable.
σύνοψη δρομέας: δείκτης; μέγεθος γραμματοσειράς: 12pt; περίγραμμα: 0;
Για να δώσετε περισσότερα περιθώρια στο επάνω και το κάτω μέρος του στοιχείου λεπτομερειών με περιθώριο.
λεπτομέρειες margin: 20px 0px;
Από προεπιλογή, η ετικέτα περίληψης θα έχει ένα βέλος. Αλλά εδώ θα θέλαμε να το αντικαταστήσουμε με ένα εικονίδιο συν-πλην.
Σημείωση: Πριν προχωρήσουμε, προηγουμένως έχω κατεβάσει τα εικονίδια από αυτή τη συλλογή από το Fugue, κατεβάζω και σπρίω τα σε ένα αρχείο.
Ας προσθέσουμε ένα ψευδο-στοιχείο πριν και να επισυνάψουμε το εικονίδιο ως φόντο. Παρατηρήστε ότι σε αυτό το σημείο, η θέση φόντου βρίσκεται στην κορυφή και θα εμφανιστεί το εικονίδιο συν.
Στη συνέχεια, όταν το στοιχείο λεπτομερειών είναι ανοικτό, η θέση φόντου θα μετακινηθεί στο κάτω μέρος, που θα εμφανίσει το εικονίδιο μείον.
λεπτομέρειες [ανοιχτό]> περίληψη: πριν, λεπτομέρειες.open> περίληψη: πριν από την background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) μη επαναλαμβανόμενο κέντρο κάτω?
ο [Άνοιξε] Το σύμβολο είναι ένας επιλογέας. Σε αυτή την περίπτωση, θα επιλέξει το χαρακτηριστικό ανοιχτών λεπτομερειών στο βοηθητικό πρόγραμμα περιήγησης.
Τέλος, πρέπει να αποκρύψουμε το βέλος που εμφανίζεται από προεπιλογή στο Chrome.
Στη συνέχεια, ας δούμε το αποτέλεσμα σε ένα πρόγραμμα περιήγησης για λίγο.
Το προεπιλεγμένο βέλος τώρα έχει αντικατασταθεί με το εικονίδιο μας και αν το δείτε στο Chrome θα έχετε ήδη ένα εφέ εναλλαγής όταν κάνετε κλικ σε αυτό. το εικονίδιο θα αλλάξει αναλόγως. Αλλά, σε άλλους browsers τίποτα δεν θα συμβεί ακόμα. Έτσι, στο επόμενο βήμα θα προσπαθήσουμε να αντιγράψουμε το αποτέλεσμα με το jQuery.
Το εφέ εναλλαγής με το jQuery
Πριν ξεκινήσουμε με το τμήμα jQuery, θα ήθελα να ευχαριστήσω τον Ian Devlin για την έμπνευση, το παρακάτω σενάριο είναι στην πραγματικότητα μια μικρή τροποποίηση του.
Εντάξει, ας δημιουργήσουμε μια μεταβλητή για να αποθηκεύσουμε την ετικέτα περίληψης.
var summary = $ ('περίληψη λεπτομερειών');
Στη συνέχεια, τυλίγουμε όλα τα αδέρφια στοιχεία της σύνοψης με ένα div.
summary.siblings () wrapAll ('').
Και κρύβετε το div όταν το στοιχείο λεπτομέρειες δεν έχει την ανοιχτή κλάση.
$ ('λεπτομέρειες: όχι (.open) περίληψη'). αδελφούς ('div').
Όταν γίνεται κλικ σε περίληψη, θέλουμε να εμφανιστεί το κρυφό div και το αντίθετο, όταν το div είναι αρχικά ανοιχτό, θα είναι κρυφό.
(')' () ') () () () ().
Για να βεβαιωθείτε ότι οι λειτουργίες αυτές θα εκτελούνται μόνο στα μη υποστηριζόμενα προγράμματα περιήγησης, τα τυλίγουμε μέσα σε αυτήν την υπό όρους δήλωση.
εάν ($ ('html') hasClass ('no-details')) // ο κωδικός πηγαίνει εδώ
Και κάτω είναι ο κώδικας που έχουμε:
if ($ ('html') hasClass ('no-details')) var summary = $ ('περίληψη λεπτομερειών'); summary.siblings () wrapAll (''). $ ('λεπτομέρειες: όχι (.open) περίληψη'). αδελφούς ('div'). (')' () ') () () () ().
Τώρα δοκιμάστε το στο πρόγραμμα περιήγησης. το εφέ εναλλαγής θα πρέπει να έχει λειτουργήσει τώρα σε όλα τα προγράμματα περιήγησης, προσωπικά έχω ελέγξει (μέχρι τον Internet Explorer 7).
Διαδήλωση
Λήψη πηγής
Συμβουλές: Εναλλακτικά μπορείτε να αλλάξετε το .μεταβάλλω() με .slideToggle () για να δημιουργήσετε ένα εφέ διαφάνειας. Επίσης, αν θέλετε αρχικά να ανοίξετε τη λεπτομέρεια, μπορείτε να προσθέσετε μια κατηγορία ανοικτή στο στοιχείο λεπτομέρειες.
συμπέρασμα
Πραγματοποιήσαμε όλα τα βήματα δημιουργίας μιας σελίδας προϊόντος με χρήση HTML5, εντοπισμού σφαλμάτων για μη υποστηριζόμενα προγράμματα περιήγησης καθώς και την αναπαραγωγή του αποτελέσματος εναλλαγής για το στοιχείο λεπτομέρειας μόνοι μας, οπότε ελπίζουμε ότι μπορείτε να μάθετε πολλά από αυτό.
Ωστόσο, γνωρίζω ότι δεν εξήγησα τα πάντα λεπτομερώς σε αυτήν την ανάρτηση, οπότε αν θέλετε να καθαρίσετε κάτι, μην διστάσετε να καταχωρήσετε την ερώτηση στο παρακάτω πλαίσιο σχολίων.
