Мобільний додаток Дизайн / Dev Користувальницькі теми з jQuery Mobile

У нашому попередньому навчальному посібнику jQuery Mobile я вніс більшу частину основних рамок і як налаштувати свій перший веб-сайт. Бібліотека JS є одночасно легкою і простий у виборі з точки зору труднощів навчання. Існує також загальна таблиця стилів CSS, включена з файлами, щоб ви могли додатково налаштувати елементи у вашій компонуванні.

Для цього другого сегмента я хотів би провести трохи часу, заглибившись у цю ідею jQuery Mobile themes. Вся індустрія дизайну була революціонізована JQM, і процес побудови мобільного шаблону з нуля був значно покращений. jQuery Mobile - це не просто бібліотека сценаріїв, а ціла наземна основа для створення та створення ефективних мобільних шаблонів.

Зміст таблиці стилів за промовчанням

Я повинен почати з уточнення, який саме тип CSS-коду включено до файлів за замовчуванням. Таблиця стилів з jQM 1.0 була розділена на два основні сегменти - структура і теми.

Структурний код - це матеріал, який ви можете ігнорувати. Це використовується для встановлення полів, відступу, висоти / ширини, варіантів шрифту, а також багатьох інших налаштувань браузера. Внутрішні теми потім розділяються з A-E, кожен з яких контролює різні візуальні ефекти у вашому дизайні. Це може включати кольори фону, градієнти, тіні для падіння тощо.

Кожен з цих елементів внутрішньої теми також можна назвати зразки. Коли ви створюєте мобільний шаблон, зазвичай ви будете дотримуватися однієї теми. Але практично в кожному сценарії дизайн може бути покращений за допомогою різних колірних схем. За замовчуванням таблиця стилів включає лише зразки A-E, але ви можете створювати зразки F-Z, щоб додати ще 21 альтернативу до вашої бібліотеки тем. Тільки щоб знову пояснити ці терміни a теми вважається 1 єдиний файл CSS, який може включати до 26 різних зразки позначені A-Z.

Стилі перемикання

Якщо ви не вкажете будь-які зразки, тоді jQuery Mobile буде дотримуватися зразка А за замовчуванням. Якщо ви ще не знали, що документи JQuery Mobile використовують атрибути даних HTML5 для багатьох внутрішніх функцій. Один з них включає в себе зміну зразків за допомогою атрибута тему даних. Перевірте приклад коду нижче, щоб побачити, що я маю на увазі.

  Сторінка за замовчуванням jQM
 
  Ось деякий внутрішній вміст.

Зверніть увагу, що я помістив атрибут data-theme на кореневу сторінку div. Це означає, що новий колір зразка впливатиме на все, що включає в себе як заголовки, так і області вмісту. Я міг би додатково включити data-theme = "c" в заголовку div, щоб змінити лише цей вміст з решти моєї сторінки.

Компоненти зразка

Це має бути досить простим, як реалізувати ці різні зразки в межах одного макета. Тепер давайте поглянемо на код CSS jQM, щоб ми могли розбити окремі компоненти зразка. Перевірте останній jQuery Mobile 1.4.5 CSS файл, розміщений на їх власному CDN.

Ви повинні помітити, як кожний зразок відокремлюється окремим коментарем, і кожен з внутрішніх класів закінчується відповідним написом. Наприклад .ui-bar-a і .ui-тіло-a за замовчуванням застосовуються до смуг верхнього та нижнього колонтитулів та областей вмісту. Більшість властивостей реалізують скидання кольорів шрифту та посилання, градієнтів фону та інших дрібних деталей. Я включив просто ui-bar-a коди, щоб дати вам уявлення про те, які елементи ми націлюємо.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; фон: # 111111; колір: #ffffff; font-weight: bold; текстова тінь: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (лінійний, лівий верхній, лівий нижній, від (# 3c3c3c), до (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-лінійний градієнт (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -моз-лінійний градієнт (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-лінійний градієнт (# 3c3c3c, # 111); / * IE10 * / background-image: -o-лінійний градієнт (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: лінійний градієнт (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button font-family: Helvetica, Arial, sans- зарубок;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link колір: # 7cc4e7 / * a-bar-link-color * /; font-weight: bold;  .ui-bar-a .ui-посилання: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: активний color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: відвіданий color: # 2489CE / * a-bar-link-visited * /;

Якщо ви просто хочете створити власний зразок, рекомендую базувати шаблон на одному з оригіналів. Процес буде набагато більш гладким, якщо ви почнете писати коди в новому документі CSS. Ви не будете мати труднощів редагування в оригінальному файлі, і ви можете почати працювати на чистому аркуші. Але ключові області, на які ви хочете зосередитися, включатимуть наступне:

колонтитули верхнього та нижнього колонтитулів
вміст тіла & текст сторінки
Стилі списку
Стан кнопки за замовчуванням / hover / active
елементи керування введенням (додатково)

Кодування нового дизайну планок

З того ж CSS-файлу ми розглянули раніше копіювати / вставити весь зразок коду (рядки 12-150) у новий файл. Ми можемо використовувати назву зразка G для реалізації цих нових стилів. Тепер після копіювання коду потрібно перейменувати кожен екземпляр класу, що закінчується -a до -g, так як jQuery Mobile визнає, які стилі використовувати.

Почнемо з перепроектування панелі заголовка bg, щоб імітувати більш звичний градієнт iOS. Це може бути зроблено виключно в межах .ui-bar-g селектора. Ми хочемо змінити властивості фону та фонового зображення, щоб змінити ефекти градієнта. Перевірте мій код нижче і демонстраційний екран нового градієнта.

