Σχεδιασμός εφαρμογών για κινητά / πλοήγηση Dev Building με jQuery
Τα smartphones είναι πλέον εξοπλισμένα με μερικά πολύ αποδοτικά προγράμματα περιήγησης ιστού. Το JavaScript είναι πιο ισχυρό από ποτέ, και μπορεί να επεκταθεί με τη βοήθεια βιβλιοθηκών κώδικα όπως το jQuery. Όταν προσθέτετε τις πιο πρόσφατες προδιαγραφές HTML5 / CSS3, είναι δυνατόν να δημιουργήσετε πολύ εύκαμπτες εφαρμογές ιστού για κινητά με κάποιο βασικό κωδικό frontend.
Σε αυτό το σεμινάριο θα δείξω πώς μπορείτε να δημιουργήσετε έναν ιστότοπο / webapp που βασίζεται σε κινητά. Θα χρησιμοποιήσουμε ερωτήματα μέσων CSS3 για στόχευση συγκεκριμένων συσκευών και αναλύσεων οθόνης. Συν ένα κομμάτι του jQuery βοηθά να ζωντανέψει το μενού και να φορτώσει το εξωτερικό περιεχόμενο της σελίδας χρησιμοποιώντας τις κλήσεις Ajax. Ακόμη καλύτερα, η διάταξη μπορεί να επεκταθεί ακόμη και να εμφανίζεται σωστά σε κανονικά προγράμματα περιήγησης επιφάνειας εργασίας, όπως το Chrome ή το Firefox.
- Ζωντανή επίδειξη
- Κωδικός πηγής
Ορισμός της δομής σελίδας
Ας αρχίσουμε πρώτα από τη μετάβαση πάνω από τη σελίδα HTML και το στυλ χρησιμοποιώντας κάποιους κανόνες CSS. Θα παραλείψω τις περισσότερες από τις ασυνήθιστες μετα-ετικέτες στην κεφαλίδα, επειδή δεν επηρεάζουν άμεσα την εφαρμογή Ιστού. Ωστόσο, υπάρχουν λίγα λόγια που πρέπει να αναφέρω, δηλαδή από το παρακάτω απόσπασμα:
Συμβατό με X-UA χρησιμοποιείται για να περιγράψει την απόδοση του εγγράφου σας σε ορισμένα προγράμματα περιήγησης. Είναι ένα ενδιαφέρον σενάριο κατά την κωδικοποίηση στο HTML5, οπότε δεν θα ανησυχούσα πολύ για αυτό. Ωστόσο, τα meta θέα ετικέτα είναι πολύ σημαντική. Θέτει το παράθυρο του προγράμματος περιήγησης στο κινητό σε 100% αντί για το τυπικό zoom.
Είναι επίσης δυνατό να απενεργοποιήσετε το ζουμ χρήστη με την τιμή του περιεχομένου user-scalable = όχι. Αλλά σε αυτή την περίπτωση θέλουμε απλά να ορίσουμε το πλάτος ολόκληρης της οθόνης να είναι το ίδιο με το πλάτος της συσκευής μας. Οι ετικέτες εφαρμογών ιστού της Apple θα επιτρέψουν στον ιστότοπο να αποθηκευτεί ως εικονίδιο αρχικής οθόνης στο iPhone ή στο iPod Touch. Δεν είναι απολύτως αναγκαίο, αλλά σίγουρα αξίζει τον κόπο.
Περιεχόμενο εσωτερικού σώματος
Μέσα στην ετικέτα του σώματος έχω ρυθμίσει ένα περιτύλιγμα div με το αναγνωριστικό #w. Στο εσωτερικό έχω σπάσει τη διάταξη σε δύο ακόμα διαφορές χρησιμοποιώντας τα αναγνωριστικά #pagebody και #navmenu. Το πλάτος ολόκληρης της σελίδας περιορίζεται σε 640ppx κατά επιλογή, έτσι ώστε η διάταξη να κλιμακώνεται σε αυστηρό αριθμό.
Σύνδεσμοι μενού
Στο μενού πλοήγησης δίνεται μια χαμηλότερη τιμή z-index έτσι ώστε #pagebody είναι πάντα στην κορυφή. Αυτό είναι ζωτικής σημασίας δεδομένου ότι ο κώδικας JavaScript θα μετακινήσει πάνω από το σώμα της σελίδας έναν ορισμένο αριθμό pixel για να αποκαλύψει την πλοήγηση από κάτω.
Έχω χρησιμοποιήσει ένα σύμβολο κατακερματισμού (#) μπροστά από κάθε σελίδα .html για να σταματήσω κάποια κακή συμπεριφορά στο Mobile Safari. Κάθε φορά που κάνετε κλικ σε μια σύνδεση, εμφανίζεται η γραμμή URL και ωθεί το περιεχόμενο. Αλλά όταν γίνεται αναφορά σε ένα αναγνωριστικό, τίποτα δεν επαναφορτώνεται εκτός από τις κλήσεις JavaScript.
CSS Positioning
Δεν υπάρχει πολύς συγχέοντας περιεχόμενο στον κώδικα CSS. Το μεγαλύτερο μέρος της τοποθέτησης γίνεται χειροκίνητα και στη συνέχεια χειρίζεται μέσω του jQuery. Αλλά υπάρχουν μερικά ενδιαφέροντα κομμάτια στο έγγραφό μας.
/ ** @ σώμα ομάδας πυρήνα ** / #w #pagebody θέση: σχετική? αριστερά: 0; μέγιστο πλάτος: 640px; min-πλάτος: 320px; z-δείκτης: 99999; #w #navmenu background: # 475566; ύψος: 100%. εμφάνιση: μπλοκ? θέση: σταθερή. πλάτος: 300px; αριστερά: 0px; κορυφή: 0px; z-δείκτης: 0;
Αυτό το κορυφαίο τμήμα ορίζει στυλ και για τα δύο τμήματα της σελίδας. Το μενού μας είναι μόνο 300px πλάτος, οπότε αυτό αφήνει λίγο περιθώριο για το περιεχόμενο της σελίδας να φαίνεται ακόμα. Το κουμπί επιλογής ανοίγματος / κλεισίματος βρίσκεται επίσης απευθείας στην αριστερή πλευρά και είναι πάντα προσβάσιμο. Το σημαντικό κομμάτι εδώ είναι η αξία ιδιότητας z index και η χρήση θέση: σταθερή. στο navmenu μας.
Η επάνω στήλη της γραμμής εργαλείων είναι επίσης ένα ενδιαφέρον τμήμα. Αυτό έχει οριστεί σε μια σταθερή θέση, ώστε να μετακινηθεί με το περιεχόμενο της σελίδας. Αυτό επαναλαμβάνει ένα παρόμοιο αποτέλεσμα όπως θα διαπιστώσατε σε οποιαδήποτε γραμμή τίτλου εφαρμογής iOS.
/ ** @ headergroup ** / #w #pagebody header # toolbarnav εμφάνιση: μπλοκ; θέση: σταθερή. αριστερά: 0px; κορυφή: 0px; z-δείκτης: 9999; Ιστορικό: # 0b1851 url ('img / tabbar-solid-bg.png') επάνω αριστερά χωρίς επανάληψη. ακτίνα ακτίνων: 5px; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; -ο-ακτίνα-ακτίνα: 5px; οριακή-κάτω-δεξιά-ακτίνα: 0; -moz-border-ακτίνα-bottomright: 0; -webkit-περιθώριο-κάτω-δεξιά-ακτίνα: 0; όριο-κάτω-αριστερά-ακτίνα: 0; -moz-περιθώριο-ακτίνα-bottomleft: 0; -webkit-περιθώριο-κάτω-αριστερά-ακτίνα: 0; ύψος: 44px; πλάτος: 100%. μέγιστο πλάτος: 640px; #w #pagebody κεφαλίδα # εργαλείοbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; χρώμα: # e6e8f2; γραμματοσειρά-βάρος: έντονα. μέγεθος γραμματοσειράς: 2.1em; σκιά κειμένου: 1px 1px 0px # 313131; Κανόνες για κινητά
Είναι εύκολο να παρατηρήσετε ότι χρησιμοποιώ επίσης εικόνα φόντου για την υφή της μπλε κεφαλίδας. Αυτό έχει μέγεθος 640 × 44 εικονοστοιχείων για να διατηρηθεί με τη συνεπή δομή διάταξης. Αλλά έχω επίσης αναπτύξει μια εικόνα @ 2x για iPhone / iPad οθόνες αμφιβληστροειδούς. Μπορείτε να δείτε και τις δύο εικόνες παρακάτω, ή να τις αρπάξετε από τον πηγαίο κώδικα του demo μου.
- System/demo/img/[email protected]
- System/demo/img/[email protected]
Έχω ρυθμίσει το κινητό CSS για αυτήν τη λειτουργικότητα σε ένα άλλο αρχείο που ονομάζεται responsive.css. Περιέχει δύο ερωτήματα μέσων που αντικαθιστούν τη γραμμή τίτλου bg και το εικονίδιο μενού μενού για συσκευές αμφιβληστροειδούς.
/ οθόνη ** μόνο οθόνη και @ (-webkit-min-device-pixel-ratio: 2), μόνο οθόνη και (min-moz-device-pixel-ratio: 1.5) min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') επάνω αριστερά χωρίς επανάληψη. μέγεθος φόντου: 640px 44px; #w #pagebody κεφαλίδα # μενού-btn background: url ('img/[email protected] ') no-repeat; μέγεθος φόντου: 53px 30px; Σχεδιάζοντας βέλη μενού
Στην περιοχή πλοήγησης έχω συμπεριλάβει επίσης ένα μικρό εικονίδιο βέλους στη δεξιά πλευρά κάθε συνδέσμου μενού. Αυτό μπορεί εύκολα να αντικατασταθεί με μια εικόνα από οποιοδήποτε δημιουργικό έργο τέχνης. Αλλά κυρίως όλοι οι λάτρεις του CSS3 θα αγαπήσουν να δοκιμάσουν αυτή τη μέθοδο.
#w #navmenu ul li a :: μετά από περιεχόμενο: "; εμφάνιση: μπλοκ · πλάτος: 6px · ύψος: 6px · σύνορο-δεξιά: 3px στερεό # d0d0d8 · κορυφαίο όριο: 3px στερεό # d0d0d8 · θέση: απόλυτο · δεξιά (45deg), -m-transform: περιστρέψτε (45deg), -o-transform: περιστρέψτε (45deg), μετασχηματίστε: περιστρέψτε (45deg), #w #navmenu ul li a: hover :: μετά από border-color: # cad0e6;
Χρησιμοποιούμε το μεταμορφώνω να δημιουργήσετε ένα μικρό περίγραμμα μετά το περιεχόμενο. Ρυθμίζω επίσης θέση: απόλυτη; έτσι μπορούμε να μετακινήσουμε ελεύθερα αυτά τα σύνορα γύρω από το εσωτερικό στοιχείο σύνδεσης. Είναι εξαιρετικά εύκολο να αλλάξετε το χρώμα των περιθωρίων σε μια κατάσταση αιώρησης, η οποία προσφέρει μια πιο δυναμική αίσθηση. Είναι πολύ απίστευτο αυτό που μπορείτε να ολοκληρώσετε χρησιμοποιώντας βασικούς κανόνες HTML5 και CSS3.
Αλλά τώρα ας κινηθούμε στα κομμάτια κώδικα JavaScript. Θυμηθείτε ότι αυτό απαιτεί να συμπεριληφθεί στη βιβλιοθήκη jQuery ο κώδικας μου να λειτουργεί σωστά.
jQuery Animated
Κατά τη σύνταξη αυτών των προσαρμοσμένων κωδικών έχω δημιουργήσει ένα ολοκαίνουργιο έγγραφο που ονομάζεται script.js. Μη διστάσετε να γράψετε αυτά απευθείας μέσα >
$ var = $ ("################################################################################################################# # #content ") · var viewport = width: $ (παράθυρο) .width (), height: $ (window) .height (); // ανάκτηση μεταβλητών ως // viewport.width / viewport.height Για να ξεκινήσω, έχω ρυθμίσει μερικές μεταβλητές σελίδας όπου μπορούμε να παραπέμπουμε στοιχεία στο έγγραφο πολύ πιο γρήγορα. Η τιμή προβολής δεν χρησιμοποιείται ποτέ, αλλά μπορεί να είναι χρήσιμη εάν θέλετε να προσαρμόσετε τα στάδια κινούμενων εικόνων. Για παράδειγμα, μπορείτε να ελέγξετε το τρέχον πλάτος του προγράμματος περιήγησης και να ανοίξετε το μενού σας μικρότερο ή ευρύτερο αντίστοιχα.
(left: "290px", duration: 300, ουρά: ψευδής), pagebody.animate (left: "290px", , ουρά: ψευδές),)? (left: "0px", (left: "0px", διάρκεια: 180, ουρά: ψευδής),),
Στη συνέχεια, ορίσαμε δύο σημαντικές λειτουργίες για το άνοιγμα και το κλείσιμο του μενού. Αυτά θα μπορούσαν να έχουν γίνει με μία μόνο λειτουργία και με εναλλαγή επανάκλησης - εκτός από την περίπτωση που πραγματικά χρειάζεται να ζωντανέψουμε ταυτόχρονα δύο διαφορετικά στοιχεία. Δυστυχώς, αυτό δεν είναι η προεπιλεγμένη συμπεριφορά για το jQuery, οπότε πρέπει να καταφύγουμε σε μια εναλλακτική σύνταξη.
Τα δύο στοιχεία που στοχεύουμε ονομάζονται topbar και pagebody. Η εσωτερική περιοχή περιεχομένου με λευκό φόντο είναι το πλήρες μέρος του σώματος. Ωστόσο, έχουμε τη θέση της γραμμής τίτλου σταθερή στο επάνω μέρος της σελίδας. Αυτό σημαίνει ότι φυσικά δεν θα ζωντανέψει με τη σελίδα και πρέπει να χρησιμοποιήσουμε ξεχωριστή κλήση. Το άνοιγμα είναι ρυθμισμένο για να σπρώξει 290px προς τα αριστερά (σχεδόν το πλήρες πλάτος 300px) και η λειτουργία κλεισίματος την αναστέλλει.
Φόρτωση δυναμικού περιεχομένου
Ο παραπάνω κώδικας είναι αρκετά εύκολος για τη φροντίδα του animation. Και θεωρητικά αυτό είναι όλο που χρειάζεστε για έναν τόσο απλό κινητό ιστότοπο - αλλά θέλω να προσθέσω λίγο περισσότερο.
Κάθε φορά που ο χρήστης κάνει κλικ σε έναν σύνδεσμο μενού, θέλουμε να κλείσουμε την τρέχουσα πλοήγηση και να δείξουμε ένα gif φόρτωσης ενώ ψάχνουμε για το περιεχόμενο της σελίδας. Στη συνέχεια, αφού ολοκληρωθεί, αφαιρούμε την εικόνα gif και φορτώνουμε όλα μέσα. Αυτό είναι φανταστικό επειδή μπορούμε να χρησιμοποιήσουμε ακόμη και στατικές σελίδες .html για το περιεχόμενο. Δεν PHP ή Ruby ή Perl ή οποιαδήποτε γλώσσα backend να κάνει τα πράγματα βρώμικο.
Διαχείριση Κλικ
Αρχικά θέλουμε να δοκιμάσουμε όταν οι χρήστες μας κάνουν κλικ στα κουμπιά πλοήγησης. Αυτό θα σταματήσει την κανονική τιμή href από τη φόρτωση και αντ 'αυτού μπορούμε να χρησιμοποιήσουμε τις δικές μας λειτουργίες για την εμφάνιση εξωτερικού περιεχομένου.
// φόρτωση σελίδας περιεχομένου για πλοήγηση $ ("a.navlink") live ("κλικ", λειτουργία (e) e.preventDefault (); var linkurl = $ (αυτό) .attr ("href" = linkurl.substring (1, linkurl.length) · var imgloader = '
Τώρα ανοίγουμε έναν επιλογέα για οποιαδήποτε άγκυρα με την τάξη navlink. Κάθε φορά που κάποιος χρήστης κάνει κλικ σε έναν από αυτούς τους συνδέσμους, τον σταματάμε από τη φόρτωση και τη ρύθμιση μιας μεταβλητής για την πλήρη διεύθυνση URL. Έχω επίσης ρυθμίσει μια μεταβλητή για το περιεχόμενο HTML για να συμπεριλάβει έναν τυπικό φορτωτή εικόνας. Αν θέλετε να προσαρμόσετε το δικό σας συνιστώ ανεπιφύλακτα Ajaxload.
Ajax .load ()
Υπάρχουν δύο διαφορετικά κομμάτια για αυτό το σκοπό τα οποία έχω διαλυθεί καλά. Ο παρακάτω κώδικας είναι το πρώτο μας bit που κλείνει το μενού πλοήγησης και ολισθαίνει το συνολικό παράθυρο εγγράφου μέχρι το επάνω μέρος. Θέλουμε να αντικαταστήσουμε το περιεχόμενο του εσωτερικού σώματος με μια μικρή κίνηση φορτωτή και οι χρήστες δεν μπορούν να το δουν αν κοιτούσαν το κάτω μέρος της σελίδας.
closeme (); $ (λειτουργία () topbar.css ("κορυφή", "0px"); window.scrollTo (0, 1);); Τώρα τελικά θέλουμε να αντικαταστήσουμε το περιεχόμενο του εσωτερικού σώματος με την εικόνα μας και να φέρουμε την εξωτερική σελίδα για φόρτωση. Κανονικά, αυτό θα διαρκέσει μόνο μερικές εκατοντάδες χιλιοστά του δευτερολέπτου ή ακόμα πιο γρήγορα, οπότε έχω ρυθμίσει μια λειτουργία χρονικού ορίου.
content.html (imgloader); setTimeout (συνάρτηση () content.load (linkhtmlurl, λειτουργία () / * όχι callback * /, 1200);
Αυτό θα σταματήσει 1200 χιλιοστά του δευτερολέπτου πριν να φορτώσει νέο περιεχόμενο. Για το demo μου αυτό φαίνεται πολύ καλύτερα και σας δίνει μια ιδέα για το πώς η εφαρμογή θα συμπεριφερόταν στις πιο αργές συνδέσεις στο Internet.
συμπέρασμα
Ενθαρρύνω όλους τους προγραμματιστές Ιστού να κατεβάσουν τον πηγαίο κώδικα του tutorial και να παίξουν μόνοι τους. Αυτό είναι ένα τόσο βασικό παράδειγμα του τι μπορεί να επιτευχθεί με HTML / CSS3 και ένα άγγιγμα των εφέ JavaScript. Το κτίριο για κινητές οθόνες είναι πιο εύκολο από ποτέ με τα ερωτήματα των μέσων ενημέρωσης και τα πιο εξελιγμένα προγράμματα περιήγησης ιστού.
Δείτε αν μπορείτε να εφαρμόσετε οποιονδήποτε από αυτόν τον κώδικα στα μελλοντικά έργα ιστού. Η οικοδόμηση κινητών εφαρμογών είναι μια τέχνη, παρόμοια με το σχεδιασμό ιστοσελίδων, και απαιτεί πολλή αφοσίωση και πρακτική. Ελπίζω ότι αυτό το σεμινάριο μπορεί να είναι ένα καλό σημείο εκκίνησης για μερικούς ενθουσιώδεις προγραμματιστές. Εάν έχετε ερωτήσεις ή σκέψεις σχετικά με τον κώδικα, μπορείτε να μοιραστείτε μαζί μας στην περιοχή συζήτησης μετά.
