Δημιουργήστε έναν ιστότοπο για κινητά με το jQuery Mobile

Περιεχόμενο

• Πώς να κωδικοποιήσετε πολλές σελίδες σε ένα αρχείο HTML
• Περιγραφή
• Πώς να χρησιμοποιήσετε τα παράθυρα διαλόγου και τις μεταβάσεις
• Οι μεταβάσεις που μπορούν να χρησιμοποιηθούν
• Περιγραφή
• Πώς να δημιουργήσετε κουμπιά
• Περιγραφή
• Πώς να δημιουργήσετε μια γραμμή πλοήγησης
• Πώς να κωδικοποιήσετε το HTML για μια γραμμή πλοήγησης:
• Πώς να μορφοποιήσετε περιεχόμενο με το jQuery Mobile
• Τα προεπιλεγμένα στυλ που χρησιμοποιεί το jQuery Mobile
• Περιγραφή
• Πώς να εφαρμόσετε θέματα σε στοιχεία HTML
• Δύο τρόποι εφαρμογής ενός θέματος:
• Περιγραφή
• Προοπτική

Αυτό είναι ένα επεξεργασμένο απόσπασμα από το Κεφάλαιο 15 του HTML5 και CSS3 του Murach των Zak Ruvalcaba και Anne Boehm.

Το jQuery Mobile είναι μια δωρεάν βιβλιοθήκη JavaScript ανοιχτής πηγής, πολλαπλής πλατφόρμας που μπορείτε να χρησιμοποιήσετε για την ανάπτυξη ιστότοπων για κινητά. Αυτή η βιβλιοθήκη σάς επιτρέπει να δημιουργείτε σελίδες που μοιάζουν και μοιάζουν με τις σελίδες μιας εγγενούς εφαρμογής για κινητά.

Παρόλο που το jQuery Mobile είναι προς το παρόν διαθέσιμο ως δοκιμαστική έκδοση beta, αυτή η έκδοση παρέχει ήδη όλες τις δυνατότητες που χρειάζεστε για την ανάπτυξη ενός εξαιρετικού ιστότοπου για κινητά. Ως αποτέλεσμα, μπορείτε να αρχίσετε να το χρησιμοποιείτε αμέσως. Μπορείτε επίσης να περιμένετε ότι αυτή η έκδοση θα βελτιώνεται συνεχώς, επομένως το jQuery Mobile θα βελτιωθεί μόνο.

Σε αυτό το άρθρο θα μάθετε τις βασικές τεχνικές για τη δημιουργία των σελίδων ενός ιστότοπου για κινητά. Αυτό θα περιλαμβάνει τη χρήση παραθύρων διαλόγου, κουμπιών και γραμμών πλοήγησης.

Πώς να κωδικοποιήσετε πολλές σελίδες σε ένα αρχείο HTML

Σε αντίθεση με τον τρόπο που αναπτύσσετε τις ιστοσελίδες για έναν ιστότοπο οθόνης, το jQuery Mobile σάς επιτρέπει να δημιουργείτε πολλές σελίδες σε ένα αρχείο HTML. Αυτό απεικονίζεται στο σχήμα 15-7. Εδώ, μπορείτε να δείτε δύο σελίδες ενός ιστότοπου μαζί με το HTML για αυτές τις σελίδες. Αυτό που προκαλεί έκπληξη είναι ότι και οι δύο σελίδες κωδικοποιούνται σε ένα μόνο αρχείο HTML.

Για κάθε σελίδα, κωδικοποιείτε ένα στοιχείο div με "σελίδα" ως την τιμή του χαρακτηριστικού ρόλου δεδομένων. Στη συνέχεια, σε κάθε ένα από αυτά τα στοιχεία div, κωδικοποιείτε τα στοιχεία div για την κεφαλίδα, το περιεχόμενο και το υποσέλιδο κάθε σελίδας. Αργότερα, όταν φορτώνεται το αρχείο HTML, εμφανίζεται η πρώτη σελίδα στο σώμα του αρχείου.

