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

#10 — Создание дополнительного модуля (виджета).

В последнем видеоуроке курса по jQuery Mobile рассмотрим вопрос создания дополнительных модулей, или виджетов, для приложений на jQuery Mobile.

Что включает в себя создание виджета jQuery Mobile

Функционал приложения на фреймворке jQuery Mobile можно расширить с помощью создания собственных модулей — виджетов. Виджет представляет собой набор javascript- и CSS-файлов, которые подключаются в разметке приложения после основных файлов фреймворка. Элементам, к которым нужно применить виджет, необходимо задать атрибут date-role и в качестве его значения указать название виджета.

Стандартные и вспомогательные методы работы созданных виджетов

Файл с javascript-кодом виджета реализует поведение, которое должен обеспечивать создаваемый виджет. Виджет — это также javascript-объект, который может содержать свойства и методы, необходимые для своей работы. Например, есть стандартные, для всех jQuery Mobile виджетов, методы. Они нужны для корректной работы виджета и их требуется реализовать в своём собственном виджете.

Кроме этого можно использовать собственные вспомогательные методы, которые будут обеспечивать функционал виджета. На сайте проекта jQuery Mobile есть готовый шаблон для всех новых виджетов, его можно взять за основу своей разработки.

Создание виджета jQuery Mobile на видеоуроке

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

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

Полезные ссылки:

https://jqueryui.com/— jQuery UI
https://github.com/andrIvash/quote-me.git — пример кода ( ветка — widget)

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

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

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

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