jQuery Mobile Содержимое списков
Значки списков jQuery Mobile
По умолчанию каждый элемент списка будет содержать значок стрелки "carat-r" (стрелка вправо). Чтобы изменить этот значок, можно использовать атрибут data-icon:
Пример
<li><a href="#">По умолчанию — стрелка вправо</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Попробуйте сами »
 |
data-icon="false" удалит значок. |
|---|
Для более полного набора значков кнопок jQuery Mobile, пожалуйста, посетите нашСправочное руководство по иконкам jQuery Mobile。
Значки 16x16
Если вы хотите добавить стандартные значки 16x16px в ваш список, вы можете добавить элемент <img> в элемент списка и использовать класс "ui-li-icon":
Пример
<li><a href="../index.html"><img src="us.png.html" alt="USA" class="ui-li-icon">USA</a></li>
</ul>
Попробуйте сами »
Миниатюры списков jQuery Mobile
Для изображений размером больше 16x16px добавьте элемент <img> в ссылку.
jQuery Mobile автоматически масштабирует изображения до 80x80px:
Пример
<li><a href="../index.html"><img src="chrome.png.html"></a></li>
</ul>
Попробуйте сами »
Используйте стандартный HTML, чтобы добавить информацию в список:
Пример
<li>
<a href="../index.html">
<img src="chrome.png.html">
<h2>Google Chrome</h2>
<p>Google Chrome — это бесплатный веб-браузер с открытым исходным кодом. Выпущен в 2008 году.</p>
</a>
</li>
</ul>
Попробуйте сами »
Значки списков jQuery Mobile
Используйте class="ui-li-icon" на элементе <img> списка, чтобы добавить значки 16x16px:
Пример
Попробуйте сами »
Раздельные кнопки
В списках jQuery Mobile иногда требуется выполнить две разные операции над содержимым элемента списка. В этом случае нужно разделить кнопку-ссылку в элементе списка. Чтобы добиться разделения, добавьте ещё один элемент <a> внутрь элемента <li>, и эффект разделения можно реализовать на странице.
jQuery Mobile автоматически установит вторую ссылку как значок синей стрелки. Текст ссылки значка (если он есть) будет отображаться, когда пользователь наводит мышь на значок:
Пример
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html">Некоторый Текст</a>
</li>
</ul>
Попробуйте сами »
Добавьте несколько страниц и диалогов, чтобы сделать функциональность ссылок богаче:
Пример
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html" data-rel="dialog">Скачать браузер</a>
</li>
</ul>
Попробуйте сами »
Пузырьки-счётчики
Пузырьки-счётчики используются для отображения чисел, связанных с элементами списка, например количества писем в почтовом ящике:
Чтобы добавить пузырьки-счётчики, используйте встроенный элемент, такой как <span>, задайте атрибут class "ui-li-count" и добавьте число:
Пример
<li><a href="../index.html">Входящие<spanclass="ui-li-count">25</span></a></li>
<li><a href="../index.html">Исходящие<spanclass="ui-li-count">432</span></a></li>
<li><a href="../index.html">Корзина<spanclass="ui-li-count">7</span></a></li>
</ul>
Попробуйте сами »
Примечание:Чтобы правильно отобразить пузырёк-счётчик, необходимо изменить метод программирования. Это будет объяснено в следующих главах.
Другие примеры
Как создать всплывающий список
Как задать значок ссылки по умолчанию для элементов списка (по умолчанию — стрелка вправо).
Как создать сворачиваемый всплывающий список.
Как создать список, который можно показывать/скрывать.
Как создать календарь.