Προβολή Λίστας του jQuery Mobile

Προβολή Λίστας του jQuery Mobile

The list view in jQuery Mobile is a standard HTML list: ordered list (<ol>) and unordered list (<ul>).

To create a list, add the data-role="listview" attribute to the <ol> or <ul> elements. To make these items clickable, specify a link in each list item (<li>):

Παράδειγμα

<ol data-role="listview">
  <li><a href="#">List Item</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">List Item</a></li>
</ul>

Δοκιμάστε το Εν Πράξη

To add rounded corners and margins to the list, use the data-inset="true" attribute:

Παράδειγμα

<ul data-role="listview" data-inset="true">

Δοκιμάστε το Εν Πράξη

Tip:By default, list items in the list are automatically converted to buttons (no data-role="button" needed).

List Dividers

List dividers (List Dividers) are used to organize and group items into categories/sections.

To specify list dividers, add the data-role="list-divider" attribute to the <li> element:

Παράδειγμα

<ul data-role="listview">
 <li data-role="list-divider">Europe</li>
  <li><a href="#">France</a></li>
  <li><a href="#">Germany</a></li>
</ul>

Δοκιμάστε το Εν Πράξη

If your list is alphabetical (such as a contact list), jQuery Mobile automatically adds appropriate dividers by setting the data-autodividers="true" attribute on the <ol> or <ul> elements:

Παράδειγμα

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

Δοκιμάστε το Εν Πράξη

Tip:The data-autodividers="true" attribute creates dividers by capitalizing the first letter of the list item text.

Search Filter

To add a search box to the list, use the data-filter="true" attribute:

Παράδειγμα

<ul data-role="listview" data-filter="true"</ul>

Δοκιμάστε το Εν Πράξη

By default, the text in the search box is "Filter items...".

Για να αλλάξετε το προεπιλεγμένο κείμενο, χρησιμοποιήστε την ιδιότητα data-filter-placeholder:

Παράδειγμα

<ul data-role="listview" data-filter="true" data-filter-placeholder="Αναζήτηση Ονόματος">

Δοκιμάστε το Εν Πράξη

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

Λίστα Μόνο Διαβάσιμο
Πώς να δημιουργήσετε μια λίστα χωρίς σύνδεσμοι (δεν είναι κουμπιά, δεν είναι κλικάριστο).