Курсор должен находиться в том месте на странице, куда необходимо вставить мини-приложение.
Узнайте, как добавить в веб-проекты 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» или сохраните значения по умолчанию и нажмите кнопку ОК.
В открывшемся диалоговом окне «Страница» введите имя в поле идентификатора и установите или снимите флажки для верхнего и нижнего колонтитулов в зависимости от того, должны ли присутствовать разделы верхнего и нижнего колонтитулов на странице для мобильных устройств.
На открывшейся в 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.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.