Dreamweaver и jQuery Mobile Integration

• May 8, 2024

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

Начать новый мобильный проект просто с новой опцией Page from Sample в диалоговом окне New Document. Вы можете выбрать образец jQuery Mobile из папки Mobile Starters. Этот образец страницы поставляется с некоторыми готовыми графическими файлами, CSS и JavaScript.

С этого примера страницы мы можем начать строить наш проект, добавляя элементы на страницу.

1. На панели «Вставка» мы выберем jQuery Mobile в меню категорий. Это покажет готовые компоненты.
   
   
2. Чтобы добавить новый компонент, мы поместим наш курсор в место, где будет добавлен новый элемент дизайна, и щелкнем по одному из компонентов в списке. Для нашего примера, давайте выберем Slider.
   
   Dreamweaver автоматически добавит код слайдера на нашу страницу. В режиме реального времени мы видим наш новый элемент управления слайдером.
   
   

Но эта страница выглядит немного обобщенно. У нас есть быстрый и простой способ оформить нашу страницу с помощью новой панели jQuery Mobile Swatches.

1. На панели инструментов нажмите «Окно - мобильные образцы jQuery». Если вы еще не загрузили вспомогательные графические файлы, файлы CSS и JavaScript, вы увидите всплывающее диалоговое окно. Нажмите кнопку Копировать, чтобы загрузить файлы.
   
   
2. Новая панель jQuery Mobile Swatches будет пустой, пока вы не выберете элемент на своей странице примера. При выборе элемента на панели отобразятся соответствующие образцы, доступные для этого элемента. Если мы выберем элемент заголовка, мы увидим несколько тем заголовка.
   
   
3. Если мы переключимся в режим Live view, мы можем щелкнуть по каждому образцу темы, чтобы увидеть, как они будут выглядеть.
   
   

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

Если мы воспользуемся ссылкой «Получить больше тем» в нижней части панели, браузер откроет веб-сайт ThemeRoller для jQuery Mobile.

* Adobe предоставила мне копию этого программного обеспечения для ознакомления.

Copyright 2018 Adobe Systems Incorporated. Все права защищены. Снимки экрана продукта Adobe перепечатаны с разрешения Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, содействие, увлечение, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.

Видео инструкция: Episode #042 - FullCalendar Events and Scheduling (May 2024).