Σχεδιασμός εφαρμογών για κινητά / Οδηγός αρχαρίων για το jQuery Mobile

Τα τελευταία 2-3 χρόνια έχουμε δει μια τεράστια αύξηση στην υποστήριξη περιηγητών και λειτουργικών συστημάτων για κινητές ιστοσελίδες. Πιο συγκεκριμένα, οι iOS της Apple και οι πλατφόρμες Android της Google έρχονται στο μυαλό. Αλλά άλλοι όπως PalmOS και Blackberry είναι ακόμα στο μίγμα. Μέχρι πρόσφατα ήταν πολύ δύσκολο να ταιριάζει σε ένα μόνο κινητό θέμα σε όλες αυτές τις πλατφόρμες.

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

Χαρακτηριστικά και υποστήριξη OS

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

Η υποστήριξη ποικίλλει μεταξύ των τηλεφώνων και χωρίζεται σε ένα γράφημα 3 κατηγοριών από το A-C. Το A είναι το κορυφαίο επίπεδο που διαθέτει την πλήρη υποστήριξη του jQuery Mobile, το B έχει τα πάντα, εκτός από τον Ajax, ενώ το C είναι βασικό HTML με ελάχιστη ή μη JavaScript. Ευτυχώς τα περισσότερα από τα δημοφιλή λειτουργικά συστήματα υποστηρίζονται πλήρως - πρόσθεσα έναν κατάλογο παρακάτω μόνο μερικά παραδείγματα.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

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

Το πρότυπο πρότυπο HTML

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

Τα μόνα ξένα στοιχεία εδώ πρέπει να είναι τα δύο meta tags. Η κορυφή θέα ετικέτα ενημερώνει τα κινητά προγράμματα περιήγησης για να χρησιμοποιήσει ένα πλήρες αποτέλεσμα ζουμ. Ρύθμιση της τιμής width = πλάτος συσκευής θα καθορίσει το πλάτος της σελίδας ακριβώς στο πλάτος της οθόνης του τηλεφώνου. Και το καλύτερο απ 'όλα δεν απενεργοποιεί τις λειτουργίες ζουμ, αφού το jQuery Mobile μπορεί να προσαρμοστεί στις μετατοπίσεις.

Η επόμενη μετα-ετικέτα Συμβατό με X-UA απλά αναγκάζει τον Internet Explorer να καταστήσει την HTML την πιο πρόσφατη επανάληψη. Τα παλαιότερα προγράμματα περιήγησης και ειδικά τα κινητά θα προσπαθήσουν να ξεφύγουν από άγνωστα σφάλματα αποδόσεων.

Κατασκευή του περιεχομένου του σώματος

Τώρα αυτό είναι όπου jQuery κινητό μπορεί να πάρει δύσκολο. Κάθε σελίδα HTML δεν είναι απαραίτητα 1 σελίδα στον ιστότοπο του κινητού. Το πλαίσιο χρησιμοποιεί τα χαρακτηριστικά δεδομένων HTML5, τα οποία μπορείτε να δημιουργήσετε σε μια ιδιοτροπία με την προσθήκη δεδομένα- Εκ των προτέρων. Με παρόμοιο τρόπο data-role = "σελίδα" μπορεί να οριστεί σε πολλαπλά divs σε ένα μόνο αρχείο HTML, δίνοντάς σας περισσότερες από μία σελίδες.

Στη συνέχεια θα μετακινηθείτε μεταξύ αυτών των σελίδων με συνδέσεις αγκύρωσης και ένα μοναδικό αναγνωριστικό. Αυτή η ρύθμιση είναι μια καλή ιδέα για βασικές, απλές εφαρμογές. Αν χρειάζεστε μόνο 3-5 σελίδες, τότε γιατί να μην το αποθηκεύσετε σε ένα μόνο αρχείο; Εκτός αν έχετε πολύ γραπτό περιεχόμενο, οπότε δοκιμάστε να χρησιμοποιήσετε την PHP περιλαμβάνει για να εξοικονομήσετε χρόνο.

Ελέγξτε το παρακάτω παράδειγμα κώδικα εάν χάσετε.

 
 
 
Κορυφαία γραμμή τίτλου
 
 
 
Εμφάνιση άλλης σελίδας??
 
υπαινιγμός: κάντε κλικ στο παρακάτω κουμπί!
 
Σχετικά με εμάς
 
  
 
 
 
Εδώ
 
 
 
μερικά επιπλέον περιεχόμενο επίσης.
 
Θέλω να πω, μπορείτε Πήγαινε πίσω οποιαδήποτε στιγμή.
 
 
   

