Dreamweaver та jQuery Mobile Integration

• Може 1, 2024

За останні кілька років Dreamweaver^R надається все більша кількість функцій для створення мобільного веб-контенту та мобільних додатків. Це нове оновлення до CS6 не є винятком. Dreamweaver CS6 має покращений робочий процес із функціями jQuery Mobile.

Почати новий проект для мобільних пристроїв просто, за допомогою нової сторінки Сторінка з зразка в діалоговому вікні Новий документ. Ви можете вибрати зразок jQuery Mobile з папки Mobile Starters. Ця зразкова сторінка постачається з деякими попередньо вбудованими графічними, css та JavaScript-файлами.

З цієї прикладної сторінки ми можемо почати будувати наш проект, додаючи елементи до сторінки.

1. На панелі "Вставка" ми виберемо jQuery Mobile з меню категорії. Це відобразить попередньо вбудовані компоненти.
   
   
2. Щоб додати новий компонент, ми розмістимо наш курсор у місці, де буде доданий новий елемент дизайну, та натиснемо на один із компонентів у списку. Для нашого прикладу виберемо слайдер.
   
   Dreamweaver автоматично додасть код для слайдера на нашу сторінку. У режимі "Живий перегляд" ми бачимо наше нове керування повзунками.
   
   

Але ця сторінка виглядає дещо загальною. У нас є швидкий і простий спосіб налагодити нашу сторінку за допомогою нової панелі мобільних зразків jQuery.

1. У меню Menubar натисніть Window - jQuery Mobile Swatches. Якщо ви ще не завантажили підтримувані графічні, css та JavaScript файли, ви побачите спливаюче діалогове вікно. Клацніть Копіювати, щоб завантажити файли.
   
   
2. Нова панель мобільних комутаторів jQuery порожня, поки ви не вибрали елемент на своїй вибірковій сторінці. Коли ви вибираєте елемент, на панелі відобразяться відповідні зразки, доступні для цього елемента. Якщо вибрати елемент заголовка, ми побачимо кілька тем заголовка.
   
   
3. Якщо ми переключимось на режим перегляду в прямому ефірі, ми можемо клацнути по кожному зразкам теми, щоб побачити попередній перегляд того, як вони виглядатимуть.
   
   

Ми можемо повторити це для всіх елементів дизайну на нашій сторінці. Коли ми це робимо, на панелі мобільних зразків jQuery відображатимуться відповідні зразки тем. Ми також можемо використовувати перемикач роздільної здатності для попереднього перегляду дизайну, як він виглядатиме на роздільній здатності робочого столу та планшета.

Якщо ми використовуємо посилання «Отримати більше тем» внизу панелі, відкриється браузер для веб-сайту ThemeRoller для jQuery Mobile.

* Adobe надіслала мені копію цього програмного забезпечення для ознайомлення.

Авторські права 2018 Adobe Systems Incorporated. Всі права захищені. Знімки екрана продуктів Adobe передруковані з дозволу Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst та Flash Paper є або є [a] зареєстрованою торговою маркою (ими), або торговою маркою (ими) Adobe Systems Incorporated у США та / або інших країнах.

Відео Інструкція: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Може 2024).