Najnowsze tutoriale tworzenie stron internetowych
 

jQuery Mobile Lista Widoki



jQuery mobile Widoki

widoki list w jQuery mobilne są standardowe listy html; Zamówiłem (<ol>) i nieuporządkowana (<ul>) .

Aby utworzyć listę, należy zastosować data-role="listview" do <ol> i <ul> elementu. Aby elementy tappable podaj linka wewnątrz każdego elementu listy (<li>) :

Przykład

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

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
Spróbuj sam "

Projektować list z zaokrąglonymi narożnikami i pewnym marginesem, użyj data-inset="true" atrybutu:

Przykład

<ul data-role="listview" data-inset="true" >
Spróbuj sam "

Domyślnie linki wewnątrz elementu listy będą automatycznie zamieniane w przycisku (nie ma potrzeby ui-class="btn" lub data-role="button" )


Lista dzielniki

Lista dzielniki są wykorzystywane do organizowania i grupa przedmiotów na kategorie / sekcje.

Aby określić listę dzielnik, dodać data-role="list-divider" atrybutu do <li> elementu:

Przykład

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Spróbuj sam "

Jeśli masz listę alfabetycznie (na przykład w książce telefonicznej) jQuery Mobile automatycznie dodaje odpowiednie dzielniki przez ustawienie data-autodividers = "true" atrybutu na <ol> i <ul> element:

Przykład

<ul data-role="listview" data-autodividers="true" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
Spróbuj sam "

Zbiór danych autodividers = "true" atrybutu tworzy przegródki z duże litery pierwszych liter tekstu elementu.


Przykłady

Więcej przykładów

Tylko do odczytu list
Jak tworzyć listy bez linki (nie będzie przyciski i nie tappable).

panele
Jak wkładać płyt do elementów listy.