Последние учебники веб-разработки
 

jQuery Mobile Список Просмотров



JQuery Мобильный список Просмотров

Представления списка в JQuery Mobile стандартные списки HTML; упорядоченный (<ol>) и неупорядоченные (<ul>) .

Для создания списка, применить data-role="listview" к <ol> или <ul> элемента. Для того, чтобы элементы tappable, указать ссылку внутри каждого элемента списка (<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>
Попробуй сам "

Укладывать списки с закругленными углами и некоторым запасом, используйте data-inset="true" атрибут:

пример

<ul data-role="listview" data-inset="true" >
Попробуй сам "

По умолчанию, ссылки внутри элемента списка автоматически превратится в кнопку (нет необходимости в ui-class="btn" или data-role="button" )


Список делители

Список разделители используются для организации и группы предметов по категориям / разделам.

Чтобы задать список делитель, добавить data-role="list-divider" атрибут к <li> элемента:

пример

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Попробуй сам "

Если у вас есть список в алфавитном порядке, (например, в телефонной книге) JQuery Mobile автоматически добавляет соответствующие разделители путем установки данных-autodividers = "истинный" атрибут на <ol> или <ul> элемента:

пример

<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>
Попробуй сам "

Данных-autodividers = "истина" атрибут создает разделители с буквами в верхнем регистре первых текста элемента.


Примеры

Еще примеры

Только для чтения списков
Как создать списки без ссылок (не будет кнопки и не tappable).

Панели
Как вставить панели в список ваших деталей.