Μεταβατικές Δράσεις jQuery Mobile

Το jQuery Mobile περιλαμβάνει CSS εφέ που επιτρέπουν την επιλογή τρόπου ανοίγματος της σελίδας.

Εφέ μετάβασης του jQuery Mobile

Το jQuery Mobile έχει μια σειρά από εφέ για το πώς να μεταβεί από μια σελίδα στην επόμενη.

Σημείωση:Για να επιτευχθούν τα μεταβατικά εφέ, ο περιηγητής πρέπει να υποστηρίζει τις μετατροπές CSS3 3D:

Υποστήριξη του περιηγητή

  • Το Internet Explorer 10 υποστηρίζει τις μετατροπές 3D (οι παλιότερες εκδόσεις δεν υποστηρίζονται).
  • Το Opera δεν υποστηρίζει τις μετατροπές 3D.

Τα μεταβατικά εφέ μπορούν να εφαρμοστούν σε οποιοδήποτε σύνδεσμο ή σε υποβολή φόρμας μέσω της ιδιότητας data-transition:

<a href="#anylink" data-transition="slide">Πτήση στην σελίδα δύο</a>

Η παρακάτω τаблицή δείχνει τις διαθέσιμες μεταβατικές επιδράσεις που μπορούν να χρησιμοποιηθούν με την ιδιότητα data-transition:

Μεταβατικό Περιγραφή Δοκιμή
fade Προεπιλεγμένο. Εφέ φωτεινής και σκοτεινής στην επόμενη σελίδα. Δοκιμή
flip Περίβλεψη στην επόμενη σελίδα από πίσω προς τα μπροστά. Δοκιμή
flow Απόρριψη της τρέχουσας σελίδας και εισαγωγή της επόμενης σελίδας. Δοκιμή
pop Μετακίνηση στην επόμενη σελίδα όπως παράθυρο αναφοράς. Δοκιμή
slide Κατά μήκος πτήση προς την επόμενη σελίδα από δεξιά προς τα αριστερά. Δοκιμή
slidefade Κατά μήκος πτήση προς την επόμενη σελίδα από δεξιά προς τα αριστερά και εμφάνιση. Δοκιμή
slideup Κάθετη πτήση προς την επόμενη σελίδα από κάτω προς τα πάνω. Δοκιμή
slidedown Κάθετη πτήση προς την επόμενη σελίδα από επάνω προς τα κάτω. Δοκιμή
περίβλεψη Περίβλεψη στην επόμενη σελίδα. Δοκιμή
μηδέν Χωρίς μεταβατικό εφέ. Δοκιμή

Συμβουλή:Στο jQuery Mobile, η εφέ φωτεινής και σκοτεινής είναι προεπιλεγμένη σε όλους τους σύνδεσμους (αν ο περιηγητής υποστηρίζει).

Συμβουλή:Όλες οι παραπάνω ενέργειες υποστηρίζουν την αντίθετη δράση, π.χ., αν θέλετε να σκινηθεί η σελίδα από αριστερά προς δεξιά αντί για από δεξιά προς αριστερά, χρησιμοποιήστε την ιδιότητα data-direction με τιμή "reverse".

Παράδειγμα

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Σκίνηση</a>

Δοκιμάστε το προσωπικά