Зміст
- 01. Бари (.ui-bar-?)
- 02. Блоки вмісту (.ui-body-?)
- 03. Кнопки та перегляди списків (.ui-btn-?)
- 04. Змішування та узгодження зразків
- 05. Активний стан на всьому сайті
- 06. Значки за замовчуванням
- 07. Створення та використання власної теми
- 08. Що таке ThemeRoller?
- 09. Використання ThemeRoller
- 10. Попередній перегляд
- 11. Кольори
- 12. Інспектор
- 13. Інструменти
- 14. Створення теми для Notekeeper
- 15. Експорт вашої теми
- Необхідні знання: HTML, деякі CSS та JavaScript
- Потрібно: Не більше, ніж ваш улюблений редактор HTML та браузер
- Час проекту: Дві години
- Файл підтримки
Це відредагований уривок з глави 11 jQuery Mobile Web Development Essentials, опублікований Packt Publishing.
Тема в jQuery Mobile проста і проста у використанні для розробника, але досить складна за кадром. На щастя, рідко буває момент, коли вам потрібно буде знати все, що робиться для вас. Однак варто трохи нашого часу, щоб зрозуміти, як це працює.
JQuery Mobile постачається з набором тем, що складається з п’яти зразків кольорів, кожен з яких пов’язаний з літерою A-E. Тема містить ряд базових класів CSS, які можна застосовувати за бажанням майже до будь-якого елемента, і вони містять загальні налаштування ширини, висоти, радіуса межі, тіней. Окремі зразки містять конкретну інформацію про колір, шрифти тощо.
До п’яти оригінальних зразків від F-Z можна додати додаткові зразки, або оригінальні зразки можна замінити або замінити за бажанням. Ця система забезпечує загалом 26 різних зразків, дозволяючи мільйони можливих комбінацій кольорів, стилів та візерунків теми. Ви застосовуєте тему jQuery Mobile до вибраного елемента, додаючи атрибут data-theme з літерою потрібної теми:
Зазвичай розробники обирають використовувати метод атрибутів data-theme при застосуванні стилів, але також можна прикріпити імена класів CSS безпосередньо до елементів вашої сторінки для більш детального контролю. Існує кілька основних префіксів, які забезпечують таку гнучкість.
01. Бари (.ui-bar-?)
Префікс стовпчика, як правило, застосовується до заголовків, колонтитулів та інших областей, що мають велике значення:
02. Блоки вмісту (.ui-body-?)
Блоки вмісту зазвичай застосовуються до областей, де передбачається розміщення тексту абзацу. Його колір допомагає забезпечити максимальну читабельність із кольором тексту, розміщеним проти нього:
03. Кнопки та перегляди списків (.ui-btn-?)
Кнопки та перегляди списків є двома найважливішими елементами бібліотеки jQuery Mobile, і ви можете бути впевнені, що команда не поспішала, виправивши їх. Префікс .ui-btn також включає стилі вгору, вниз, наведення та активні стани:
04. Змішування та узгодження зразків
Однією з приємних речей щодо тематизації в jQuery Mobile є те, що дочірні елементи успадковуються від своїх батьків, якщо не вказано інше. Це означає, що якщо ви помістите кнопку без власного атрибута теми даних всередину панелі верхнього або нижнього колонтитула, ця кнопка використовуватиме ту ж тему, що і її батьківська. Злий, а?
Також цілком прийнятно і навіть заохочується розміщувати елемент за допомогою одного зразка, а дочірній елемент елемента за допомогою іншого зразка. Це може допомогти елементу виділитися більше, відповідати іншій частині програми або будь-яким іншим міркуванням, які обере розробник. Це можливо, і більше того, це просто. Просто помістіть кнопку (або інший елемент) всередині заголовка та призначте їй власний атрибут data-theme:
05. Активний стан на всьому сайті
jQuery Mobile також застосовує глобальний активний стан для всіх елементів. Цей активний стан використовується для кнопок, елементів форми, навігації та в будь-якому місці, де потрібно вказати, що на даний момент щось вибрано. Єдиний спосіб змінити це значення кольору - це встановити (або замінити) його за допомогою CSS.Клас CSS для активного стану має відповідну назву .ui-btn-active:
06. Значки за замовчуванням
До набору jQuery Mobile включено 18 піктограм, які охоплюють широкий спектр потреб для розробників. Набір піктограм білий на прозорому, який jQuery Mobile накладає на напівпрозоре чорне коло, щоб забезпечити контраст проти всіх зразків. Щоб додати піктограму, вкажіть атрибут data-icon із назвою потрібної піктограми:
jQuery Mobile також надає можливість розміщувати піктограми у верхній, правій, нижній або лівій частині кнопки за допомогою атрибута data-iconpos = "[верхній, правий, нижній, лівий]", причому ліве значення - розміщення за замовчуванням. Розробники також можуть відображати піктограму самостійно, без тексту, вказавши data-iconpos = "notext":
Розгортання спеціальних піктограм також можливо, і це буде розглянуто далі в цьому розділі.
07. Створення та використання власної теми
Ми вже обговорювали, наскільки потужним є тематизування в jQuery Mobile. Це робить тривіальним розробляти багатий мобільний веб-сайт у простому та елегантному стилі. Ще потужнішою є можливість створити власну бібліотеку зразків, яка може бути використана для того, щоб зробити вашу програму чи веб-сайт справді унікальними. До розробки власної теми можна підійти одним із наступних двох способів:
- Завантажте та відкрийте наявний CSS-файл jQuery Mobile та відредагуйте його до душі.
- Наведіть веб-браузер на ThemeRoller для jQuery Mobile.
Ми зосередимося виключно на другому варіанті, бо, будьмо чесними, навіщо перебирати весь цей CSS, коли за 10 хвилин можна вказувати, клацати та перетягувати шлях до нової теми, повної зразків? Давайте з’ясуємо, що таке ThemeRoller.
08. Що таке ThemeRoller?
ThemeRoller для jQuery Mobile - це розширення веб-програми, створеної для проекту інтерфейсу jQuery. Це дозволяє користувачам швидко зібрати тему, повну зразків, за лічені хвилини, використовуючи перетягування кольорів. Він має інтерактивний попередній перегляд, щоб ви могли одразу побачити, як зміни впливають на вашу тему. Він також має вбудований інструмент інспектора, який допоможе вам заглибитися в найдрібніші деталі (якщо ви їх хочете). Він також інтегрується з Adobe® Kuler®, інструментом управління кольором. Ви можете завантажити свою тему після того, як закінчите, ви можете поділитися нею з іншими за допомогою спеціальної URL-адреси, а також зможете повторно імпортувати минулі теми для останньої настройки. Це потужний інструмент і є ідеальним доповненням до jQuery Mobile.
Однією з ознак п’яти зразків за замовчуванням є те, що команда jQuery Mobile витратила досить багато часу, працюючи над зручністю та зручністю читання. Зразки варіюються від найвищої контрастності (A) до найнижчої контрастності (E). У межах однієї теми області, які мають найбільший контраст, - це області, найбільш помітні на сторінці. Сюди входять заголовок (і заголовки списку) та кнопки. Створюючи власну тему, гарною ідеєю мати це на увазі. Ми завжди хочемо зосередитись на зручності використання в нашому додатку, чи не так? Що хорошого в гладкому додатку, якщо його ніхто не може прочитати через поганий вибір кольорів?
09. Використання ThemeRoller
Перше, що ви побачите, завантажуючи ThemeRoller, це гладкий заставний екран, а потім корисний екран Початок роботи:
На екрані «Початок роботи» є кілька корисних порад, тому перегляньте його, перш ніж натискати кнопку «Отримати»:
Після того, як всі початкові екрани зникнуть, вам буде представлений основний інтерфейс:
ThemeRoller розбито на чотири основні області: попередній перегляд, колір, інспектор та інструменти. Кожен із них містить важливу функціональність, яку нам потрібно переглянути. Ми почнемо з розділу Попередній перегляд.
10. Попередній перегляд
Якщо ви не завантажуєте існуючу тему, в області попереднього перегляду будуть представлені три повні, однакові та інтерактивні сторінки jQuery Mobile, упаковані різними віджетами:
Наведіть курсор миші на них, і ви побачите, що кожна сторінка функціонує. Заголовок на кожній сторінці містить лист із зазначенням того, який зразок контролює його зовнішній вигляд.
11. Кольори
Угорі сторінки ви побачите серію кольорових чіпів разом із двома повзунками та кнопкою перемикання. Праворуч ви побачите ще десять кольорових фішок, які повинні бути порожніми. Вони присвячені нещодавно використаним кольорам і будуть порожніми, доки ви не вибрали колір:
Під кольоровими чіпами розташовані два повзунки з написом Легкість і Насиченість. Повзунок легкості регулює світлі та темні тони серії кольорових зразків, тоді як насиченість робить кольори більш-менш яскравими. У сукупності користувач повинен мати можливість наблизити майже будь-який колір, який він вибере. Щоб використовувати кольори від Kuler, клацніть на текстове посилання, позначене зразками Adobe Kuler.
Кожен з кольорових чіпів можна перетягнути на будь-який елемент в області попереднього перегляду. Це робить розробку набору зразків надзвичайно простою. Зауважте, що багато стилів jQuery Mobile перекриваються, наприклад, панель заголовків у верхній частині сторінки отримує той самий стиль, що і заголовок списку. Налаштуйте кольори за бажанням, а потім перетягніть кожен чіп на елемент на сторінці. Пам'ятайте, що кожна окрема сторінка - це власний зразок, тому будьте обережні щодо того, як ви вибрали поєднання кольорів.
12. Інспектор
У крайньому лівому куті інтерфейсу знаходиться панель інспектора, розділена на дві частини. У верхній частині містяться кнопки, що дозволяють розробникам завантажувати свою тему, імпортувати існуючу тему та ділитися посиланням на свою тему. Також є посилання на довідку для людей, які не придбали цю книгу:
У нижньому розділі міститься ряд вкладок із написом Глобальний, А, В, С та +. Кожна з цих вкладок містить панель акордеонів, яка містить усі значення для окремого зразка, за винятком вкладки Глобальна, яка застосовується до всіх зразків.
Виберіть вкладку «Глобальний», потім натисніть «Активний стан», і панель акордеона розгорнеться, щоб відобразити налаштування для активного стану для всієї вашої теми. Параметри включають колір тексту, тінь тексту, фон та межу. Зміна значення в глобальному масштабі змушує кожен поточний (і майбутній) зразок відображати нову настройку.
Додані зразки можна додати до вашої теми двома способами. Натискання вкладки + у верхній частині інспектора додає новий зразок на останньому місці у вашій темі. Ви також можете додати новий зразок, натиснувши кнопку Додати зразок, розташовану внизу області попереднього перегляду. Зразки можна видалити, вибравши вкладку з зразком, який потрібно видалити, а потім клацнувши посилання Видалити, розташоване праворуч від назви зразка. Зверніть увагу, що видалення зразка у верхній частині стека призведе до перейменування решти зразків.
13. Інструменти
У самому верху сторінки є ряд кнопок. Ці кнопки дозволяють виконувати різноманітні завдання, які ми розглянемо за мить, але спочатку уважніше розгляньте самі кнопки:
Ви помітите такі кнопки: перемикач, що дозволяє переключатися між версією 1.1 (поточна) та версією 1.0.1, скасувати / повторити, та перемикач для інспектора. Якщо цей перемикач увімкнено, ви можете перевіряти будь-який віджет у області попереднього перегляду. Наведення курсора на віджет виділяє цей елемент синім полем. Натискання елемента призведе до розширення меню акордеону в області Інспектор, щоб відобразити налаштування, характерні для цього елемента.
Є чотири додаткові кнопки, які дозволяють завантажити вашу тему, імпортувати або оновити раніше створену тему, поділитися своєю темою з іншими та кнопку довідки.
14. Створення теми для Notekeeper
Тепер, коли ми знайомі з інтерфейсом ThemeRoller, як щодо того, щоб створити свою першу тему? Замість того, щоб створювати його абстрактно, давайте створимо той, який ми фактично використовуватимемо для програми Notekeeper, яку ми створили раніше. Почнемо з простої модифікації однієї з існуючих тем, яка постачається з jQuery Mobile. Команда виявилася досить люб’язною, щоб дозволити користувачам імпортувати теми за замовчуванням як початкове місце для нових тем, тому саме до цього ми підемо першими. Натисніть кнопку Імпортувати у верхньому лівому куті вікна, і ви отримаєте поле, що дозволяє вставити вміст існуючої теми:
Імпортуйте тему за замовчуванням, клацнувши посилання у верхньому правому куті під відповідною назвою Імпортувати тему за замовчуванням. Після того, як текстове поле заповниться CSS, натисніть кнопку «Імпортувати». Область попереднього перегляду перезавантажить і відобразить зразки від А до Е.
Ми зосередимо свої зусилля на зміні білого зразка, D, оскільки це найближче до нашої кінцевої мети. Оскільки ми воліли б використовувати зразок A як назву, давайте видалимо інші зразки, щоб залишився лише D. Пам'ятайте, що ThemeRoller перейменовує зразки під час видалення інших. Це означає, що коли ви видаляєте зразок A, B стає A, C стає D тощо.
Продовжуйте рухатися, поки зразок, який був D, тепер не перейшов у положення A. Нарешті, видаліть зразок B (який раніше був зразком E), щоб у нас залишився зразок A:
Цей зразок приємний на вигляд, але трохи м’який. Давайте введемо трохи кольору, змінивши заголовок на приємний зелений. Найпростіший спосіб визначити, які значення слід змінити для будь-якого елемента, - це використовувати інспектор. Переведіть інспектор на Увімкнено вгорі, а потім клацніть де завгодно на заголовку теми А. Ви дізнаєтесь, чи правильно це зробили, якщо зліва вибрано вкладку А, а панель Верхній / нижній колонтитул розширюється:
Змінити колір можна одним із декількох способів. Ви можете перетягнути кольорову мікросхему зверху прямо на фон. Ви також можете перетягнути кольорову мікросхему на поле введення. Нарешті, ви можете ввести значення вручну. Зверніть увагу, що при натисканні на поле, що містить значення кольору, ви отримуєте гладкий підбір кольору. Вперед і змініть значення в полях введення на цій панелі на значення, показані на попередньому скріншоті.
Хороший вигляд, але зараз синій від активного стану теми стикається з нашим зеленим. Використовуючи інструмент інспектора, клацніть один раз на розділі Увімкнення на перемикачі Увімк. / Вимк. Це має призвести до розширення панелі активного стану на вкладці Глобальний. Ми змінимо синій на приємний теплий сірий. Тепер глобальна панель повинна виглядати приблизно так, як показано на наступному знімку екрана:
Єдине, що не дає нашій новій темі виглядати найгарячішим - синє текстове посилання в абзаці вгорі. Повертаючись до нашого надійного інспектора, давайте клацніть безпосередньо на посилання, яке розгорне панель «Основний вміст» на вкладці «А». Тепер, для тих, хто вже знайомий з CSS, ви знаєте, що не можна просто змінити колір посилання, не змінивши також наведення курсору, відвідане: наведення та активні стани. Проблема полягає в тому, що немає жодних можливостей для внесення цих змін, але ThemeRoller вас уже охопив. Клацніть + праворуч від поля введення Link Link, щоб відобразити решту параметрів, а потім змініть кольори, як показано на наступному скріншоті:
І це все. Не соромтеся вносити додаткові зміни у свою тему під час вивчення області інспектора. Змінюйте все, що вам подобається, зараз це лише біти та байти. Пам’ятайте, однак, що на даний момент опції скасування немає. Якщо вам щось дуже подобається, подумайте про те, щоб записати значення, щоб не втратити їх, або експортувати як є. Говорячи про...
15. Експорт вашої теми
Перш ніж ми фактично експортуємо свою тему, слід зазначити одну річ. Пам’ятаєте сплеск із "корисною" інформацією? Виявляється, є одна частина, яка є не рекомендацією, а вимогою.
Ми рекомендуємо створювати теми принаймні з 3 зразками (A-C).
Щоб наша тема правильно застосовувалась до нашого додатку Notekeeper, нам потрібно продублювати наш одинарний зразок (буква А) до зразків B і C. На щастя, це легко зробити. Виберіть вкладку A у верхній частині інспектора, а потім двічі клацніть вкладку +. Що ви повинні побачити, це три однакові зразки, і тепер ми закінчили.
Тепер, коли ми закінчили нашу тему, ми експортуємо її для використання в нашому додатку Notekeeper. Це простий процес, який починається натисканням кнопки «Завантажити тему», яка знаходиться посередині сторінки у верхній частині інтерфейсу. Вам буде запропоновано поле, в якому ви зможете назвати свою тему, деяку інформацію про те, як застосувати свою тему, та кнопку із написом Download Zip. Після присвоєння назви нашої теми Notekeeper натисніть кнопку «Завантажити Zip», і ви отримаєте смачний шматочок у папці для завантажень.
Витягніть вміст ZIP-файлу, і ви побачите таку структуру каталогів:
- index.html
- themes / Notekeeper.css (Нестиснута версія вашої теми) Notekeeper.min.css (Стиснута версія. Використовуйте це у виробництві) images / ajax-loader.gif icons-18-black.png icons-18-white.png піктограми -36-black.png піктограми-36-white.png
Файл HTML у верхній частині дерева містить інформацію про те, як реалізувати свою тему, а також кілька віджетів, які підтверджують, що тема працює. Всі посилання відносні у файлі-прикладі, тому ви зможете перетягнути його у будь-яке вікно браузера та переглянути результати.
Кілька приміток щодо завантаження та реалізації тем:
1. Команда jQuery надає вам піктограми кнопок у цьому ZIP-файлі з певної причини. Тема вимагає, щоб ці зображення були відносно файлу CSS. Це означає, що якщо ви вже не використовуєте теми за замовчуванням, вам потрібно також включити папку із зображеннями, коли ви завантажуєте свою тему на свій веб-сайт, інакше значки не відображатимуться.
2. Зачекайте на нестиснуту версію вашої теми. Хоча ви не хочете використовувати його у виробництві через розмір, він вам знадобиться, якщо ви коли-небудь захочете редагувати його в ThemeRoller. На момент написання статті ThemeRoller не може імпортувати зменшений файл CSS.
Енді Метьюз є розробником додатків понад 16 років і має навички користувальницького інтерфейсу / UX, графічного дизайну та програмування. Він є спікером, розробником із відкритим кодом, і він мешкає в Нешвілі, Теннессі, зі своєю сім'єю. Він має @commadelimited у Twitter.
Реймонд Кемден - старший євангеліст-розробник Adobe. Його робота зосереджена на веб-стандартах, мобільній розробці та ColdFusion. Він є автором публікацій та виступає на конференціях та в групах користувачів на різні теми. Слідуйте за ним на @cfjedimaster.
