Κατασκευάστε ένα κινητό ιστοσελίδα με jQuery Mobile

jQuery Mobile είναι μια αφής βελτιστοποιημένο, HTML5-based σύστημα διεπαφής χρήστη.Είναι χτισμένο στην πλατφόρμα jQuery και jQuery UI, και είναι ιδανικό για την ταχεία ανάπτυξη των κινητών.Το πλαίσιο jQuery Mobile χρησιμοποιεί ειδικά χαρακτηριστικά για να βοηθήσει να καθορίσει και το στυλ στοιχείων σας, χωρίς να χρειάζεται να γράψετε λεπτομερής τάξη τον εαυτό σας κανόνες.

1. 1
   Μεταβείτε στην αρχική σελίδα jQuery Mobile,, και στη συνέχεια κάντε κλικ στην καρτέλα "Λήψη" από το κεντρικό μενού πλοήγησης.

   Διαφήμιση

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
2. 2
   Μετακινηθείτε προς τα κάτω στη σελίδα Λήψη μέχρι να δείτε ένα Αντιγραφή-και-επικόλληση αποσπασμάτων για CDN-φιλοξενείται αρχεία ενότητα .

   instagram viewer

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

   Διαφήμιση

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
3. 3
   Open προτιμάται ανάπτυξης λογισμικού σας και να δημιουργήσετε ένα νέο έγγραφο HTML.

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

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
4. 4
   Προσθέστε τις αναφορές στο έγγραφο HTML σας.

   Μέσα ετικέτες κεφάλι σας, επικολλήστε τα CDN-φιλοξενείται συνδέσεις αρχείων.

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
5. 5
   Δημιουργήστε την πρώτη σας "σελίδα" .

   Με το πλαίσιο jQuery Mobile, μπορείτε να δημιουργήσετε πολλές σελίδες μέσα στο ίδιο έγγραφο HTML.Μέσα στις ετικέτες body , δημιουργούν ένα δοχείο div.Προσθέστε το χαρακτηριστικό δεδομένων ρόλο, και να την αντιστοιχίσετε μια τιμή των σελίδας .Τέλος, προσθέστε το χαρακτηριστικό ID , και να την αντιστοιχίσετε μια τιμή των σπίτι .

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
6. 6
   Προσθέστε το κεφαλίδα , περιεχόμενο και footer δοχεία div .

   Εσωτερική σελίδα δοχείο div σας, να δημιουργήσετε τρεις περισσότερες ετικέτες div.Χρησιμοποιώντας τα δεδομένα, ο ρόλος χαρακτηριστικό , εκχωρήσετε τιμές των κεφαλίδα , περιεχόμενο και υποσέλιδο αντίστοιχα.Αυτή είναι η βασική δομή μιας σελίδας jQuery Mobile.

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
7. 7
   Προσθήκη κεφαλίδας και υποσέλιδου τίτλους .

   Χρησιμοποιώντας το h1 τίτλο ετικέτα, δημιουργήστε τίτλο τίτλους για κεφαλίδα και υποσέλιδο ετικέτες σας.

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
8. 8
   Δημιουργήστε μια δεύτερη σελίδα .

   Έξω από το δοχείο div που έχει δεδομένων ρόλο χαρακτηριστικό του που στη σελίδα, να δημιουργήσετε ένα νέο δοχείο div.Προσθέστε τα δεδομένα, ο ρόλος χαρακτηριστικό , και στη συνέχεια να οριστεί σε σελίδα.Προσθέστε το χαρακτηριστικό ID , και στη συνέχεια να το ρυθμίσετε στη σελίδα 2. Τέλος, προσθέστε δοχεία div για την κεφαλίδα, το περιεχόμενο και υποσέλιδο, ώστε η δομή του μοιάζει με το αρχική σελίδα.

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
9. 9
   Δημιουργήστε μια σελίδα του μενού.

   Η σελίδα του μενού πρόκειται να δημιουργηθεί με τον ίδιο τρόπο όπως οι δύο πρώτες σελίδες, αλλά χωρίς ένα υποσέλιδο.Δημιουργήστε ένα δοχείο div, και που δεδομένων ρόλο χαρακτηριστικό της στη σελίδα.Προσθέστε το χαρακτηριστικό ID , και να του δώσετε μια τιμή main_nav.

   Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
10. 10
    Δημιουργήστε το δομή του μενού πλοήγησης.

    Μέσα στο περιεχόμενο του δοχείου div , δημιουργούν μια μη διατεταγμένη λίστα.Προσθέστε το χαρακτηριστικό δεδομένων ρόλο, και ορίστε την τιμή σε listview.Προσθέστε το χαρακτηριστικό δεδομένων ένθετο, και ορίστε την τιμή σε true.Μέσα στις ετικέτες ul για τη μη διατεταγμένη λίστα, προσθέστε δύο ετικέτες κατάλογος-στοιχείο( ετικέτες li).

    Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
