Σελίδα του jQuery Mobile

Εισαγωγή στη χρήση του jQuery Mobile

Συμβουλή:Αν και το jQuery Mobile είναι κατάλληλο για όλες τις κινητές συσκευές, μπορεί να υπάρχει προβληματική συμβατότητα με τους υπολογιστές (λόγω περιορισμένης υποστήριξης του CSS3).

Επομένως, στην παρούσα οδηγία, προτείνουμε να χρησιμοποιήσετε τον περιηγητή Google Chrome για να απολαύσετε την καλύτερη εμπειρία ανάγνωσης.

παράδειγμα

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Καλωσορίσατε στην ιστοσελίδα μου</h1>
  </div>
  <div data-role="content">
    <p>Είμαι ένας开发者 κινητών συσκευών!</p>
  </div>
  <div data-role="footer">
    <h1>Κείμενο σφράγισσης</h1>
  </div>
</div>
</body>

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

Παράδειγμα εξήγησης:

  • data-role="page" είναι η σελίδα που εμφανίζεται στον περιηγητή
  • data-role="header" δημιουργεί ένα εργαλείο στην επάνω μεριά της σελίδας (χρησιμοποιείται συχνά για τίτλους και κουμπιά αναζήτησης)
  • data-role="content" ορίζει το περιεχόμενο της σελίδας, όπως κείμενο, εικόνες, φόρμες και κουμπιά κ.λπ.
  • data-role="footer" δημιουργεί ένα εργαλείο στο κάτω μέρος της σελίδας

Σε αυτές τις συσκευές μπορείτε να προσθέσετε οποιοδήποτε στοιχείο HTML - παραγράφους, εικόνες, τίτλους, λίστες κ.λπ.

Συμβουλή:Οι ιδιότητες data-* του HTML5 χρησιμοποιούνται για τη δημιουργία ενός "φιλικού προς τον χειρισμό με το δάχτυλο" εμφανιστικού για τα κινητά συσκευές μέσω του jQuery Mobile.

Προσθήκη σελίδας στο jQuery Mobile

Στο jQuery Mobile, μπορείτε να δημιουργήσετε πολλαπλές σελίδες σε ένα μοναδικό αρχείο HTML.

Παρακαλώ χρησιμοποιήστε μοναδικούς id για να διαχωρίσετε κάθε σελίδα και χρησιμοποιήστε την ιδιότητα href για να συνδέσετε τις σελίδες μεταξύ τους:

παράδειγμα

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Μεταβείτε στη σελίδα δύο</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Μεταβείτε στη Σελίδα Ένα</a>
  </div>
</div>

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

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

<a href="externalfile.html">Μεταβείτε σε εξωτερική σελίδα</a>

Χρήση της σελίδας ως παράθυρο συνομιλίας

Η συνομιλία είναι ένα παράθυρο που χρησιμοποιείται για να εμφανίσει πληροφορίες ή να ζητήσει εισαγωγή από τον χρήστη.

Για να δημιουργήσετε ένα παράθυρο συνομιλίας όταν ο χρήστης κάνει κλικ (ελαφρύ πιέσιμο) στο σύνδεσμο, προσθέστε το data-rel="dialog" στον σύνδεσμο:

παράδειγμα

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Μεταβείτε στη Σελίδα Δύο</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Μεταβείτε στη Σελίδα Ένα</a>
  </div>
</div>

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