Вид списка jQuery Mobile

Вид списка jQuery Mobile

Вид списка jQuery Mobile - это стандартный HTML-список: упорядоченный список (<ol>) и unordered list (<ul>).

Чтобы создать список, добавьте атрибут data-role="listview" к элементам <ol> или <ul>. Чтобы сделать эти элементы кликабельными, установите ссылку на каждый элемент списка (<li>):

Пример

<ol data-role="listview">
  <li><a href="#">Элемент списка</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Элемент списка</a></li>
</ul>

Попробуйте сами

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

Пример

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

Попробуйте сами

Совет:По умолчанию, элементы списка в списке автоматически преобразуются в кнопки (не требуется data-role="button").

Разделители списка

Разделители списка (List Dividers) используются для организации и объединения элементов в категории/разделе.

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

Пример

<ul data-role="listview">
 <li data-role="list-divider">Европа</li>
  <li><a href="#">Франция</a></li>
  <li><a href="#">Германия</a></li>
</ul>

Попробуйте сами

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

Пример

<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>

Попробуйте сами

Совет:Атрибут data-autodividers="true" создает разделители, используя заглавные буквы начальных символов текста элементов списка.

Фильтр поиска

Если вы хотите добавить полюс поиска в список, пожалуйста, используйте атрибут data-filter="true":

Пример

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

Попробуйте сами

По умолчанию, текст в поле поиска составляет "Фильтровать элементы...".

Если нужно изменить текст по умолчанию, используйте атрибут data-filter-placeholder:

Пример

<ul data-role="listview" data-filter="true" data-filter-placeholder="Поиск имени">

Попробуйте сами

Больше примеров

Список только для чтения
Как создать список без ссылок (не кнопки, не нажимаемые).