Руководство пользователя Отмена

Использование пользовательского интерфейса и мини-приложений jQuery для мобильных устройств в Dreamweaver

Поиск

Последнее обновление 21 мая 2021 г.

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

Мини-приложения ― это элементы, написанные на таких языках, как DHTML и JavaScript, которые можно вставлять в страницу и исполнять на ней. Среди прочего мини-приложения для Интернета позволяют реализовать на веб-странице такое же взаимодействие с пользователем, как в локальной системе.

Такие мини-приложения пользовательского интерфейса jQuery, как аккордеон, вкладки, выбор даты, ползунок и автозаполнение, позволяют сформировать в сети взаимодействие с пользователем, характерное для настольных систем.

Например, с помощью мини-приложения «Вкладки» можно воспроизвести вкладки, которые обычно имеются в диалоговых окнах приложений для настольных ПК.

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

Вставка мини-приложения jQuery

При вставке мини-приложения jQuery в код автоматически добавляется следующее.

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

Дополнительные сведения о мини-приложениях jQuery см. в статье http://jqueryui.com/demos/

Примечание.

При использовании эффектов jQuery внешние ссылки на файл jquery‑1.8.24.min.js не добавляются, поскольку этот файл автоматически включается в веб-страницу при добавлении эффекта.

Курсор должен находиться в том месте на странице, куда необходимо вставить мини-приложение.
Выберите «Вставка» > «Элемент jQuery» и выберите мини-приложение, которое будет вставлено.

При использовании панели «Вставка» мини-приложения представлены в разделе «Элементы jQuery» панели «Вставка».

При выделении мини-приложения jQuery его свойства отображаются на панели «Свойства».

Мини-приложения jQuery можно просматривать в представлении Live или в браузере, который поддерживает мини-приложения jQuery.

Изменение мини-приложений jQuery

Выделите мини-приложение, которое требуется изменить.
Внесите изменения в его свойства на панели «Свойства».

Например, чтобы добавить дополнительную вкладку к мини-приложению «Вкладки», выделите мини-приложение и щелкните + на панели «Свойства».

Вставка мини-приложений jQuery для мобильных устройств

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

Откроется диалоговое окно «Файлы jQuery Mobile».

Диалоговое окно «Файлы jQuery Mobile»
При необходимости измените настройки, установленные по умолчанию в диалоговом окне «Файлы jQuery Mobile», и нажмите кнопку ОК.
В открывшемся диалоговом окне «Страница» введите имя в поле идентификатора и установите или снимите флажки для верхнего и нижнего колонтитулов в зависимости от того, должны ли присутствовать разделы верхнего и нижнего колонтитулов на странице для мобильных устройств.

Диалоговое окно «Страница»
На открывшейся в Dreamweaver странице замените текст заголовка, контента и нижнего колонтитула текстом, изображениями и другими элементами, которые необходимо добавить на страницу для мобильных устройств.

Примечание.

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

Дополнительные сведения см. в разделе Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах.
Сохраните страницу jQuery для мобильных устройств и все связанные файлы.