JQuery Mobile Список иконок
Значок по умолчанию для каждого элемента списка , содержащего ссылку является "carat-r" (стрелка вправо). Для того, чтобы изменить это на другой значок, используйте data-icon атрибут на элемент списка , который требуется изменить:
пример
<ul data-role="listview">
<li><a href="#">Default is right
arrow</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 иконки Reference .
16x16 Иконки
Чтобы добавить стандартную иконку 16x16px в свой список, добавить <img> элемент внутри ссылки с классом "Ui-ли-иконы":
пример
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Попробуй сам " 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 is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Попробуй сам " Сплит Кнопки
Для создания списка разделенным с вертикальной разделительной панели, поместите две ссылки внутри <li> элемента.
JQuery Mobile автоматически разместит вторую ссылку на правой стороне списка с правой arrow-icon . И текст внутри ссылки (если таковые имеются) будет отображаться, когда пользователь при наведении на иконку:
пример
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Попробуй сам " Позволяет добавить несколько страниц и диалоговых окон, чтобы сделать ссылки более функциональным:
пример
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Попробуй сам " граф пузыри
пузырьки Count используются для отображения номера, связанные с элементами списка, например, сообщений в почтовом ящике:
Чтобы добавить пузырьки подсчета, используйте встроенный элемент, например, <span> , с классом "ui-li-count" и добавить номер:
пример
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
Попробуй сам " Примечание: Для того, чтобы показать правильное количество в пересчете пузыря, он должен быть обновлен программным путем . Это будет объяснено в следующей главе.
Еще примеры
списки всплывающих окон
Как создать выпадающий список.
разборные списки
Как создать списки, которые скрывать и показывать содержимое.
Складные всплывающие списки
Как создать разборную выпадающий список.
Полная ширина разборные списки
Использование data-inset="false" атрибут "collapsibles/collapsible set" , чтобы включить полную ширину ListView.
Больше контента форматирования
Как сделать календарь.