Πίνακας περιεχομένων:
Βίντεο: Desarrollo de Extensiones para Chrome 02 - Configurar manifest.json de una Extension Chrome 2024
Υπάρχει μια πολύ δημοφιλής προσέγγιση μεταξύ των προγραμματιστών HTML5 και CSS3 για την οικοδόμηση φιλικών προς κινητά ιστότοπων με AJAX και αυτή είναι η χρήση πρόσθετης βιβλιοθήκης στο jQuery που ονομάζεται jQuery Mobile . Το Jquery Mobile είναι ένας ισχυρός συνδυασμός κώδικα JavaScript και CSS που είναι χτισμένος πάνω από τη βιβλιοθήκη.
Η βιβλιοθήκη jQuery λειτουργεί λαμβάνοντας μια κανονική σελίδα HTML5 και τροποποιώντας την με τρόπους που μιμούνται τη φυσική εμφάνιση και την αίσθηση. Ο κώδικας μοιάζει πολύ με το συνηθισμένο HTML:
Πρόκειται για μια συνηθισμένη λίσταΚωδικοποιημένη για να μοιάζει με
μια λίστα κινητών
- από
- Κινητό Demo
-
Πρόκειται για ένα ειδικό αρχείο CSS που έχει σχεδιαστεί για να μετατρέπει τα στοιχεία HTML στα αντίστοιχα κινητά τους. Παρόλο που μπορείτε να το κατεβάσετε μόνοι σας, οι περισσότεροι προγραμματιστές συνδέουν απευθείας την τοποθεσία jQuery.
Συμπεριλάβετε την τυπική βιβλιοθήκη jQuery.
-
Μεγάλο μέρος του κώδικα βασίζεται στο jQuery, ώστε να ενσωματώσει και τη βιβλιοθήκη jQuery. Για άλλη μια φορά, θα χρειαστεί να τραβήξετε το jQuery από τον κύριο ιστότοπο του jQuery.
-
Αυτή είναι μια βιβλιοθήκη JavaScript που επεκτείνει τη βιβλιοθήκη για να προσθέσει νέα συμπεριφορά για συγκεκριμένα κινητά.
Προσθέστε ένα χαρακτηριστικό δεδομένων-ρόλου = "σελίδα" στο κύριο div.
-
Δημιουργήστε ένα κύριο div στη σελίδα σας και δώστε το χαρακτηριστικό σε αυτό. Αυτό είναι ένα προσαρμοσμένο χαρακτηριστικό ρόλου δεδομένων που προστέθηκε από το jQuery mobile. Το jQuery εξετάζει τους ρόλους δεδομένων των διαφόρων στοιχείων και εφαρμόζει αυτόματα αλλαγές στυλ και συμπεριφοράς σε αυτά τα στοιχεία. Ορίστε την κύρια σελίδα σας διαλόγου ρόλου δεδομένων. Αυτό λέει στο πρόγραμμα περιήγησης να θεωρεί ολόκληρη τη σελίδα div ως σελίδα.
Καθορίστε ένα θέμα δεδομένων.
-
Μπορείτε να εφαρμόσετε ένα θέμα δεδομένων σε οποιοδήποτε στοιχείο, αλλά σχεδόν πάντα εφαρμόζετε ένα θέμα στη σελίδα. jquery κινητό έρχεται με μια σειρά προεπιλεγμένων θεμάτων ενσωματωθεί, ονομάζεται "a" μέσω "e. "Πειραματιστείτε για να βρείτε αυτό που σας αρέσει ή μπορείτε να δημιουργήσετε το δικό σας με την ειδική έκδοση κινητού του ThemeRoller.
Προσθέστε περισσότερα div στο εσωτερικό της σελίδας σας.
-
Προσθέστε μερικά ακόμα divs στη σελίδα σας div. Γενικά, θα έχετε τρία: κεφαλίδα, περιεχόμενο και υποσέλιδο.
Καθορίστε την επικεφαλίδα div με το data-role = "header".
-
Τοποθετώντας οποιαδήποτε από τις πληροφορίες κεφαλίδας μέσα σε ένα div με έναν ρόλο "κεφαλίδας", λέτε στο jQuery να επεξεργάζεται αυτό το στοιχείο ως επικεφαλίδα για κινητά και να εφαρμόζει τα κατάλληλα στυλ. Η κεφαλίδα περιλαμβάνει συνήθως μια ετικέτα
.
Συνήθως θα καθορίσετε την κεφαλίδα που θα διορθωθεί με το χαρακτηριστικό data-position = "fixed". Αυτό εξασφαλίζει ότι η κεφαλίδα θα παραμείνει στη θέση της αν μετακινηθεί το υπόλοιπο περιεχόμενο, κάτι που είναι χαρακτηριστική συμπεριφορά σε μια εφαρμογή για κινητά.
Ρυθμίστε ένα div div.
-
Προσθέστε ένα div με data-role = "content" για να ρυθμίσετε την κύρια περιοχή περιεχομένου της σελίδας σας. Οποιοδήποτε από τα βασικά στοιχεία του σώματος του ιστότοπού σας θα πρέπει να πάει σε αυτό το τμήμα.
Οποιοσδήποτε σύνδεσμος μπορεί να μετατραπεί σε ένα κουμπί.
-
Η συνήθης σύμβαση στις εφαρμογές ιστού είναι να μετατρέψει τους συνδέσμους σε κουμπιά που έχουν μεγαλύτερο στόχο από την είσοδο με βάση το ποντίκι. Είναι εύκολο να μετατρέψετε οποιονδήποτε σύνδεσμο σε ένα κουμπί προσθέτοντας το χαρακτηριστικό data-role = "button" στην ετικέτα αγκύρωσης.
Μετατρέψτε τις λίστες σε προβολές λίστας για κινητά.
-
Οι λίστες έχουν επίσης ειδικές συμβάσεις στον κόσμο των κινητών. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό ρόλου δεδομένων για να μετατρέψετε οποιαδήποτε λίστα σε λίστα.
Δημιουργήστε ένα υποσέλιδο.
-
Προσθέστε ένα ακόμα div με τον ρόλο ρόλου δεδομένων στο "υποσέλιδο". Κανονικά, το υποσέλιδο (όπως η κεφαλίδα) είναι σταθερό με το χαρακτηριστικό θέσης δεδομένων.
