Контент Списка jQuery Mobile

Для создания контента (наполнения) списка в jQuery Mobile используется обычная HTML разметка, но также имеются и специальные средства оформления.


Миниатюры Списка 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>Гугл Хром</h2>
    <p>Гугл Хром - это бесплатный веб браузер с открытым исходным кодом. Выпущен в 2008.</p>
    </a>
  </li>
</ul>

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

Значки Списка jQuery Mobile

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

Пример

<li><a href="#"><img src="026/us.png" alt="USA" class="ui-li-icon">USA</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>, с классом "ui-li-count" и добавьте число:

Пример

<ul data-role="listview">
  <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>

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

Отметьте: Чтобы показать корректное число в пузыре количества, оно должно обновляться программно. Это будет объяснено в более поздней статье.

Еще Примеры

Измените значок ссылки по умолчанию для элементов списка
Как установить различные значки ссылки для элементов списка (стрелка вправо - значение по умолчанию).

Складные списки
Как создать списки, которые скрывают и показывают контент.

Больше форматирования контента
Как сделать календарь.

Далее: Поля Ввода Формы jQuery Mobile

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

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

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

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