Содержимое списка jQuery Mobile

Миниатюры списка jQuery Mobile

Для изображений размером больше 16x16px добавьте элемент <img> в ссылку.

jQuery Mobile автоматически будет уменьшать изображения до 80x80px:

Пример

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

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

Используйте стандартный HTML для наполнения информативного списка:

Пример

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome бесплатный开源 веб-браузер. Выпущен в 2008 году.</p>
    </a>
  </li>
</ul>

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

Иконки списка jQuery Mobile

Чтобы добавить к вашему списку иконку размером 16x16px, добавьте атрибут class="ui-li-icon" к элементу <img>:

Пример

<li><a href="#"><img src="us.png" alt="США" class="ui-li-icon">США</a></li>

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

Разделительный кнопку

Чтобы создать разделенный список с вертикальной разделительной линией, поместите два链接 в элемент <li>.

jQuery Mobile автоматически добавляет стиль иконки с голубым стрелочным значком для второй ссылки, текст в ссылке (если есть) будет отображаться при наведении на иконку:

Пример

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Некоторый текст</a>
  </li>
</ul>

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

Добавляя страницы и диалоговые окна, можно сделать функции ссылок более мощными:

Пример

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Загрузить браузер</a>
  </li>
</ul>

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

Контрольная мыльница

Контрольная мыльница используется для отображения количества, связанного с элементом списка, например сообщения в почтовом ящике:

Чтобы добавить计数ную мыльницу, используйте встроенный элемент, например <span>, установите атрибут class "ui-li-count" и добавьте цифру:

Пример

<ul data-role="listview">
  <li><a href="#">Входящие<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Отослано<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Мусор<span class="ui-li-count">7</span></a></li>
</ul>

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

Комментарий:Чтобы отображать правильное число в计数ном пузыре, необходимо выполнить программное обновление. Мы расскажем об этом в следующей главе.

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

Изменение mặc định значка ссылки для элементов списка
Как установить различные значки ссылок для элементов списка (справа направо - это mặc định).
Складная таблица
Как создать список для скрытия и отображения содержимого.
Более форматированное содержимое
Как сделать календарь.