Створюємо мобільний веб-сайт на jQuery Mobile
У цьому ексклюзивному уривку з Murach's HTML5 and CSS3, Зак Равалькаба та Енн Боем пояснюють, як за допомогою jQuery Mobile створити мобільний веб-сайт.
Це відредагований уривок з Глави 15 книги Зака Равалькаби та Енн Боем Murach's HTML5 та CSS3.
jQuery Mobile - це безкоштовна, крос-платформна бібліотека з відкритим вихідним кодом, яку ви можете використовувати для створення мобільних веб-сайтів. Вона дозволяє створювати сторінки, які виглядають та працюють як оригінальні мобільні програми.
Хоча jQuery Mobile зараз доступна лише у вигляді бета-версії, вона вже надає всі функції, необхідні для створення чудового мобільного веб-сайту. Отже, ви можете почати використовувати її вже зараз. Також у найближчому майбутньому варто чекати безліч покращень, а значить, jQuery Mobile ставатиме все краще.
У цій статті ви ознайомитеся з базовими техніками створення сторінок мобільного веб-сайту. Включаючи використання діалогових вікон, кнопок та навігаційних панелей.
Як розмістити код декількох сторінок в одному HTML файлі
На відміну від раніше використовуваних методів розробки веб-сторінок для повноформатних веб-сайтів, jQuery Mobile дозволяє створювати безліч сторінок в єдиному HTML файлі. Ви можете бачити це на ілюстрації15-7.Тут представлені дві сторінки разом з їх HTML-кодом. Що примітно, вони обидві записані в одному HTML-файлі.
Для кожної сторінки ви створюєте один елемент "div" зі значенням "page" в атрибуті "data-role". Потім, всередині кожного з цих div-елементів ви прописуєте div-елементи для шапки, контенту і футера кожної сторінки. Після завантаження HTML першою завантажується верхня сторінка із прописаних у тілі файлу.
HTML-код, що розміщуєдві сторінки в тілі одного HTML файлу:
- Використовуючи jQuery Mobile, вам не потрібно створювати окремі файли HTML для кожної сторінки. Замість цього, всередині елемента "body" одного HTML-файлу, ви розміщуєте для кожної сторінки з "page" як атрибут "data-role".
- Для кожного задаєте ярлик для атрибуту "id", доступ до якого може бути отриманий через атрибут "href" елемента "" кожної сторінки.
Як використовувати діалогові вікна та ефекти переходу
Малюнок як можна створити діалогове вікно, яке спливає при натисканні на посилання. Для цього ви прописуєте код діалогового вікна так, якби це була звичайна сторінка. Однак, тут в елементі «» ви розміщуєте атрибут «data-rel» зі значенням «dialog».
Як видно з прикладу, CSS файл jQuery Mobile форматує діалогове вікно інакше, ніж звичайну сторінку. За замовчуванням вікно відрізняється темним тлом і білим шрифтом, причому верхній і нижній колонтитули не розтягуються по ширині сторінки. Також діалогове вікно має X у заголовку, на який користувачеві слід натиснути для повернення до попередньої сторінки.
Ефекти переходу, які можуть бути використані
| Дія | Опис |
| slide | наступна сторінка виїжджає праворуч наліво |
| slideup | наступна сторінка виїжджає знизу нагору |
| slidedown | наступна сторінка виїжджає зверху вниз |
| pop | наступна сторінка виростає із центру |
| fade | наступна сторінка плавно проявляється над попередньою |
| flip | наступна сторінка з'являється при повороті попередньої, подібно гральній карті, що перевертається. Цей ефект непідтримується на деяких пристроях. |
HTML, що відкриває сторінку у вигляді діалогового вікна з «pop» ефектом:
HTML, що відкриває сторінку з ефектом «fade»:
- HTML діалогового вікна створюється так само, як будь-яка інша сторінка. Однак, елемент "", що посилається на сторінку, включає атрибут "data-rel" зі значенням "dialog". Щоб закрити діалогове вікно, користувач повинен натиснути «X» у шапці блоку.
- Для вибору способу, яким відкривається діалогове вікно, можна використовувати атрибут « data-transition » з одним із значень, зазначених у таблиці вище. Якщо пристрій не підтримує задану візуалізацію, атрибут буде проігнорований.
- Стиль діалогового вікна задається файлом jQuery Mobile CSS.
Як створити кнопки
Якщо ви бажаєте використовувати одну з 18 іконок, що входять до набору jQuery Mobile, як кнопку, вам також необхідно вписати атрибут “data-icon”. Наприклад, третя кнопка у зразку використовує іконку "delete", а четверта - іконку "home". Всі вони виглядають як ті іконки, які ви часто можете бачити в інших мобільних додатках. Що цікаво, іконки не розташовані в окремих файлах, яких сторінка повинна отримувати доступ. Вони входять до бібліотеки jQuery Mobile.
Якщо ви вказуєте "data-rel" атрибут кнопки як "back", а атрибуту "hrel" вказуєте октоторп ("#"), кнопка повертає вас на вказану сторінку. Іншими словами, вона працює як кнопка повернення до попередньої сторінки. У прикладі це остання кнопка на сторінці.
Останні дві кнопки демонструють, як можна розмістити кнопки у нижньому колонтитулі сторінки так, щоб кнопки та текст були білими на чорному тлі. У нашому випадку, атрибут "class" футера заданий як "ui-bar"», Він повідомляє jQuery Mobile про необхідність залишити невеликі відступи навколо контенту футера. Наочно це продемонстровано на рисунке15-12.
HTML всіх кнопок на цій сторінці:
HTML для кнопок у футері:
- Щоб додати на веб-сторінку кнопки, вам потрібно створити елемент " " з " data-role " атрибутом у значенні "button".
Як створити навігаційну панель
Зображення як можна додати навігаційну панель на веб-сторінку. Для цього вам потрібно створити атрибутом "data-role" у значенні "navbar". У ньому ви створюєте “ul” елемент, що містить «li» елемент, який, у свою чергу, містить елементи «» як пункти меню. Зауважте, що вам не потрібно вказувати « data-role » атрибут для елементів « „ .
Для зміни кольору пунктів навігаційної панелі код у нашому прикладі включає атрибут "data-theme-b" для кожного з них. В результаті jQuery Mobile змінює колір фону кожного з пунктів меню із чорного, встановленого за замовчуванням, на привабливий блакитний. На додаток, код задає атрибут "class" для активної іконки у значенні "ui-btn-active", завдяки чому jQuery Mobile змінює тон активної кнопки на світліший. Це приклад того, як ви можете змінювати формат, який використовується jQuery Mobile, надалі ми ще поговоримо про це.
HTML навігаційної панелі:
Як написати HTML код для навігаційної панелі:
Як за допомогою jQuery Mobile форматувати контент
Як ви вже бачили, jQuery Mobile автоматично форматує компоненти веб-сторінки на основі власних таблиць стилів. Зараз ми докладніше поговоримо про це, а також про те, як застосовувати стилі, які jQuery Mobile за замовчуванням використовуються.
Стилі, які за замовчуванням використовуються jQuery Mobile
Ілюстрація15-13 демонструє стилі, які jQuery Mobile використовує для звичайних HTML-елементів за промовчанням. У всіх цих стилях jQuery Mobile оперує браузерним двигуном візуалізації, тому самостійна його активність мінімальна. Це дозволяє зробити завантаження швидкою та скоротити зайві витрати ресурсів на зайві CSS.
Як бачите, стильове форматування jQuery Mobile настільки ефективне, що вам навіть не потрібно змінювати його, додаючи власні таблиці стилів CSS. Наприклад, проміжки між блоками неупорядкованого списку та відформатованої таблиці однаково добре сприймаються. Також чорний шрифт на сірому фоні гармонує зі стилем інших мобільних додатків.
- За промовчанням jQuery Mobile автоматично застосовує стилі до всіх елементів HTML на сторінці. Ці стилі не лише привабливі, а й поєднуються з оригінальними стилями браузера.
- За замовчуванням jQuery Mobile задає невеликі відступи ліворуч, праворуч, зверху та знизу кожної мобільної сторінки.
- За замовчуванням, шрифт посилань трохи більший за решту тексту. Це допомагає користувачеві легше їх знаходити.
- За замовчуванням текст посилань виконаний синім кольором із підкресленням.
Як застосовувати теми до HTML елементів
У деяких випадках ви можете захотіти змінити стилі, які використовуються за замовчуванням jQuery Mobile. Ви вже бачили це з прикладу навігаційної панелі на рисунке15-10. Для того, щоб змінити стандартні стилі, ви можете використовувати одну з п'яти тем jQuery Mobile. Ви можете переглянути їх на рисунку15-12. Знову ж таки, всі вони покликані наслідувати стилі базових мобільних додатків.
Одним із способів застосування тем є використання атрибуту data-theme з параметром, що містить букву відповідної теми. Ви бачили прикладйого використання в навігаційній панелі на ілюстрації також можна подивитися це на прикладі другого меню на цій картинці. Тут атрибут "data-theme" заголовка має значення "e", а в навігаційному меню він заданий у значенні "d".
Іншим способом завдання теми є встановлення атрибуту "class" у значенні, що відповідає темі. Це продемонстровано першому прикладі після таблиці. Як результат, jQuery Mobile спочатку застосовує до елемента меню стиль за промовчанням, а потім використовує тему b для форматування. Надалі ви побачите ще кілька прикладів використання стилів.
Зауважте, що таблиця з прикладу трохи використовує тему « e „ . Все тому, що помаранчевий колір чудово підходить для акцентування уваги, але у великих дозах виглядає не надто привабливо. Це показано на прикладі другого заголовка навігаційної панелі на ілюстрації.
Загалом варто дотримуватися стилю за замовчуванням і трьох перших тем, які зазвичай добре поєднуються між собою. Ви можете потім поекспериментувати з темами “d” та “e”, якщо вирішите, що вам потрібно щось особливе.
HTML другої шапки та панелі:
П'ять тем jQuery Mobile:
| Тема | Опис |
| a | Чорний фон, білий шрифт. За замовчуванням |
| b | Блакитний фон, білий шрифт |
| c | Світло-сірий фон, чорний шрифт. Текст напівжирний |
| d | Світло-сірий фон, чорний шрифт. Текст не напівжирний |
| e | Помаранчевий фон, чорний шрифт. Використовуйте для надання акцентів та не захоплюйтесь |
Два способи задіяти тему:
Використовуючи атрибут "data-theme":
Використовуючи атрибут"class" для вибору теми:
- Використовуючи п'ять тем jQuery Mobile, можна легко модифікувати стилі HTML елементів за замовчуванням.
- Хоча ви можете використовувати з jQuery Mobile власні таблиці стилів CSS, слід уникати цього за будь-яку ціну.
Перспективи
За останні кілька років користування мобільними пристроями поширилося повсюдно. Тому все більш важливим стає створення веб-сайтів, які оптимізовані під ці пристрої. Хоча зазвичай це має на увазі розробку окремого сайту, такий крок може стати вирішальним у забезпеченні вашої присутності в Інтернеті.