Дизайн мобільних додатків / Посібник для початківців для JQuery Mobile

За останні 2-3 роки ми спостерігали значне зростання підтримки браузерів і ОС для мобільних веб-сайтів. Найбільш помітні на IOS і Android платформи Apple приходять на розум. Але інші, такі як PalmOS і Blackberry, все ще знаходяться в суміші. До недавнього часу дуже складно було зіставити одну мобільну тему на всіх цих платформах.

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

Функції та підтримка ОС

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

Підтримка змінюється між телефонами і розбивається на діаграму з 3 категорій від A-C. A - це верхній рівень, який може похвалитися повною підтримкою jQuery Mobile, B має все, крім Ajax, в той час як C - це базовий HTML з мало-до-ні JavaScript. На щастя, більшість популярних операційних систем повністю підтримуються - я додав список з декількох прикладів.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Якщо ви хочете дізнатися більше, спробуйте прочитати їх на офіційній сторінці документів. Це не написано в бруду і насправді відчуває себе дуже легко слідувати. Тепер зупинимося на основах написання мобільної сторінки jQuery і як ми можемо створити невелику програму!

Стандартний шаблон HTML

Щоб отримати перше робоче додаток для мобільних пристроїв, існує набір шаблонів, з яких ви повинні почати. Це включає в себе базовий код jQuery разом з мобільним JS і CSS, всі зовнішні хости з JQuery CDN. Перевірте мій приклад коду нижче.

Єдиними іноземними елементами тут повинні бути дві мета-теги. Вершина вікна перегляду тег оновлення мобільних браузерів для використання ефекту повного масштабування. Встановлення значення width = ширина пристрою встановить ширину сторінки точно на ширину екрана телефону. І краще за все це не вимикає функції масштабування, оскільки jQuery Mobile може адаптуватися до змінних макетів.

Наступний мета-тег X-UA-Compatible просто змушує Internet Explorer відображати HTML в останній ітерації. Старі браузери і особливо мобільні будуть намагатися обійти незнайомі помилки рендеринга.

Побудова змісту тіла

Тепер це те, де jQuery mobile може стати складним. Кожна сторінка HTML не обов'язково має бути однією сторінкою на мобільному сайті. Структура використовує атрибути даних HTML5, які можна створити за допомогою примхи шляхом додавання даних- заздалегідь. Подібним чином data-role = "page" може бути встановлено на декілька divs в одному файлі HTML, даючи вам більше однієї сторінки.

Потім ви переходите між цими сторінками за допомогою якірних посилань і унікального ідентифікатора. Ця установка є гарною ідеєю для базових, простих програм. Якщо вам потрібно всього 3-5 сторінок, то чому б не зберегти все це в одному файлі? Якщо ви не маєте багато письмового вмісту, у такому випадку спробуйте використати PHP, щоб заощадити час.

Перевірте приклад коду нижче, якщо ви втратили.

 
 
 
Верхня рядок заголовка
 
 
 
Показати іншу сторінку??
 
Підказка: натисніть кнопку нижче!
 
Про нас
 
  
 
 
 
Page 2 Тут
 
 
 
просто додатковий вміст.
 
Я маю на увазі, ви можете Повертайся в будь-який час.
 
 
   

Погляньте на якірну посилання на сторінці індексу. Зверніть увагу, я додав атрибут data-role = "кнопка" для налаштування посилання як кнопки. Але замість використання стилів за замовчуванням, які ми включаємо data-theme = "c". Це перемикає між 1 з 5 (теми a-e) шаблонів, які поставляються за замовчуванням як стилі CSS у jQ Mobile.

Моя кнопка також охоплює всю ширину сторінки. Щоб видалити поведінку, нам потрібно встановити елемент від блоку до вбудованого відображення. Атрибут для цього є data-inline = "true" які можна додати до будь-якої кнопки прив'язки.

Бари верхнього та нижнього колонтитулів

У верхній і нижній частині програм потрібно додати вміст верхнього та нижнього колонтитулів. Цей стиль дизайну часто приписується додаткам iOS, які вперше стали популярними за допомогою мобільного App Store від Apple. jQ Mobile використовує атрибути ролі даних для визначення верхнього та нижнього колонтитулів і вмісту сторінки. Давайте коротко розглянемо ці області.