Ρίξτε μια ματιά στο σύνδεσμο αγκύρωσης από τη σελίδα ευρετηρίου για μια στιγμή. Παρατηρήστε ότι προσθέσαμε το χαρακτηριστικό δεδομένα-ρόλο = "κουμπί" για να ρυθμίσετε τη σύνδεση ως κουμπί. Αλλά αντί να χρησιμοποιήσουμε τα προεπιλεγμένα στυλ που συμπεριλαμβάνουμε δεδομένα-θέμα = "c". Αυτό μετατρέπει μεταξύ 1 από 5 (θέματα a-e) πρότυπα που έρχονται συσκευασμένα από προεπιλογή ως στυλ CSS μέσα στο jQ Mobile.

Το κουμπί μου καλύπτει ολόκληρο το πλάτος της σελίδας. Για να καταργήσετε τη συμπεριφορά, πρέπει να ρυθμίσουμε το στοιχείο από το μπλοκ στην ενσωματωμένη εμφάνιση. Το χαρακτηριστικό για αυτό είναι δεδομένα-inline = "true" που θα μπορούσατε να προσαρτήσετε σε οποιοδήποτε κουμπί αγκύρωσης.

Κεφαλίδες και υποσέλιδα

Κατά μήκος της κορυφής και του κάτω μέρους των εφαρμογών σας θα πρέπει να προσθέσετε περιεχόμενο κεφαλίδας και υποσέλιδου. Αυτό το στυλ σχεδίασης συχνά αποδίδεται με εφαρμογές iOS που έγιναν δημοφιλείς χρησιμοποιώντας το κινητό App Store της Apple. Το jQ Mobile χρησιμοποιεί χαρακτηριστικά του ρόλου δεδομένων για τον καθορισμό της κεφαλίδας, του υποσέλιδου και του περιεχομένου της σελίδας. Ας ρίξουμε μια σύντομη ματιά σε αυτές τις περιοχές.

Κορυφαία κουμπιά μπαρ

Από προεπιλογή, η κορυφαία γραμμή υποστηρίζει ένα σύνολο δύο (2) συνδέσεων με παρόμοιο τρόπο με άλλες εφαρμογές για κινητά. Το iOS χρησιμοποιεί προεπιλογή για χρήση του “πίσω” κουμπί προς τα αριστερά και συχνά ένα “επιλογές” ή “config” στα δεξιά.

 
 Ρυθμίσεις 
Εδώ
 
 

Ο παραπάνω κώδικας εστιάζει απλώς στο δοχείο div για τη σελίδα μας μαζί με το περιεχόμενο κεφαλίδας. Το πρόσθετο χαρακτηριστικό HTML δεδομένα-add-back-btn = "true" θα λειτουργήσει μόνο όταν προστεθεί σε έναν ρόλο δεδομένων σελίδας. Ο σκοπός είναι να συμπεριλάβετε αυτόματα ένα κουμπί πίσω που λειτουργεί παρόμοια με το κουμπί επιστροφής του προγράμματος περιήγησης.

Θα μπορούσαμε να προσθέσουμε ένα κουμπί πίσω με το χέρι με παρόμοιο κώδικα με αυτόν που χρησιμοποιήσαμε στην περιοχή περιεχομένου. Αλλά αισθάνομαι ότι αυτό χρειάζεται πολύ περισσότερο για να ρυθμίσετε ειδικά σε πολλές σελίδες. Όλοι οι σύνδεσμοι αγκύρωσης στην ενότητα κεφαλίδας θα προεπιλεγούν στις θέσεις του αριστερού / δεξιού κουμπιού. Με τη χρήση class = "ui-btn-right" αυτό επανατοποθετούσε το κουμπί "Ρυθμίσεις", ώστε να υπάρχει ελεύθερος χώρος για το κουμπί "πίσω". Επίσης, χρησιμοποιώ τα δευτερεύοντα στυλ θεμάτων για να τα δώσω κάποια επιπλέον περιποίηση!

Πλοήγηση υποσέλιδου

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

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

• Προεπισκόπηση ζωντανής επίδειξης

Οπότε εδώ υπάρχει κάποιος κώδικας υποσέλιδου για την ενότητα σχετικά με τη σελίδα. δεδομένα-ρόλο = "navbar" θα πρέπει να προστεθεί στο στοιχείο δοχείου που περιέχει ένα μη ταξινομημένο κατάλογο και όχι το ίδιο το στοιχείο UL. Κάθε σύνδεσμος μέσα στη λίστα αντιμετωπίζεται ως γραμμή καρτελών, το οποίο στη συνέχεια κατανέμεται εξίσου με βάση τον συνολικό αριθμό συνδέσμων. Η πρόσθετη κατηγορία των ui-σώμα-β απλά προσθέτει αισθητικά εφέ καθώς αλλάζουμε μεταξύ των ελάχιστων διαθέσιμων στυλ.