.ui-bar-g кордон: 1px твердий # 2d3033 / * a-bar-border * /; ліворуч: 0px; прикордонний правий: 0px; фон: # 6d83a1; колір: #fff / * a-bar-color * /; font-weight: bold; text-shadow: 0 / * a-бар-тінь-х * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (лінійний, 0% 0%, 0% 100%, від (# b4bfce), колір-стоп (0.5, # 899cb3), колір-стоп (0.505, # 7e94b0), до (# 6d83a1)); background-image: -webkit-лінійний градієнт (зверху, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-лінійний градієнт (верхній, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (зверху, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-лінійний градієнт (зверху, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: лінійний градієнт (зверху, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Я використовую схему синього кольору, яку можна знайти в більшості програм iOS за замовчуванням. Моє тло спочатку встановлено на суцільний колір для пристроїв, які не можуть відображати градієнти CSS3. Тоді нижче я використовую кольорові зупинки навколо маркера 50%, щоб відтворити традиційний ефект глянцевого блиску в стилі Apple. Також всередині одного і того ж селектора я трохи змінив текст тінь з більш тонкий колір і діапазон.

Кнопки та текстові ефекти

При кодуванні зразків важливо враховувати, які області інтерфейсу потребують уваги. У цьому заголовку панель заголовка виглядає чудово, але остання зміна, яку я хотів би зробити, відповідатиме стилям кнопок, ближче до тих, які стосуються додатків iOS.

.ui-btn-up-g кордон: 1px суцільний # 375073; фон: # 4a6c9b; font-weight: bold; колір: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: немає; -webkit-box-shadow: немає; -moz-box-shadow: немає; background-image: -webkit-gradient (лінійний, 0% 0%, 0% 100%, від (# 89a0be), колір-стоп (0.5, # 5877a2), колір-стоп (0.505, # 476999), до (# 4a6c9b)); background-image: -webkit-лінійний градієнт (зверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -моз-лінійний градієнт (зверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-лінійний градієнт (зверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -о-лінійний градієнт (зверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: лінійний градієнт (зверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); кордон-радіус: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-внутрішній, .ui-btn-hover-g .ui-btn-внутрішній, .ui-btn-down-g .ui-btn-internal кордон-радіус: 0; -вебкіт-кордон-радіус: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; фон: # 2463de; font-weight: bold; колір: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: немає; -webkit-box-shadow: немає; -moz-box-shadow: немає; background-image: -webkit-gradient (лінійний, 0% 0%, 0% 100%, від (# 779be9), колір-стоп (0.5, # 376fe0), колір-стоп (0.505, # 2260dd), до (# 2463de)); background-image: -webkit-лінійний градієнт (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-лінійний градієнт (зверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-лінійний градієнт (зверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-лінійний градієнт (зверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: лінійний градієнт (зверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); кордон-радіус: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Область коду, яку ми редагуємо зараз, знаходиться в класах клавіш UI. Є 3 різних режими, які стосуються: .ui-btn-up-g, .ui-btn-hover-g, і .ui-btn-down-g. Я в основному зосереджуюся на стандартних (btn-up) і hover (btn-hover) ефектах, редагуючи тіньовий і лінійний градієнти. Також я розширив ефект закруглених кутів, так що кнопки виглядають більш прямокутними.

Через це мені потрібно було видалити радіус внутрішнього кордону з класу з назвою .ui-btn-внутрішній. Цей клас прикріплюється до елемента span в кожній прив'язки в рядку заголовка. Без скидання властивостей радіусу кордону ви помітите невеликі глюки в конструкції кожного разу, коли ви наведете на кнопку. Оскільки ви витрачаєте більше часу на кодування в темах jQuery Mobile, ви запам'ятаєте ці маленькі нюанси для майбутніх проектів.

Вступ до ThemeRoller

Якщо вам сподобається забруднення рук в коді, я настійно рекомендую дотримуватися спеціальних змін. Мало того, що ви маєте більше контролю, але набагато простіше налагоджувати проблеми в CSS, якщо ви самі внесли зміни. Але для багатьох дизайнерів цей процес втомився і просто займе більше часу, ніж потрібно. На щастя, команда jQuery Mobile випустила онлайн-редактор під назвою ThemeRoller.

На цій сторінці ви маєте доступ до редагування перших трьох зразків A-C або навіть для створення власних зразків. Якщо ви подивитеся на ліву бічну панель, ви зможете перемикатися між цими трьома параметрами або швидко внести зміни до параметрів глобальної теми. До них належать властивості CSS, такі як радіуси кордону, тіні вікна або типові шрифти сторінки. Зверніть увагу на те, що ви обираєте будь-які з попередньо встановлених зразків, які ми можемо редагувати лише на тих самих ділянках, що й раніше - верхня / нижня смуги, вміст тіла та стан 3 кнопок.

Але моя улюблена функція повинна бути прямим доступом до зразків Adobe Kuler. Ви можете створити декілька колірних схем у вашому обліковому записі Kuler та імпортувати їх у ThemeRoller. Інтерфейс підтримує функцію перетягування і перетягування, тому можна легко випробувати кілька різних ідей за лічені хвилини.

У кінцевому підсумку не існує абсолютного методу належного створення зразків jQM. Деякі дизайнери віддають перевагу жорсткому коду CSS, в той час як інші будуть любити інтуїтивне веб-додаток ThemeRoller. До тих пір, поки ви стежите за структурою класу, ви повинні отримати ті самі результати.

Корисні ресурси

jQuery Mobile Themes - документація
Використання та налаштування тем для jQuery Mobile