Кнопки верхньої панелі

За замовчуванням верхня панель підтримує набір з двох (2) посилань аналогічно іншим мобільним додаткам. за замовчуванням iOS використовує a “назад” кнопка ліворуч і часто a “опції” або “config” праворуч.

 
 Налаштування 
Page 2 Тут
 
 

Наведений вище код зосереджується лише на контейнері div для сторінки "Про компанію" разом із вмістом заголовка. Додатковий атрибут HTML data-add-back-btn = "true" буде працювати лише після додавання до ролі даних сторінки. Мета полягає в тому, щоб автоматично включати кнопку "назад", яка працює подібно до кнопки назад вашого браузера.

Ми могли б додати кнопку "Назад" вручну з аналогічним кодом, який ми використовували в області вмісту. Але я відчуваю, що це вимагає набагато більше часу для налаштування, особливо на декількох сторінках. Всі посилання для якоря в розділі заголовка будуть за замовчуванням розташовані на позиціях лівої / правої кнопки. З допомогою class = "ui-btn-right" це знову встановило кнопку "Налаштування", щоб було вільне місце для кнопки "Назад". Крім того, я використовую вторинні стилі теми, щоб надати їй додаткові spunk!

Навігація колонтитулів

В області нижнього колонтитула багато хто не відчуває себе дуже корисним спочатку. Це місце, де можна зберігати речі, пов'язані з авторським правом, і більш важливі посилання, але їх можна так само легко додати в нижній частині області вмісту. Так що хорошого використовує колонтитул?

Добре кращий приклад я побачив використовує footer космос як система навігації де вкладок ланки з'являються управляти навігацією сторінки. Існує безліч варіантів, за допомогою яких можна вибирати повноекранні ефекти, додавати піктограми, налаштовувати розташування та інші атрибути. Але давайте просто побудуємо простий футер з 3 кнопками, щоб отримати уявлення про те, як це працює.

• Попередній перегляд демо-версії

Отже, тут є код нижнього колонтитула для розділу про сторінку. data-role = "navbar" повинні бути додані до контейнерного елемента, що містить невпорядкований список, а НЕ - елемент UL. Кожне посилання в списку розглядається як панель вкладок, яка потім розподіляється рівною мірою на основі загальної кількості посилань. Додатковий клас ui-тіло-b просто додає естетичні ефекти при перемиканні між декількома доступними стилями.

Якщо ви помітили на першій кнопці, у мене є атрибут data-direction = "reverse". Незважаючи на те, що я міг би використовувати назад кнопку налаштування, як раніше, щоб повернутися на домашню сторінку, я замість цього використовував ID сторінки #index. За промовчанням вікно програми перейде праворуч, яке виглядає досить липким, оскільки ви очікуєте, що анімація рухатиметься назад. Ви можете грати з ще більшою кількістю цих анімованих ефектів, якщо у вас є час. Перегляньте сторінку з інформацією про переходи у документації jQuery.

Ajax & Динамічні сторінки

Перший сегмент дійсно відкрив ключові моменти для створення мобільного додатка з jQuery. Але я хочу почати нову програму, яка завантажує дані з зовнішньої сторінки. Я буду використовувати дуже простий скрипт PHP для досягнення $ _REQUEST [] змінної і відображати невеликий Dribbble постріл відповідно. Наведене нижче зображення повинно дати вам уявлення про те, що ми збираємося будувати.

Спочатку я зроблю сторінку index.html на шаблоні за промовчанням. Для цього головного екрана я використовую налаштування перегляду списку для відображення кожного посилання в порядку. Це робиться в області вмісту за допомогою a data-role = "listview" атрибут у списку контейнера. Вирізаючи той самий заголовок, як і раніше, я додав весь мій код з цієї нової сторінки індексу нижче.

 
 
 
Жовтень 2011 р. Постріли
 
 
 
 
Перше зображення
 
Друге зображення
 
Третій образ
 
Четверте зображення
 
 
  
   