Για σύνδεση μεταξύ των σελίδων στο αρχείο HTML, χρησιμοποιείτε σύμβολα κράτησης θέσης όπως φαίνεται στο σχήμα 7-11 του κεφαλαίου 7. Για παράδειγμα, το στοιχείο> στην πρώτη σελίδα σε αυτό το παράδειγμα πηγαίνει στο "#toobin" όταν ο χρήστης πατάει στο h2 ή img στοιχείο που κωδικοποιείται ως το περιεχόμενο αυτού του συνδέσμου. Αυτό αναφέρεται στο στοιχείο div με το "toobin" ως χαρακτηριστικό αναγνωριστικού, το οποίο σημαίνει ότι πατώντας το σύνδεσμο οδηγεί τον αναγνώστη στη δεύτερη σελίδα του αρχείου.

Αν και αυτό το παράδειγμα δείχνει μόνο δύο σελίδες, μπορείτε να κωδικοποιήσετε πολλές σελίδες σε ένα μόνο αρχείο HTML. Θυμηθείτε, ωστόσο, ότι όλες οι σελίδες μαζί με τις εικόνες τους, το JavaScript και τα αρχεία CSS φορτώνονται με το μοναδικό αρχείο HTML. Ως αποτέλεσμα, ο χρόνος φόρτωσης θα γίνει υπερβολικός εάν αποθηκεύσετε πάρα πολλές σελίδες σε ένα αρχείο. Όταν συμβεί αυτό, μπορείτε να χωρίσετε τις σελίδες σας σε περισσότερα από ένα αρχεία HTML.

Το HTML για τις δύο σελίδες στο σώμα ενός αρχείου HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> Τα ηχεία 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 Οκτωβρίου 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - ΤΑ ΣΤΟΙΧΕΙΑ ΓΙΑ ΤΟ ΥΠΟΛΟΙΠΟ ΤΩΝ ΟΜΙΛΗΤΩΝ - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "σελίδα" id = "toobin"> κεφαλίδα data-role = "header"> h1> Δημαρχείο SJV / h1> / κεφαλίδα> ενότητα δεδομένων-ρόλος = "περιεχόμενο"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Συγγραφέας του δημοφιλούς best seller, i> The Nine:! - THE COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Περιγραφή

• Όταν χρησιμοποιείτε το jQuery Mobile, δεν χρειάζεται να αναπτύξετε ξεχωριστό αρχείο HTML για κάθε σελίδα. Αντ 'αυτού, μέσα στο κύριο σώμα ενός αρχείου HTML, κωδικοποιείτε ένα στοιχείο div για κάθε σελίδα με το χαρακτηριστικό ρόλου δεδομένων που έχει οριστεί σε "σελίδα".
• Για κάθε στοιχείο div, μπορείτε να ορίσετε το χαρακτηριστικό id σε μια τιμή κράτησης θέσης στην οποία μπορείτε να έχετε πρόσβαση τα χαρακτηριστικά href στα στοιχεία> άλλων σελίδων.

Πώς να χρησιμοποιήσετε τα παράθυρα διαλόγου και τις μεταβάσεις

Το σχήμα 15-8 δείχνει πώς να δημιουργήσετε ένα παράθυρο διαλόγου που ανοίγει όταν πατηθεί ένας σύνδεσμος. Για να το κάνετε αυτό, κωδικοποιείτε το παράθυρο διαλόγου όπως θα κάνατε σε οποιαδήποτε σελίδα. Αλλά στο στοιχείο> που πηγαίνει σε αυτήν τη σελίδα, κωδικοποιείτε ένα χαρακτηριστικό rel-data με την τιμή "διάλογος".

