Средний
10 уроков
(1 час 4 минуты)
Курс
jQuery mobile
Данный видеокурс посвящен jQuery Mobile — веб-фреймворку, который также известен как мобильный фреймворк. Разработка сфокусирована на кроссбраузерности с уклоном в сторону смартфонов и планшетов.

#4 — Компоненты интерфейса пользователя. Часть 2. Списки.

В этом уроке мы продолжим знакомство с компонентами пользовательского интерфейса jQuery Mobile и более подробно рассмотрим списки.

Элементы списка jQuery Mobile

В среде фреймворка списки могут быть упорядоченными (ol) и неупорядоченными (ul), а также должны содержать хотя бы один пункт. Каждый элемент списка автоматически занимает всю доступную ширину экрана и оптимизирует свои размеры, если текст не помещается в одну строчку, что характерно для интерфейсов мобильных устройств.

Используя специальные data-атрибуты для html-элементов разметки приложения, разработчик может управлять различными свойствами элементов списка jQuery Mobile. Например, можно использовать некоторые пункты списка в качестве разделителей. Такие элементы будут создавать визуальный разрыв между элементами списка и не будут содержать в себе никакого текста. Списки в jQuery Mobile могут быть вложенными. Можно создать неограниченное количество вложенных списков.

Кое-что об интерактивных элементах, входящих в списки jQuery Mobile

Некоторые пункты списка можно сделать интерактивными с помощью html-ссылок. Интерактивные элементы ссылок будут реагировать на все события курсора, мыши и станут «кликабельными». Интерактивные элементы будут помечены специальной иконкой-пиктограммой в правой части блока элемента списка jQuery Mobile. С помощью data-атрибутов изображение пиктограммы можно поменять или полностью скрыть. Слишком длинный текст интерактивных элементов будет сокращен для того, чтобы полностью вмещаться в строку экрана устройства и дополнен многоточием.

Пиктограммы как элементы списков jQuery Mobile

Функционал элементов списка также можно улучшить с помощью пиктограмм и дополнительного описания. Пиктограммы располагаются слева от текста пункта списка jQuery Mobile и могут быть добавлены с помощью html-тэга . Размерами пиктограмм можно управлять. Дополнительное описание может быть расположено справа от текста элемента списка или под ним. Обычно содержит текст, который поясняет основной заголовок пункта списка.

Немножко о счетчиках в списках jQuery Mobile

Очень полезным может быть использование элементов-счетчиков в пунктах списка. Это блок, визуально представляющий собой круг, и содержащий какую-либо числовую информацию: количество вложенных элементов, количество непрочитанных сообщений и т.д.

Фильтры для списков jQuery Mobile

С помощью фреймворка jQuery Mobile также можно создавать фильтры для элементов списка. При вводе текста в строку поиска, фильтр будет отображать те пункты списка jQuery Mobile, в которых содержится указанный поисковый запрос.

Для нашего приложения в этом уроке мы создадим простой список, один из элементов которого будет интерактивным и будет вызывать всплывающее окно с дополнительной информацией о проекте.

Приятного всем просмотра! Учитесь с удовольствием!

Материалы к уроку:
Делись:

Оставь комментарий!

One thought on “#4 — Компоненты интерфейса пользователя. Часть 2. Списки.

  1. Вообще класс. А если я захочу добавить интерактивности, могу ли использовать помимо прочего чистою JQuery и также подключаться к базе с помощью стандартного ajax ?

Добавить комментарий

Рекомендуемые курсы