Αν παρατηρήσετε στο πρώτο κουμπί, έχω το χαρακτηριστικό κατεύθυνση δεδομένων = "αντίστροφη". Παρόλο που θα μπορούσα να χρησιμοποιήσω την ρύθμιση του κουμπιού επιστροφής ως πριν για να επιστρέψω στην αρχική σελίδα, έχω χρησιμοποιήσει το αναγνωριστικό σελίδας του #δείκτης. Από προεπιλογή, το παράθυρο της εφαρμογής θα μεταβαίνει προς τα δεξιά, το οποίο φαίνεται αρκετά κολλώδες, καθώς αναμένετε ότι η κινούμενη εικόνα θα μετακινηθεί προς τα πίσω. Μπορείτε να παίξετε με ακόμα περισσότερα από αυτά τα κινούμενα εφέ αν έχετε χρόνο. Ελέγξτε τη σελίδα πληροφοριών μεταβάσεων στην τεκμηρίωση του jQuery.

Ajax & δυναμικές σελίδες

Το πρώτο τμήμα άνοιξε πραγματικά τα βασικά σημεία για την κατασκευή μιας εφαρμογής για κινητά με jQuery. Αλλά θέλω να ξεκινήσω μια νέα εφαρμογή που φορτώνει δεδομένα από μια εξωτερική σελίδα. Θα χρησιμοποιήσω ένα πολύ απλό script PHP για να επιτύχω το $ _REQUEST [] μεταβλητή και να εμφανίσει μια μικρή Dribbble shot αντίστοιχα. Η παρακάτω προβολή οθόνης θα σας δώσει μια ιδέα για το τι πρόκειται να οικοδομήσουμε.

Πρώτα θα ορίσω μια σελίδα index.html στο προεπιλεγμένο πρότυπο. Για αυτήν την αρχική οθόνη, χρησιμοποιώ μια ρύθμιση προβολής λίστας για την εμφάνιση κάθε συνδέσμου με σειρά. Αυτό γίνεται στην περιοχή περιεχομένου με α data-role = "προβολή λίστας" χαρακτηριστικό στο δοχείο της λίστας. Κλείνοντας το ίδιο περιεχόμενο κεφαλίδας όπως πριν, έχω προσθέσει όλο τον κώδικα μου από αυτή τη νέα σελίδα ευρετηρίου παρακάτω.

 
 
 
Οκτώβριος 2011 Shots
 
 
 
 
Πρώτη εικόνα
 
Δεύτερη εικόνα
 
Τρίτη εικόνα
 
Τέταρτη εικόνα
 
 
  
   

Κάθε ένας από τους συνδέσμους αγκύρωσης στη λίστα λίστας μου δείχνει το ίδιο αρχείο - index.php. Αλλά περνάμε στην παράμετρο imgid ως μεταβλητή αιτήματος. Στο αρχείο image.php παίρνουμε το ID και το δοκιμάζουμε με 4 προκαθορισμένες τιμές. Αν συμβαδίζουμε, χρησιμοποιούμε την αντίστοιχη διεύθυνση URL και τον τίτλο της εικόνας, διαφορετικά προβάλλουμε απλώς μια προκαθορισμένη λήψη Dribbble.

Σενάριο φορτωτή εικόνας

Η δέσμη ενεργειών image.php εξακολουθεί να έχει προστεθεί στο κώδικα το προεπιλεγμένο πρότυπο κινητού jQuery. Στην πραγματικότητα μοιράζεται μια πολύ παρόμοια κεφαλίδα και υποσέλιδο, εκτός από την προσθήκη του χαρακτηριστικού back link δεδομένα-add-back-btn = "true". Παρατηρήστε ότι αυτό το κουμπί θα εμφανιστεί μόνο αν προέρχεται πρώτα από το index.html! Δοκιμάστε να φορτώσετε απευθείας το image.php και τίποτα δεν θα εμφανιστεί αφού δεν υπάρχει “πίσω” να προχωρήσουμε.

Νομίζω ότι μπορούμε να κάνουμε λίγο περισσότερη αίσθηση του κώδικα εξετάζοντας πρώτα τη λογική της PHP. Χρησιμοποιούμε α διακόπτης / / υπόθεση για να ελέγξετε τα 4 διαφορετικά αναγνωριστικά και να δώσετε έναν τίτλο κεφαλίδας, μια διεύθυνση URL εικόνας και έναν αρχικό σύνδεσμο προέλευσης καλλιτέχνη.

