Представления Списков jQuery Mobile

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


Представления Списков jQuery Mobile

Чтобы создать список, примените 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").

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

Разделители списка используются, чтобы организовать и сгруппировать элементы в категории/разделы.

Чтобы определить разделитель списка, добавьте атрибут 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 Мобайл автоматически добавляет соответствующие разделители при установке атрибута data-autodividers="true" для элемента <ol> или <ul>:

Пример

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Иванов</a></li>
  <li><a href="#">Петров</a></li>
  <li><a href="#">Пирагов</a></li>
  <li><a href="#">Сидоров</a></li>
  ...
</ul>

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

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

Поисковый Фильтр

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

Пример

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

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

По умолчанию текст в поле поиска "Filter items...".

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

Пример

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

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

Еще Примеры

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

Далее: Основы Форм jQuery Mobile

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)