Контент Списка jQuery Mobile
Для создания контента (наполнения) списка в jQuery Mobile используется обычная HTML разметка, но также имеются и специальные средства оформления.
Миниатюры Списка jQuery Mobile
Для изображений, больше чем 16x16px, добавьте элемент <img> в ссылку.
jQuery Mobile будет автоматически масштабировать изображение к 80x80px:
Пример
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Попробуйте сами »
Используйте стандартный HTML, чтобы заполнить список информацией:
Пример
<li>
<a href="#">
<img src="chrome.png">
<h2>Гугл Хром</h2>
<p>Гугл Хром - это бесплатный веб браузер с открытым исходным кодом. Выпущен в 2008.</p>
</a>
</li>
</ul>
Попробуйте сами »
Значки Списка jQuery Mobile
Чтобы добавить значок 16x16px к Вашему списку, добавьте класс "ui-li-icon" к элементу <img>:
Пример
Попробуйте сами »
Разделите Кнопки
Чтобы создать разделенный список с вертикальной полосой разделителя, поместите две ссылки в элемент <li>.
jQuery Mobile автоматически стилизует вторую ссылку как значок в виде голубой стрелки, и текст в ссылке (если присутствует) будет показываться, когда пользователь наводит указатель на значок:
Пример
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Некоторый Текст</a>
</li>
</ul>
Попробуйте сами »
Давайте добавим некоторые страницы и диалоговые окна, чтобы сделать ссылки более функциональными:
Пример
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">Скачать Браузер</a>
</li>
</ul>
Попробуйте сами »
Пузыри Количества
Пузыри количества используются, чтобы вывести на экран числа, связанные с элементами списка, такие как сообщения в почтовом ящике:
Чтобы добавить пузыри количества, используйте встроенный элемент, такой как <span>, с классом "ui-li-count" и добавьте число:
Пример
<li><a href="#">Входящие<span class="ui-li-count">25</span></a></li>
<li><a href="#">Отправленные<span class="ui-li-count">432</span></a></li>
<li><a href="#">Корзина<span class="ui-li-count">7</span></a></li>
</ul>
Попробуйте сами »
Отметьте: Чтобы показать корректное число в пузыре количества, оно должно обновляться программно. Это будет объяснено в более поздней статье.
Еще Примеры
Измените значок ссылки по умолчанию для элементов списка
Как установить различные значки ссылки для элементов списка (стрелка вправо - значение по умолчанию).
Складные списки
Как создать списки, которые скрывают и показывают контент.
Больше форматирования контента
Как сделать календарь.