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

Создание веб-приложения с помощью jQuery Mobile

Открытие начальной страницы jQuery Mobile или создание страницы HTML5

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

На начальных страницах jQuery Mobile имеются файлы HTML, CSS, JavaScript, а также графические файлы, позволяющие быстро приступить к разработке приложения. Вы можете использовать файлы CSS и JavaScript, размещенные на CDN, на собственном сервере или файлы, установленные вместе с Dreamweaver.

Примечание.

Чтобы узнать, где расположены связанные файлы, см. теги <link> и <script src> в представлении кода.

Вставьте компоненты jQuery Mobile из панели «Вставка»

Вставьте компоненты jQuery Mobile из панели «Вставка» на HTML-страницу. Файлы jQuery Mobile CSS и JavaScript определяют стиль и поведение компонентов.

Сведения о CDN и локальных файлах jQuery Mobile

CDN

CDN (сеть доставки содержимого) является компьютерной сетью, в которой содержатся копии данных, размещенные в различных точках сети. При создании веб-приложения с помощью URL-адреса сети CDN для приложения используются файлы CSS и JavaScript, указанные в этом URL-адресе. По умолчанию Dreamweaver использует сеть CDN jQuery Mobile.

Кроме того, вы также можете использовать URL-адреса сетей с других сайтов, например Microsoft и Google. Измените расположение сервера с файлами CSS и JavaScript, указанными в тегах <link> и <script src>, в представлении кода.

Файлы, загружаемые из сети CDN, доступны только для чтения.

Локальные файлы jQuery Mobile

При установке Dreamweaver копии файлов jQuery Mobile переносятся на компьютер. HTML-страница, которая открывается при выборе начальной страницы jQuery Mobile, связана с локальными файлами CSS, JavaScript и графическими файлами.

Начальные страницы jQuery Mobile

В Dreamweaver имеются следующие начальные страницы для создания веб-приложения:

jQuery Mobile (CDN)

Используйте эту начальную страницу, если библиотеку jQuery Mobile планируется разместить в сети CDN.

 

jQuery Mobile (локальный)

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

 

jQuery Mobile (PhoneGap)

Используйте эту начальную страницу, если веб-приложение при развертывании в качестве приложения для мобильного устройства использует собственные функции мобильного устройства. Дополнительные сведения см. в разделе Упаковка веб-приложений.

 

 

Используйте начальные страницы для создания приложения для мобильных устройств.

  1. Выберите «Файл» > «Создать».

  2. Выберите один из следующих пунктов, исходя из своих потребностей:

    • «Страница из образца» > «Начальные страницы Mobile» > «jQuery Mobile (CDN)».

    • «Страница из образца» > «Начальные страницы Mobile» > «jQuery Mobile (локальный)».

     

  3. Нажмите кнопку «Создать».

    На открывшейся странице установите флажок «Следовать ссылкам непрерывно» («Вид» > «Параметры интерактивного просмотра») и переключитесь на интерактивный просмотр. Используйте компоненты навигации, чтобы проверить, как работает приложение.

    Чтобы посмотреть, как страница отображается на устройствах разных размеров, воспользуйтесь командами из меню «Многоэкранный». Отключите интерактивный просмотр и перейдите назад в представление дизайна.

  4. На панели «Вставка» («Окно» > «Вставка») выберите jQuery Mobile. Будут отображены компоненты, которые можно добавить в веб-приложение.

  5. В представлении дизайна поместите курсор в то место, куда требуется вставить компонент, а затем щелкните компонент на панели «Вставка». В открывшемся диалоговом окне настройте компоненты с помощью параметров.

  6. (jQuery Mobile — локальный) После сохранения HTML-файла файлы jQuery Mobile, включая графические файлы, будут скопированы в папку, где находится HTML-файл.

Просмотрите страницу в режиме интерактивного просмотра. Некоторые классы CSS применяются только в режиме интерактивного просмотра.

Создание веб-приложения для мобильных устройств с новой страницы

Компонент «Страница» является контейнером для всех остальных компонентов jQuery Mobile. Перед тем как вставлять другие компоненты, добавьте компонент «Страница».

  1. Выберите «Файл» > «Создать».

  2. Выберите «Пустая страница» > «HTML».

    Некоторые компоненты jQuery Mobile используют атрибуты HTML5. Чтобы обеспечить соответствие HTML5 во время проверки, необходимо выбрать HTML5 в качестве DocType.

  3. На панели «Вставка» («Окно» > «Вставка») в меню выберите jQuery Mobile. На панели появится компонент jQuery Mobile.

  4. Перетащите компонент «Страница» в представление дизайна из панели «Вставка».

  5. В диалоговом окне «Файлы jQuery Mobile» выберите один из следующих параметров.

    Удаленный (CDN)

    Если требуется подключиться к удаленному серверу CDN, на котором размещены файлы jQuery Mobile. Используйте параметр сайта jQuery по умолчанию, если сайт с файлами jQuery Mobile задан не был. Также можно использовать другие серверы CDN.

    Локальный

    Будут отображены файлы, которые доступны в Dreamweaver. Чтобы указать другую папку, нажмите кнопку «Обзор» и перейдите в папку, в которой находятся файлы jQuery Mobile.

    Файлы CSS и JavaScript копируются в локальный временный каталог, пока HTML-файл не будет сохранен на компьютере. После сохранения HTML-файла все связанные с ним файлы jQuery Mobile и графические файлы копируются в папку, расположенную в корневой папке сайта.

  6. Введите свойства компонента «Страница».

  7. В представлении дизайна поместите курсор в то место, куда требуется вставить компонент, а затем щелкните компонент на панели «Вставка». В открывшемся диалоговом окне настройте компоненты с помощью параметров.

Просмотрите страницу в режиме интерактивного просмотра. Некоторые классы CSS применяются только в режиме интерактивного просмотра.

Использование пользовательских файлов и папок

Для приложения можно создавать собственные файлы CSS и JS. Файлы должны иметь имена jquery.mobile.js, jquery.mobile.css и jquery.js

При использовании пользовательских папок выполните следующие действия.

  1. Загрузите необработанную версию базовой библиотеки jQuery 1.5 с веб-сайта http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

  2. Сохраните файл в корневой папке, содержащей другие ресурсы.

 

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет