Θέματα του jQuery Mobile

Θέματα του jQuery Mobile

Το jQuery Mobile παρέχει πέντε διαφορετικές θεματικές ενότητες, από "a" μέχρι "e" - κάθε θεματική ενότητα έχει διαφορετικά χρώματα κουμπιών, γραμμών, τεμαχίων περιεχομένου κ.λπ. Μια θεματική ενότητα του jQuery Mobile αποτελείται από διάφορα ορατά εφέ και χρώματα.

Για να προσαρμόσετε το εμφάνιση της εφαρμογής, χρησιμοποιήστε την ιδιότητα data-theme και εκθέστε την ιδιότητα μιας γράμματα:}

<div data-role="page" data-theme="a|b|c|d|e">
Τιμή Περιγραφή Παράδειγμα
a Προεπιλογή. Λευκό κείμενο πάνω σε μαύρο υποβάθρο. Δοκιμή
b Λευκό κείμενο πάνω σε μπλε υποβάθρο / Μαύρο κείμενο πάνω σε γκρι υποβάθρο Δοκιμή
c Μαύρο κείμενο πάνω σε φωτεινό γκρι υποβάθρο Δοκιμή
d Μαύρο κείμενο πάνω σε λευκό υποβάθρο Δοκιμή
e Μαύρο κείμενο πάνω σε πορτοκαλί υποβάθρο Δοκιμή

Σuggestion:Συνδυάστε τα αγαπημένα σας θέματα!

Από προεπιλογή, το jQuery Mobile χρησιμοποιεί το θέμα "a" για τις κεφαλίδες και τις ποντικιόδους, και το θέμα "c" για το περιεχόμενο των κεφαλιδών (φωτεινό γκρι). Ωστόσο, μπορείτε εύκολα να συνδυάσετε τα θέματα.

Θέματα σελίδων, περιεχομένου και ποντικιόδων

Παράδειγμα

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Δοκιμάστε το Μέσω του Σώματος

Θέματα διαλόγου

Παράδειγμα

<a href="#pagetwo" data-rel="dialog">Μεταβείτε στην Θέματιτη Σελίδα Διαλόγου</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Δοκιμάστε το Μέσω του Σώματος

Θέματα κουμπιών

Παράδειγμα

<a href="#" data-role="button" data-theme="a">Κουμπί</a>
<a href="#" data-role="button" data-theme="b">Κουμπί</a>
<a href="#" data-role="button" data-theme="c">Κουμπί</a>

Δοκιμάστε το Μέσω του Σώματος

Θέματα εικονιδίων

Παράδειγμα

<a href="#" data-role="button" data-icon="plus" data-theme="e">Πρόσθετο</a>

Δοκιμάστε το Μέσω του Σώματος

Το θέμα των κεφαλίδων και ποντικιόδων

Παράδειγμα

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Ektos</a>
  <h1>Kalos orisete stin ekipwdei mou</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Eanai</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Koubli 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Koubli 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Koubli 3</a>
</div>

Δοκιμάστε το Μέσω του Σώματος

Θεματικoποιημένη navbar

Παράδειγμα

<div data-role="footer" data-theme="e">
  <h1>Yplase proskypse ton text tis kataskeviashs</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Koubli 1</a></li>
      <li><a href="#" data-icon="arrow-r">Koubli 2</a></li>
      <li><a href="#" data-icon="arrow-r">Koubli 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Koubli 4</a></li>
    </ul>
  </div> 
</div>

Δοκιμάστε το Μέσω του Σώματος

Θεματικoποιημένα κουμπιά και content που μπορούν να κλείσουν

Παράδειγμα

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klik me - Ego einai collapsible!</h1>
  <p>Ego o exaplanatiko content.</p>
</div>

Δοκιμάστε το Μέσω του Σώματος

Θεματικοποιημένη λίστα

Παράδειγμα

<ul data-role="listview" data-theme="e">
  <li><a href="#">Στοιχείο Καταλόγου</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li data-theme="b"><a href="#">Στοιχείο Καταλόγου</a></li>
  <li><a href="#">Στοιχείο Καταλόγου</a></li>
</ul>

Δοκιμάστε το Μέσω του Σώματος

Θεματικοποιημένος κουμπί διαχωρισμού

Παράδειγμα

<ul data-role="listview" data-split-theme="e">

Δοκιμάστε το Μέσω του Σώματος

Θεματικοποιημένος συρραπτόμενος κατάλογος

Παράδειγμα

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Δοκιμάστε το Μέσω του Σώματος

Θεματικοποιημένος φόρμας

Παράδειγμα

<label for="name">Πλήρες Όνομα:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Επιλέξτε το αγαπημένο σας χρώμα:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">RED</option>
  <option value="green">ΓREEN</option>
  <option value="blue">Μπλε</option>
</select>

Δοκιμάστε το Μέσω του Σώματος

Θεματικοποιημένος συρραπτόμενος φόρμας

Παράδειγμα

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Κάντε κλικ εδώ - είμαι συρραπτόμενος!</legend>

Δοκιμάστε το Μέσω του Σώματος

Προσθήκη νέου θέματος

Το jQuery Mobile επιτρέπει επίσης την προσθήκη νέων θεμάτων στις κινητές σελίδες.

Προσθέστε ή επεξεργαστείτε νέα θέματα μέσω της τροποποίησης του αρχείου CSS (όπως το λήφθηκε το jQuery Mobile). Απλά αντιγράψτε ένα τμήμα στυλ, μετονομάστε το με γράμματα (f-z) και προσαρμόστε το σε χρώματα και γραμματοσειρές που σας αρέσουν:

Μπορείτε επίσης να προσθέσετε νέα στυλ χρησιμοποιώντας την κλάση θέματος στο έγγραφο HTML - προσθέστε την κλάση ui-bar-(a-z) στην εργαλειοθήκη και την κλάση ui-body-(a-z) στο περιεχόμενο:

Παράδειγμα

<style>
.ui-bar-f
{
χρώμα:πράσινο;
χρώμα περιβάλλοντος:κίτρινο;
}
.ui-body-f
{
βαρύτητα γραμματοσειράς:έντονη;
χρώμα:μαύρο;
}
</style>

Δοκιμάστε το Μέσω του Σώματος