11. 11
    Δημιουργήστε το μενού συνδέσεις.

    μέσα στο πρώτο ετικέτες κατάλογος-στοιχείο, δημιουργούν μια ετικέτα άγκυρα.Προσθέστε το χαρακτηριστικό href στην ετικέτα άγκυρα.Χρησιμοποιήστε το σύμβολο hashtag να στοχεύσετε ένα χαρακτηριστικό ID , και στη συνέχεια, πληκτρολογήστε "σπίτι".Αυτό στοχεύει το "σπίτι" εμπορευματοκιβώτιο div.Ακολουθήστε την ίδια διαδικασία για την δεύτερη λίστα, στοιχείο, αλλά αυτή τη φορά ο τύπος hashtag "σελίδα2» με στόχο τη δεύτερη σελίδα.

    Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
12. 12
    Προσθήκη συνδέσμων μενού για άλλες σελίδες .

    Τώρα που το μενού σας έχει δημιουργηθεί, θα χρειαστεί να ρυθμίσετε τις ετικέτες άγκυρα στο "σπίτι" σας και "σελίδα 2" σελίδες να έχουν πρόσβαση.Μετακινηθείτε προς τα πάνω και εντοπίστε την ενότητα κεφαλίδα της αρχική σελίδα σας.Προσθέστε μια ετικέτα άγκυρα μέσα στο δοχείο κεφαλίδα, ακριβώς πριν την ετικέτα h1 .Χρησιμοποιώντας την ίδια διαδικασία σύνδεσης όπως κάνατε με το μενού, ρυθμίστε το ιδιότητα href να hashtag "main_nav".Προσθέστε τα δεδομένα, ο ρόλος χαρακτηριστικό , και να του δώσετε μια τιμή του κουμπιού.Προσθέστε τα δεδομένα-icon χαρακτηριστικό , και να του δώσετε μια τιμή μπαρ.Τέλος, προσθέστε το χαρακτηριστικό δεδομένων iconpos, και να του δώσετε μια τιμή notext.Αυτό δημιουργεί ένα κουμπί στα αριστερά του τίτλου κεφαλίδα σας.Επαναλάβετε αυτό το βήμα για τη σελίδα σελίδα2.

    Ήταν χρήσιμες αυτό το βήμα;Ναι |Όχι |Χρειάζομαι βοήθεια
    Διαφήμιση

• δημιουργήσετε όσες σελίδες μέσα στο ίδιο έγγραφο HTML, όπως σας αρέσει.jQuery Mobile χρησιμοποιεί ένα σύστημα πλοήγησης AJAX που ξεκινά αυτόματα όταν δημιουργείτε πολλαπλές σελίδες μέσα στο ίδιο έγγραφο.
• Προσθέστε τα στοιχεία της μετάβασης χαρακτηριστικό με άγκυρες για ένα οπτικά κατευνασμού μετάβαση μεταξύ των σελίδων.Οι διαθέσιμες μεταβάσεις είναι ξεθωριάζει, ποπ, flip, τη σειρά του, τη ροή, slidefade, διαφάνεια, slideup και slidedown.
• Χρησιμοποιήστε το δεδομένων θέμα αποδίδουν το ύφος σχεδόν κάθε στοιχείο στο έργο σας.Από προεπιλογή, jQuery Mobile έρχεται με πέντε δείγματα χρώματος για να το χρησιμοποιήσετε.Το σύστημα θεματοποίηση χρησιμοποιεί γράμματα ως αξίες.Κατά συνέπεια, η δεδομένων θέμα χαρακτηριστικό δέχεται τιμές των α, β, γ, δ και ε, όταν το κατεβάσετε πρώτα.Ελέγξτε έξω το jQuery Mobile Themeroller για να δημιουργήσετε ένα προσαρμοσμένο θέμα, με έως και 26 διαφορετικά δείγματα χρωμάτων!
• Χρησιμοποιήστε το δεδομένων θέσης αποδίδουν τη δημιουργία «κολλώδες» ή σταθερό κεφαλίδες και υποσέλιδα για την ιστοσελίδα σας.Προσθέστε αυτό το χαρακτηριστικό σε ένα δοχείο div που έχει δεδομένων ρόλο σύνολο της στην κεφαλίδα ή το υποσέλιδο, και το δεδομένων θέσης αξίας σε σταθερά.
• Ελέγξτε έξω το jQuery Mobile Color Kit για να αρχίσει να αναπτύσσει με 26 διαφορετικά θεματικά δείγματα.

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

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Εάν έχετε προβλήματα με οποιοδήποτε από αυτά τα βήματα, να ζητήσει έναερώτηση για περισσότερη βοήθεια, ή μετά στα σχόλια παρακάτω.