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

Последнее обновление 30 апр. 2026 г.

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

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

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

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

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

Вставка мини-приложения 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 Mobile, сначала необходимо определить страницу jQuery Mobile. Для этого выберите Вставка > jQuery Mobile > Страница.

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

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

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

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

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

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

Примечание

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

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

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

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

Сохраните страницу jQuery Mobile и все связанные файлы.


Темы jQuery mobile не применяются с новыми версиями jQuery 

Проблема

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

Причина

jQuery Mobile устарел и больше не поддерживается активно. Он не поддерживает версии jQuery 3.x, что приводит к проблемам совместимости с новыми выпусками.

Решение / Обходное решение

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

Рекомендуемая версия: jQuery 1.11.1 (или другие поддерживаемые версии 1.x)

Пример

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Добавьте поддерживаемую версию jQuery. Например, 1.11.1.

Убедитесь, что библиотека jQuery Mobile загружается после скрипта jQuery.

Перезагрузите страницу и убедитесь, что темы, цветовые образцы и панели отображаются правильно.

Примечание

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