Όπως δείχνουν τα παραδείγματα σε αυτό το σχήμα, το αρχείο jQuery Mobile CSS διαμορφώνει ένα παράθυρο διαλόγου διαφορετικά από μια κανονική ιστοσελίδα. Από προεπιλογή, ένα πλαίσιο διαλόγου θα έχει σκούρο φόντο με λευκό κείμενο προσκηνίου και η κεφαλίδα και το υποσέλιδο δεν θα καλύπτουν το πλάτος της σελίδας. Ένα πλαίσιο διαλόγου θα έχει επίσης ένα "X" στην κεφαλίδα που πρέπει να πατήσει ο χρήστης για να επιστρέψει στην προηγούμενη σελίδα.

Όταν κωδικοποιείτε ένα στοιχείο> που πηγαίνει σε άλλη σελίδα ή παράθυρο διαλόγου, μπορείτε επίσης να χρησιμοποιήσετε το χαρακτηριστικό μετάβασης δεδομένων για να καθορίσετε μία από τις έξι μεταβάσεις που συνοψίζονται στον πίνακα σε αυτό το σχήμα. Κάθε μία από αυτές τις μεταβάσεις προορίζεται να μιμηθεί ένα αποτέλεσμα που χρησιμοποιεί μια κινητή συσκευή όπως ένα iPhone.

Οι μεταβάσεις που μπορούν να χρησιμοποιηθούν

HTML που ανοίγει τη σελίδα ως παράθυρο διαλόγου με τη μετάβαση "pop":

a href = "# toobin" data-rel = "dialog" δεδομένα-μετάβαση = "pop">

HTML που ανοίγει τη σελίδα με τη μετάβαση "fade":

a href = "# toobin" δεδομένα-μετάβαση = "fade">

Περιγραφή

• Το HTML για ένα κουτί διαλόγου κωδικοποιείται όπως κωδικοποιείται οποιαδήποτε σελίδα. Ωστόσο, το στοιχείο> που συνδέεται με τη σελίδα περιλαμβάνει το χαρακτηριστικό rel-data με την τιμή "διάλογος". Για να κλείσει το παράθυρο διαλόγου, ο χρήστης πατά το X στην κεφαλίδα του πλαισίου.
• Για να καθορίσετε τον τρόπο με τον οποίο ανοίγει μια σελίδα ή ένα παράθυρο διαλόγου, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό μετάβασης δεδομένων με μία από τις τιμές στον παραπάνω πίνακα. Εάν μια συσκευή δεν υποστηρίζει τη μετάβαση που καθορίζετε, το χαρακτηριστικό αγνοείται.
• Το στυλ για ένα παράθυρο διαλόγου γίνεται από το αρχείο jQuery Mobile CSS.

Πώς να δημιουργήσετε κουμπιά

Το σχήμα 15-9 δείχνει τον τρόπο χρήσης κουμπιών για πλοήγηση από τη μία σελίδα στην άλλη. Για να το κάνετε αυτό, απλώς ορίζετε το χαρακτηριστικό data-role για ένα στοιχείο> σε «κουμπί» και το jQuery Mobile κάνει τα υπόλοιπα.
Ωστόσο, μπορείτε επίσης να ορίσετε κάποια άλλα χαρακτηριστικά για κουμπιά. Αν, για παράδειγμα, θέλετε δύο ή περισσότερα κουμπιά να εμφανίζονται δίπλα-δίπλα, όπως τα δύο πρώτα κουμπιά σε αυτό το σχήμα, μπορείτε να ορίσετε το χαρακτηριστικό inline στο "true".

Εάν θέλετε να προσθέσετε ένα από τα 18 εικονίδια που παρέχονται από το jQuery Mobile σε ένα κουμπί, κωδικοποιείτε επίσης το χαρακτηριστικό data-icon. Για παράδειγμα, το τρίτο κουμπί σε αυτό το παράδειγμα χρησιμοποιεί το εικονίδιο "διαγραφή" και το τέταρτο κουμπί χρησιμοποιεί το εικονίδιο "αρχική". Όλα αυτά τα εικονίδια μοιάζουν με τα εικονίδια που μπορεί να δείτε σε μια εγγενή εφαρμογή για κινητά. Παρεμπιπτόντως, αυτά τα εικονίδια δεν είναι ξεχωριστά αρχεία στα οποία πρέπει να έχει πρόσβαση η σελίδα. Αντ 'αυτού, παρέχονται από τη βιβλιοθήκη jQuery Mobile.

