Περιεχόμενο Λίστας jQuery Mobile

Συντομεύσεις λίστας jQuery Mobile

Για εικόνες μεγαλύτερες από 16x16px, προσθέστε στοιχείο <img> στο σύνδεσμο.

Το jQuery Mobile θα προσαρμόσει αυτόματα τις εικόνες σε 80x80px:

Παράδειγμα

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Δοκιμάστε το個人!

Χρησιμοποιήστε τυπικό HTML για να γεμίσετε τη λίστα με πληροφορίες:

Παράδειγμα

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome, ο δωρεάν και ανοιχτός κώδικα περιηγητής web. Δημιουργήθηκε το 2008.</p>
    </a>
  </li>
</ul>

Δοκιμάστε το個人!

Εικονίδια λίστας jQuery Mobile

Για να προσθέσετε εικονίδια 16x16px στη λίστα σας, προσθέστε την ιδιότητα class="ui-li-icon" στο στοιχείο <img>:

Παράδειγμα

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

Δοκιμάστε το個人!

Διαχωριστικό κουμπί

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

Το jQuery Mobile θα προσθέσει αυτόματα τον στυλ εικονιδίου αριστεράς σε δεύτερο σύνδεσμο, το κείμενο του συνδέσμου (αν υπάρχει) θα εμφανιστεί όταν ο χρήστης θα βάλει το δάχτυλό του στο εικονίδιο:

Παράδειγμα

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Κάποιο κείμενο</a>
  </li>
</ul>

Δοκιμάστε το個人!

Με την προσθήκη σελίδων και διαλόγων, μπορείτε να κάνετε πιο ισχυρά τα συνδέσματα:

Παράδειγμα

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Λήψη περιηγητή</a>
  </li>
</ul>

Δοκιμάστε το個人!

Κουτί μετρήσεων

Το κουτί μετρήσεων χρησιμοποιείται για να εμφανίσει τον αριθμό που σχετίζεται με το στοιχείο της λίστας, όπως τα μηνύματα του ηλεκτρονικού ταχυδρομείου:

Για να προσθέσετε κουτί μετρήσεων, χρησιμοποιήστε στοιχεία γραμμής, όπως <span>， και ορίστε την ιδιότητα class "ui-li-count" και προσθέστε τον αριθμό:

Παράδειγμα

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

Δοκιμάστε το個人!

Σημείωση:Για να εμφανιστούν σωστά τα αριθμητικά μπάλια, πρέπει να γίνει προγραμματιστική ενημέρωση. Θα το εξηγήσουμε στο επόμενο κεφάλαιο.

Περισσότερα παραδείγματα

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