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

Поиск
Adobe Dreamweaver Руководство пользователя

На этой странице

Применимо к: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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

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

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

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

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

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

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

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

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

Примечание.

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

  1. Курсор должен находиться в том месте на странице, куда необходимо вставить мини-приложение.

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

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

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

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

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

  1. Выделите мини-приложение, которое требуется изменить.

  2. Внесите изменения в его свойства на панели «Свойства».

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

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

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

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

    Диалоговое окно «Файлы jQuery Mobile»
    Диалоговое окно «Файлы jQuery Mobile»

  2. При необходимости измените настройки, установленные по умолчанию в диалоговом окне «Файлы jQuery Mobile», и нажмите кнопку ОК.

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

    Диалоговое окно «Страница»
    Диалоговое окно «Страница»

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

    Примечание.

    Старайтесь, чтобы текст был кратким, а изображения небольшими, чтобы можно было отображать их на небольших экранах мобильных устройств.

  5. По мере необходимости добавьте другие мини-приложения jQuery Mobile.

  6. Выполните предварительный просмотр страницы на устройстве.

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

  7. Сохраните страницу jQuery для мобильных устройств и все связанные файлы.