Πώς να δημιουργήσετε ένα κινητό έγγραφο πολλών σελίδων για προγραμματισμό HTML5 και CSS3 - dummies

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

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

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

Η τρίτη σελίδα είναι και πάλι πολύ οικεία, αλλά αυτή τη φορά έχει ένα μόνο κουμπί στα αριστερά της κεφαλίδας και ένα άλλο κουμπί στην κύρια περιοχή περιεχομένου.

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

• Οι πόροι CSS και JavaScript πρέπει να φορτωθούν μόνο μία φορά: Αυτό διατηρεί το σύστημα συνεπές και βελτιώνει ελαφρώς τους χρόνους φόρτωσης.

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

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

Εδώ είναι ο κώδικας για το multiPage. html στο σύνολό του.

multiPage. html #foot {μέγεθος γραμματοσειράς: 75%; στυλ γραμματοσειράς: πλάγια; κείμενο-ευθυγράμμιση: κέντρο ·} προ {περιθώριο-αριστερά: auto; margin-right: auto; φόντο-χρώμα: λευκό? >

Αυτή είναι η
σελίδα 1
σελίδα 2

σελίδα 3
από την HTML All in One for Dummies
prev
Σελίδα δύο επόμενο

Η δεύτερη σελίδα μοιάζει πολύ με την πρώτη, εκτός από την πρώτη, και έχει κείμενο και όχι κουμπιά. Είναι η δεύτερη σελίδα. Αν σας αρέσει το πρώτο, υποθέτω ότι μπορείτε να πάτε πίσω, αλλά θα πρέπει πραγματικά να πάτε στην επόμενη σελίδα, επειδή ακούω ότι είναι πολύ ωραίο.
από την HTML Όλα σε Ένα για Ανδρείκελα
prev
Σελίδα Τρία 3333333 3 3 3 33333 3 3 3333333

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

Φορτώστε το κινητό περιεχόμενο του jQuery.
Τραβήξτε τα απαραίτητα αρχεία CSS και JavaScript από το jQuery. com site.

Εφαρμόστε το δικό σας CSS.

1. Ακόμα κι αν "δανείζετε" τον κώδικα CSS από το jQuery, μπορείτε ακόμα να προσθέσετε το δικό σας. Μπορείτε να προσθέσετε CSS για να κάνετε το υποσέλιδο και τα pre στοιχεία να ενεργούν όπως θέλετε.

   Δημιουργήστε τις σελίδες σας.

2. Μπορείτε να δημιουργήσετε όσες σελίδες επιθυμείτε, αλλά όλες ακολουθούν το ίδιο γενικό μοτίβο κινητού jQuery: Δημιουργήστε μια σελίδα div με κεφαλίδα, περιεχόμενο και υποσέλιδα. Χρησιμοποιήστε το χαρακτηριστικό ρόλου δεδομένων για να υποδείξετε το ρόλο κάθε διαίρεσης.

   Ονομάστε κάθε διαχωρισμό επιπέδου σελίδας με το χαρακτηριστικό id.

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

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

4. Το μόνο καινούργιο μέρος αυτού του παραδείγματος (εκτός από την ίδια την αναστροφή σελίδας) είναι τα κουμπιά στις κεφαλίδες. Μεταβείτε στην κεφαλίδα της σελίδας 2 και θα δείτε κάτι πραγματικά ενδιαφέρον:

   prev

5. Σελίδα δύο

   επόμενο

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

   Σελίδα Ένα

6. επόμενο

   Χρησιμοποιήστε εσωτερικές άγκυρες για να παραλείψετε τις σελίδες.

   
   Ρίξτε μια ματιά στις διευθύνσεις URL σε όλα τα κουμπιά. Αρχίζουν με ένα hash, το οποίο υποδεικνύει εσωτερική σύνδεση μέσα στο έγγραφο. Θυμηθείτε, αν και αυτό είναι σαν τρεις διαφορετικές σελίδες στο χρήστη, είναι πραγματικά μια μεγάλη ιστοσελίδα.
   Πειραματιστείτε με μεταβάσεις.
   

7. Προσέξτε προσεκτικά το κουμπί στη σελίδα 3:

   Μεταβείτε στο ευρετήριο

8. Αυτό το κουμπί έχει ένα ειδικό χαρακτηριστικό μετάβασης δεδομένων. Από προεπιλογή, οι σελίδες για κινητά ανταλλάσσονται με ξεθώριασμα. Μπορείτε να ορίσετε τη μετάβαση σε slide, slideup, slidedown, pop, fade ή flip. Μπορείτε επίσης να αντιστρέψετε τη μετάβαση προσθέτοντας ένα άλλο χαρακτηριστικό: κατεύθυνση δεδομένων = "αντίστροφη".