Όλα φαίνονται αρκετά απλά - ακόμη και ένας αρχάριος PHP dev θα πρέπει να είναι σε θέση να ακολουθήσει μαζί! Και αν δεν καταλαβαίνετε ότι δεν είναι σημαντικό για τον κώδικα jQuery ούτως ή άλλως, έτσι μην ανησυχείτε. Θα πρέπει να αλλάξουμε τώρα και να ρίξουμε μια ματιά στο πρότυπο που έχω δημιουργήσει σε αυτή τη νέα σελίδα. Όλος ο κώδικας HTML προστίθεται μετά από ολόκληρο το μπλοκ PHP παραπάνω. Χρησιμοποίησα την ταυτότητα του “εικόνες” για το δοχείο και ακόμη και να ρυθμίσετε την κεφαλίδα να αλλάξει με κάθε νέα φωτογραφία.

 
 
 
 
 
 Προβολή του πρωτοτύπου
 
 
  
 

Μπορείτε να δείτε πόσο απλοϊκό είναι αυτό το demo. Αλλά ολόκληρος ο σκοπός είναι να αποδείξει την επεκτασιμότητα του κινητού jQuery. Η PHP μπορεί εύκολα να προστεθεί στο μίγμα και μπορείτε να φτιάξετε μερικά πολύ τακτοποιημένες εφαρμογές με λίγες μόνο ώρες ανάπτυξης.

Φανταστικό σχέδιο με μικρογραφίες λίστας

Ένα τελευταίο πρόσθετο αποτέλεσμα που μπορούμε να εφαρμόσουμε είναι η χρήση μικρογραφιών για να ζωντανέψει τη σελίδα καταχώρισης. Επίσης, θα διαιρέσω το κείμενο σε ένα πλαίσιο τίτλου και περιγραφής για να εμφανίσω τόσο τον τίτλο του έργου όσο και το όνομα του καλλιτέχνη.

Για να ξεκινήσετε να ανοίξετε το Photoshop και να δημιουργήσετε ένα έγγραφο 80 × 80 px. Πάω να αλλάξετε γρήγορα το μέγεθος κάθε εικόνας και να αποθηκεύσετε τις μικρογραφίες για να ταιριάξετε το καθένα. Στη συνέχεια, η ενημέρωση των στοιχείων προβολής λίστας θα πρέπει να περιλαμβάνει μερικά ακόμη στοιχεία.

Ελέγξτε τον παρακάτω κώδικα και το παράδειγμα demo μου για να δείτε τι εννοώ.

[Προεπισκόπηση ζωντανής επίδειξης]

 
 
  
Wunderkit εργασίες
 
από τον Sebastian Scheerer
 
  
Εργαζόμενος
 
από τον Σκοτ ​​Χιλ
 
  
Εφαρμογή φόρουμ για το Facebook
 
από τον Ionut Zamfir
 
  
Κελάδημα
 
από τον Sam Jones
 
 
 

Οι τάξεις για ui-li-heading και ui-li-desc προστίθενται στο προεπιλεγμένο φύλλο στυλ του jQuery. Αυτό είναι παρόμοιο με την κατηγορία εικόνων ui-li-thumb οι οποίες αναπροσαρμόζουν αυτόματα κάθε γραμμή προβολής λίστας ανάλογα με το ύψος της εικόνας. Τώρα από εδώ θα μπορούσατε να χτίσετε περισσότερα στο πρόχειρο με κινούμενα σχέδια, εφέ σελίδας, φύλλα στυλ, κλπ.

Ή εναλλακτικά θα μπορούσατε να ξεκινήσετε την κατασκευή ενός συστήματος backend για να ανεβάσετε νέες εικόνες και να κόψετε αυτόματα τις μικρογραφίες για να τις συμπεριλάβετε στη λίστα. Υπάρχει τόσο μεγάλη ευελιξία με το jQuery Mobile που σχεδόν δεν μπορείτε να το χαρακτηρίσετε μόνο ως βιβλιοθήκη JavaScript. Είναι περισσότερο ένα ολόκληρο πλαίσιο HTML5 / CSS / jQuery για την κατασκευή γρήγορων και επεκτάσιμων εφαρμογών για κινητά.

συμπέρασμα

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

Όμως, καθώς οι μήνες προχωρούν οι προγραμματιστές ιστοσελίδων είναι βέβαιο ότι θα πάρουν την τάση. Οι κινητές εφαρμογές και ακόμη και οι διατάξεις κινητής διαδικτύου αυξάνονται σε δημοτικότητα με την τεράστια αύξηση των smartphones. Οι προγραμματιστές ιστού δεν έχουν το χρόνο να μάθουν μια πλήρη γλώσσα προγραμματισμού για την κατασκευή εφαρμογών Android / iOS. Έτσι, το jQuery Mobile είναι μια λεπτή εναλλακτική λύση που περιλαμβάνει υποστήριξη για την πλειοψηφία του λογισμικού της βιομηχανίας κινητής τηλεφωνίας και συνεχίζει να αυξάνεται καθημερινά με μια ενεργή κοινότητα προγραμματιστών.