Εάν θέλετε να ομαδοποιήσετε δύο ή περισσότερα κουμπιά οριζόντια, όπως τα κουμπιά Ναι, Όχι και Ίσως σε αυτό το σχήμα, μπορείτε να κωδικοποιήσετε τα στοιχεία a> για τα κουμπιά μέσα σε ένα στοιχείο div που έχει το "controlgroup" ως χαρακτηριστικό ρόλου δεδομένων και "Οριζόντιο" ως χαρακτηριστικό τύπου δεδομένων. Εναλλακτικά, για να ομαδοποιήσετε τα κουμπιά κάθετα, μπορείτε να αλλάξετε το χαρακτηριστικό τύπου δεδομένων σε "κάθετο".

Εάν ορίσετε το χαρακτηριστικό data-rel για ένα κουμπί στο "πίσω" και το χαρακτηριστικό href στο σύμβολο λίρας (#), το κουμπί θα επιστρέψει στη σελίδα που το κάλεσε. Με άλλα λόγια, το κουμπί λειτουργεί σαν κουμπί Πίσω. Αυτό φαίνεται από το τελευταίο κουμπί στο περιεχόμενο της σελίδας.

Τα δύο τελευταία κουμπιά δείχνουν πώς εμφανίζονται τα κουμπιά στο υποσέλιδο μιας σελίδας. Εδώ, τα εικονίδια και το κείμενο είναι λευκά σε μαύρο φόντο. Σε αυτήν την περίπτωση, το χαρακτηριστικό class για το υποσέλιδο έχει οριστεί σε "ui-bar", το οποίο λέει στο jQuery Mobile ότι πρέπει να τοποθετήσει λίγο περισσότερο χώρο γύρω από τα περιεχόμενα του υποσέλιδου. Θα μάθετε περισσότερα για αυτό στο σχήμα 15-12.

Το HTML για τα κουμπιά στην ενότητα:

! - Για ενσωματωμένα κουμπιά, ορίστε το χαρακτηριστικό γραμμής δεδομένων σε true -> a href = "#" data-role = "button" data-inline = "true"> Ακύρωση / a> a href = "#" δεδομένα -role = "button" data-inline = "true"> OK / a>! - Για να προσθέσετε ένα εικονίδιο σε ένα κουμπί, χρησιμοποιήστε το χαρακτηριστικό data-icon -> a href = "#" data-role = "κουμπί "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Για να ομαδοποιήσετε τα κουμπιά, χρησιμοποιήστε ένα στοιχείο div με τα χαρακτηριστικά που ακολουθούν -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Ναι / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Όχι / a> a href = "#" data-role = "κουμπί"> Ίσως / a> / div>! - Για κωδικοποιήστε ένα κουμπί Πίσω, ορίστε το χαρακτηριστικό data-rel σε back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Επιστροφή στην προηγούμενη σελίδα / a >

Το HTML για τα κουμπιά στο υποσέλιδο:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Προσθήκη στο Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet σε αυτήν τη σελίδα / a> / footer>

Περιγραφή

• Για να προσθέσετε ένα κουμπί σε μια ιστοσελίδα, κωδικοποιείτε ένα στοιχείο> με το χαρακτηριστικό του ρόλου δεδομένων που έχει οριστεί σε "κουμπί".

Πώς να δημιουργήσετε μια γραμμή πλοήγησης

Το σχήμα 15-10 δείχνει πώς μπορείτε να προσθέσετε μια γραμμή πλοήγησης σε μια ιστοσελίδα. Για να το κάνετε αυτό, κωδικοποιείτε ένα στοιχείο div με το ρόλο δεδομένων που έχει οριστεί σε "navbar". Μέσα σε αυτό το στοιχείο, κωδικοποιείτε ένα στοιχείο ul που περιέχει στοιχεία li που περιέχουν τα στοιχεία> για τα στοιχεία στη γραμμή πλοήγησης. Σημειώστε, ωστόσο, ότι δεν κωδικοποιείτε το χαρακτηριστικό data-role για τα στοιχεία>.

Για να αλλάξετε το χρώμα για τα στοιχεία στη γραμμή πλοήγησης, ο κώδικας σε αυτό το παράδειγμα περιλαμβάνει το χαρακτηριστικό data-theme-b για κάθε στοιχείο. Ως αποτέλεσμα, το jQuery Mobile αλλάζει το χρώμα φόντου κάθε στοιχείου από μαύρο, το οποίο είναι το προεπιλεγμένο, σε ελκυστικό μπλε. Επιπλέον, αυτός ο κώδικας ορίζει το χαρακτηριστικό κλάσης για το ενεργό κουμπί σε "ui-btn-active", ώστε το jQuery Mobile να αλλάξει το χρώμα για το ενεργό κουμπί σε ανοιχτό μπλε. Αυτό δείχνει πώς μπορείτε να αλλάξετε τη μορφοποίηση που χρησιμοποιείται από το jQuery Mobile και θα μάθετε περισσότερα σχετικά με αυτό στη συνέχεια.

Το HTML για τη γραμμή πλοήγησης:

header data-role = "header"> h1> SJV Δημαρχείο / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "β "> Αρχική / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" b "> Ηχεία / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Επικοινωνήστε μαζί μας / a> / li> / ul> / div> / header>

Πώς να κωδικοποιήσετε το HTML για μια γραμμή πλοήγησης:

• Κωδικοποιήστε ένα στοιχείο div στο στοιχείο κεφαλίδας. Στη συνέχεια, ορίστε το χαρακτηριστικό data-role για το στοιχείο div σε «navbar».
• Εντός του στοιχείου div, κωδικοποιήστε ένα στοιχείο ul που περιέχει ένα στοιχείο li για κάθε σύνδεσμο.
• Σε κάθε στοιχείο li, κωδικοποιήστε ένα στοιχείο> με ένα χαρακτηριστικό href που χρησιμοποιεί ένα σύμβολο κράτησης θέσης για τη σελίδα στην οποία πρέπει να μεταβεί ο σύνδεσμος. Στη συνέχεια, ορίστε το χαρακτηριστικό data-icon στο εικονίδιο της επιλογής σας.
• Για το ενεργό στοιχείο στη γραμμή πλοήγησης, ορίστε το χαρακτηριστικό class σε "ui-btn-active".Στη συνέχεια, το χρώμα αυτού του αντικειμένου θα είναι ελαφρύτερο από τα άλλα στοιχεία στη γραμμή πλοήγησης.
• Θα πρέπει επίσης να χρησιμοποιήσετε το χαρακτηριστικό θέμα δεδομένων για να εφαρμόσετε ένα θέμα jQuery Mobile σε κάθε στοιχείο στη γραμμή πλοήγησης. Διαφορετικά, τα κουμπιά στη γραμμή θα έχουν το ίδιο χρώμα με την υπόλοιπη κεφαλίδα. Για να μάθετε περισσότερα σχετικά με την εφαρμογή θεμάτων, δείτε το σχήμα 15-12.

Πώς να μορφοποιήσετε περιεχόμενο με το jQuery Mobile

Όπως έχετε ήδη δει, το jQuery Mobile διαμορφώνει αυτόματα τα στοιχεία μιας ιστοσελίδας με βάση το δικό του φύλλο στυλ. Τώρα, θα μάθετε περισσότερα σχετικά με αυτό, καθώς και πώς να προσαρμόσετε το προεπιλεγμένο στυλ που χρησιμοποιεί το jQuery Mobile.

Τα προεπιλεγμένα στυλ που χρησιμοποιεί το jQuery Mobile

Το σχήμα 15-13 δείχνει τα προεπιλεγμένα στυλ που χρησιμοποιεί το jQuery Mobile για κοινά στοιχεία HTML. Για όλα τα στυλ του, το jQuery Mobile βασίζεται στη μηχανή απόδοσης του προγράμματος περιήγησης, έτσι το δικό του στυλ είναι ελάχιστο. Αυτό διατηρεί τους χρόνους φόρτωσης γρήγορα και ελαχιστοποιεί τα γενικά έξοδα που θα επέβαλε υπερβολική CSS σε μια σελίδα.

Όπως μπορείτε να δείτε, το στυλ του jQuery Mobile είναι τόσο αποτελεσματικό που δεν χρειάζεται να τροποποιήσετε το στυλ του παρέχοντας το δικό σας φύλλο στυλ CSS. Για παράδειγμα, η απόσταση μεταξύ των στοιχείων στη λίστα χωρίς ταξινόμηση και η μορφοποίηση του πίνακα είναι και οι δύο αποδεκτές με τον τρόπο που είναι. Επίσης, ο μαύρος τύπος στο γκρι φόντο είναι συνεπής με τη μορφοποίηση για εγγενείς εφαρμογές για κινητά.

Περιγραφή

• Από προεπιλογή, το jQuery Mobile εφαρμόζει αυτόματα στυλ στα στοιχεία HTML για μια σελίδα. Αυτά τα στυλ δεν είναι μόνο ελκυστικά, αλλά μιμούνται και τα εγγενή στυλ ενός προγράμματος περιήγησης.
• Από προεπιλογή, το jQuery Mobile εφαρμόζει μια μικρή ποσότητα γεμίσματος προς τα αριστερά, δεξιά, πάνω και κάτω από κάθε σελίδα για κινητά.
• Από προεπιλογή, οι σύνδεσμοι είναι ελαφρώς μεγαλύτεροι από το κανονικό κείμενο. Αυτό διευκολύνει τον χρήστη να αγγίξει τους συνδέσμους.
• Από προεπιλογή, οι σύνδεσμοι είναι υπογραμμισμένοι με μπλε χρώμα ως γραμματοσειρά.

Πώς να εφαρμόσετε θέματα σε στοιχεία HTML

Σε ορισμένες περιπτώσεις, θα θελήσετε να αλλάξετε τα προεπιλεγμένα στυλ που χρησιμοποιεί το jQuery Mobile. Το έχετε ήδη δει στη γραμμή πλοήγησης του σχήματος 15-10. Για να αλλάξετε τα προεπιλεγμένα στυλ, μπορείτε να χρησιμοποιήσετε τα πέντε θέματα που παρέχει το jQuery Mobile. Αυτά συνοψίζονται στο σχήμα 15-12. Και εδώ, αυτά τα θέματα προορίζονται να μιμηθούν την εμφάνιση μιας εγγενούς εφαρμογής για κινητά.

Ένας τρόπος για να εφαρμόσετε θέματα είναι να κωδικοποιήσετε ένα χαρακτηριστικό θέμα δεδομένων με το γράμμα θέματος ως αξία του. Το είδατε στη γραμμή πλοήγησης στο σχήμα 15-10 και μπορείτε να το δείτε στον κώδικα για τη δεύτερη γραμμή πλοήγησης σε αυτό το σχήμα. Εδώ, το χαρακτηριστικό data-theme εφαρμόζει το θέμα "e" στην κεφαλίδα και το θέμα "d" στα στοιχεία στη γραμμή πλοήγησης.

Ο άλλος τρόπος για να εφαρμόσετε θέματα είναι να ορίσετε το χαρακτηριστικό κλάσης για ένα στοιχείο σε ένα όνομα κλάσης που υποδεικνύει ένα θέμα. Αυτό φαίνεται από το πρώτο παράδειγμα μετά τον πίνακα. Εδώ, το χαρακτηριστικό class χρησιμοποιείται για την εφαρμογή των κλάσεων "ui-bar" και "ui-bar-b" στο στοιχείο div. Ως αποτέλεσμα, το jQuery Mobile εφαρμόζει πρώτα το προεπιλεγμένο στυλ του για μια γραμμή στο στοιχείο και στη συνέχεια εφαρμόζει το θέμα b σε αυτό το στυλ. Στις σελίδες που ακολουθούν, θα δείτε άλλα παραδείγματα αυτού του τύπου στυλ.

Λάβετε υπόψη ότι ο πίνακας σε αυτό το σχήμα λέει ότι χρησιμοποιεί το θέμα ε με φειδώ. Αυτό συμβαίνει επειδή χρησιμοποιεί ένα πορτοκαλί χρώμα που λειτουργεί εντάξει για τονισμό ενός αντικειμένου, αλλά δεν είναι ελκυστικό σε μεγάλες δόσεις. Αυτό απεικονίζεται από τη δεύτερη κεφαλίδα και τη γραμμή πλοήγησης σε αυτό το σχήμα, η οποία τείνει να τσαλακώνει όταν τη βλέπετε στο χρώμα.

Σε γενικές γραμμές, είναι καλύτερο να μείνετε με τα προεπιλεγμένα στυλ και τα τρία πρώτα θέματα, τα οποία συνήθως λειτουργούν καλά μαζί. Στη συνέχεια, μπορείτε να πειραματιστείτε με θέματα d και e όταν νομίζετε ότι χρειάζεστε κάτι περισσότερο.

Το HTML για τη δεύτερη κεφαλίδα και γραμμή πλοήγησης:

header data-role = "header" data-theme = "e"> h1> Δημαρχείο SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "σπίτι "data-theme =" d "> Σπίτι / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" d "> Ηχεία / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Ειδήσεις / a> / li> / ul> / div> / header>

Τα πέντε θέματα jQuery Mobile:

Δύο τρόποι εφαρμογής ενός θέματος:

Χρησιμοποιώντας ένα χαρακτηριστικό θέμα δεδομένων:

li> a href = "# home" data-icon = "home" data-theme = "b"> Σπίτι / a> / li>

Χρησιμοποιώντας ένα χαρακτηριστικό κλάσης που δείχνει το θέμα:

div> Bar / div>

Περιγραφή

• Χρησιμοποιώντας τα πέντε θέματα που περιλαμβάνονται στο jQuery Mobile, μπορείτε να κάνετε τις κατάλληλες προσαρμογές στα προεπιλεγμένα στυλ για τα στοιχεία HTML.
• Παρόλο που μπορείτε να χρησιμοποιήσετε το δικό σας φύλλο στυλ CSS με μια εφαρμογή jQuery Mobile, θα πρέπει να αποφύγετε να το κάνετε όποτε είναι δυνατόν.

Προοπτική

Η χρήση κινητών συσκευών έχει αυξηθεί δραματικά τα τελευταία χρόνια. Εξαιτίας αυτού, έχει γίνει όλο και πιο σημαντικό να σχεδιάζουμε ιστότοπους που είναι εύχρηστοι από αυτές τις συσκευές. Αν και αυτό συνήθως σημαίνει ανάπτυξη ξεχωριστού ιστότοπου, αυτό μπορεί να είναι μια κρίσιμη πτυχή της διατήρησης της παρουσίας σας στο Διαδίκτυο.

Ευτυχώς, το έργο της δημιουργίας ενός ιστότοπου για κινητά έγινε πολύ πιο εύκολο με την έλευση του jQuery Mobile. Οι ιστοσελίδες για κινητά δεν περιορίζονται πλέον σε στατικές σελίδες που περιέχουν επικεφαλίδες, παραγράφους, συνδέσμους και εικόνες μικρογραφιών. Με το jQuery Mobile, οι προγραμματιστές ιστού μπορούν πλέον να δημιουργήσουν ιστότοπους πλούσιους σε χαρακτηριστικά που μοιάζουν και μοιάζουν με εγγενείς εφαρμογές για κινητά.