Кожна з опорних посилань у моєму перегляді списків вказує на той самий файл - index.php. Але ми переходимо в параметр imgid як змінна запиту. У файлі image.php ми беремо ID і перевіряємо його на 4 задані значення. Якщо будь-яке збігається, ми використовуємо відповідну URL-адресу зображення та назву, інакше ми просто покажемо постріл Dribbble за замовчуванням.

Скрипт завантажувача зображень

У скрипті image.php до цього моменту додано шаблон коду jQuery за замовчуванням. Це фактично поділяє дуже подібний верхній та нижній колонтитули, крім для додавання нашого заднього атрибута зв'язку data-add-back-btn = "true". Зверніть увагу, що ця кнопка відображатиметься лише в тому випадку, якщо ми прийшли з index.html. Спробуйте безпосередньо завантажити image.php і нічого не з'явиться, оскільки немає “назад” для переходу.

Я думаю, що ми можемо зробити трохи більше сенсу коду, вивчивши першу мою PHP логіку. Ми використовуємо a перемикач / випадок Метод перевірки проти 4 різних ідентифікаторів та назви заголовка, URL-адреси зображення та вихідної посилання джерела виконавця.

Все здається досить простим - навіть початківцям розробника PHP вдасться слідувати! І якщо ви не розумієте, що це не важливо для коду jQuery, так що не хвилюйтеся. Ми повинні перейти зараз і подивитися шаблон, який я побудував на цій новій сторінці. Весь HTML код буде додано після всього блоку PHP вище. Я використав ID “зображення” для контейнера і навіть налаштування заголовка, щоб змінитися з кожною новою фотографією.

 
 
 
 
 
 Переглянути оригінал
 
 
  
 

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

Незвичайний дизайн зі списком ескізів

Одним з останніх додаткових ефектів, які ми можемо реалізувати, є використання ескізів для відновлення сторінки лістингу. Я також збираюся розділити текст на поле заголовка та опису, щоб відобразити як назву ілюстрації, так і назву виконавця.

Для початку відкрийте Photoshop і створіть документ 80 × 80 px. Я збираюся швидко змінити розмір кожного зображення та зберегти мініатюри, щоб відповідати кожному з них. Потім оновлюючи елементи перегляду списку, ми повинні включити ще кілька елементів.

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

[Попередній перегляд у реальному часі]

 
 
  
Завдання Wunderkit
 
Себастьян Шеерер
 
  
Колегієееєєєєєєєєєє
 
Скотт Хілл
 
  
Додаток форуму для Facebook
 
Іонут Замфір
 
  
Twitter
 
Сем Джонс
 
 
 

Класи для ui-li-заголовок і ui-li-desc за замовчуванням додаються в таблицю стилів jQuery Mobile. Це схоже на клас зображення ui-li-thumb яка автоматично змінює розміри кожної панелі перегляду списку відповідно до висоти зображення. Тепер звідси ви можете побудувати більше на інтерфейсі з анімаціями, ефектами сторінки, таблицями стилів тощо.

Або ж ви могли б почати побудову резервної системи для завантаження нових зображень і автоматичної обрізки ескізів для включення до списку. Існує так багато гнучкості з jQuery Mobile, яку ви майже не можете позначити лише як бібліотеку JavaScript. Це більше HTML5 / CSS / jQuery для побудови швидких і масштабованих мобільних додатків.

Висновок

Що стосується написання цієї статті, команда jQuery Mobile офіційно випустила RC1.0 бібліотеки кодів. Це означає, що більшість, якщо не всі головні виправлення помилок були роздавлені, і тепер тестери готуються до повного випуску. Через це ви не знайдете багато інформації в Інтернеті.

Але так як місяці заздалегідь веб-розробники обов'язково підберуть на цю тенденцію. Мобільні додатки і навіть мобільні веб-макети зростають популярністю з величезним збільшенням смартфонів. Веб-розробники не мають часу для вивчення повної мови програмування для створення додатків Android / iOS. Таким чином, jQuery Mobile є тонкою альтернативою, яка включає підтримку більшості програмного забезпечення для мобільних пристроїв, і з кожним днем ​​постійно зростає з активним співтовариством розробників..