Створіть мобільний веб-сайт за допомогою jQuery Mobile

Зміст

• Як кодувати кілька сторінок в одному файлі HTML
• Опис
• Як користуватися діалоговими вікнами та переходами
• Переходи, які можна використовувати
• Опис
• Як створити кнопки
• Опис
• Як створити панель навігації
• Як кодувати HTML для панелі навігації:
• Як форматувати вміст за допомогою jQuery Mobile
• Стилі за замовчуванням, які використовує jQuery Mobile
• Опис
• Як застосувати теми до елементів HTML
• Два способи застосування теми:
• Опис
• Перспектива

Це відредагований уривок з глави 15 HTML5 та CSS3 Мураха Зак Рувалкаба та Енн Бем.

jQuery Mobile - це безкоштовна, платформа, бібліотека JavaScript з відкритим вихідним кодом, яку ви можете використовувати для розробки мобільних веб-сайтів. Ця бібліотека дозволяє створювати сторінки, які виглядають і нагадують сторінки рідного мобільного додатка.

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

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

Як кодувати кілька сторінок в одному файлі HTML

На відміну від способу розробки веб-сторінок для екранного веб-сайту, jQuery Mobile дозволяє створювати кілька сторінок в одному файлі HTML. Це проілюстровано на малюнку 15-7. Тут ви можете побачити дві сторінки сайту разом із HTML для цих сторінок. Що дивно, так це те, що обидві сторінки кодуються в одному файлі HTML.

Для кожної сторінки ви кодуєте один елемент div зі значенням “page” як значення атрибута data-role. Потім у кожному з цих елементів div ви кодуєте елементи div для заголовка, вмісту та нижнього колонтитула кожної сторінки. Пізніше, коли файл HTML завантажується, відображається перша сторінка в тілі файлу.

Для зв’язку між сторінками у файлі HTML ви використовуєте заповнювачі, як показано на малюнку 7-11 глави 7. Наприклад, елемент a> на першій сторінці в цьому прикладі переходить до «#toobin», коли користувач натискає на h2 або img-елемент, кодований як вміст цього посилання. Це стосується елемента div, атрибутом id якого є “toobin”, що означає, що натискання на посилання переводить читача на другу сторінку у файлі.

Хоча в цьому прикладі показано лише дві сторінки, ви можете кодувати багато сторінок в одному файлі HTML. Однак пам’ятайте, що всі сторінки разом із їх зображеннями, файлами JavaScript та CSS завантажуються одним файлом HTML. Як результат, час завантаження стане надмірним, якщо ви зберігаєте занадто багато сторінок в одному файлі. Коли це трапиться, ви можете розділити свої сторінки на декілька файлів HTML.

HTML для двох сторінок в тілі одного файлу HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> 2011-2012 Speakers / h3> a href = "# toobin"> h4> Джеффрі Тубінбр> 19 жовтня 2011 р. / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Джеффрі Toobin "> p> Автор відомого критиком бестселера, i> The Nine:! - КОПІЯ ПРОДОВЖАЄТЬСЯ -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Опис

• Коли ви використовуєте jQuery Mobile, вам не потрібно розробляти окремий файл HTML для кожної сторінки. Натомість всередині елемента body одного HTML-файлу ви кодуєте по одному елементу div для кожної сторінки з атрибутом ролі даних, встановленим на “page”.
• Для кожного елемента div ви встановлюєте атрибут id як значення заповнювача, до якого можна отримати доступ за допомогою атрибутів href в елементах a> інших сторінок.

Як користуватися діалоговими вікнами та переходами

На малюнку 15-8 показано, як створити діалогове вікно, яке відкриється при натисканні на посилання. Для цього ви кодуєте діалогове вікно так само, як і будь-яку сторінку. Але в елементі a>, який переходить на цю сторінку, ви кодуєте атрибут data-rel із значенням «діалог».

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

Коли ви кодуєте елемент a>, який переходить на іншу сторінку або діалогове вікно, ви також можете використовувати атрибут переходу даних, щоб вказати один із шести переходів, зведених у таблиці на цьому малюнку. Кожен з цих переходів має імітувати ефект, який використовує мобільний пристрій, такий як iPhone.

Переходи, які можна використовувати

HTML, який відкриває сторінку як діалогове вікно із переходом “pop”:

a href = "# toobin" data-rel = "dialog" data-prelaz = "pop">

HTML, який відкриває сторінку з переходом "зникання":

a href = "# toobin" data-перехід = "зникає">

Опис

• HTML для діалогове вікно кодується так, як кодується будь-яка сторінка. Однак елемент a>, який посилається на сторінку, включає атрибут data-rel із значенням “dialog”. Щоб закрити діалогове вікно, користувач натискає X у заголовку вікна.
• Щоб вказати спосіб відкриття сторінки чи діалогового вікна, ви можете використовувати атрибут переходу даних з одним із значень у таблиці вище. Якщо пристрій не підтримує вказаний вами перехід, атрибут ігнорується.
• Стиль для діалогового вікна виконується файлом jQuery Mobile CSS.

Як створити кнопки

На малюнку 15-9 показано, як за допомогою кнопок переходити з однієї сторінки на іншу. Для цього ви просто встановлюєте атрибут data-role для елемента a> на “button”, а все виконує jQuery Mobile.
Однак ви також можете встановити деякі інші атрибути для кнопок. Якщо, наприклад, ви хочете, щоб дві або більше кнопок відображалися поруч, як і перші дві кнопки на цьому малюнку, ви можете встановити атрибут data-inline на “true”.

Якщо ви хочете додати до кнопки одну з 18 піктограм, які надає jQuery Mobile, ви також кодуєте атрибут data-icon. Наприклад, третя кнопка в цьому прикладі використовує піктограму «видалити», а четверта кнопка використовує піктограму «домашня». Усі ці піктограми схожі на піктограми, які ви можете бачити в рідному мобільному додатку. До речі, ці піктограми не є окремими файлами, до яких повинна мати доступ сторінка. Натомість їх надає бібліотека jQuery Mobile.

Якщо ви хочете згрупувати дві або більше кнопок горизонтально, як кнопки Так, Ні та Можливо на цьому малюнку, ви можете закодувати елементи a> для кнопок у елементі div, що має атрибут-роль ролі даних і “Горизонтальний” як його атрибут типу даних. Або, щоб згрупувати кнопки по вертикалі, ви можете змінити атрибут типу даних на “вертикальний”.

Якщо ви встановите атрибут data-rel для кнопки «назад», а атрибут href для символу фунта (#), кнопка повернеться до сторінки, яка її викликала. Іншими словами, кнопка працює як кнопка Назад. Це пояснюється останньою кнопкою у вмісті сторінки.

Останні дві кнопки показують, як кнопки відображаються в нижньому колонтитулі сторінки. Тут значки та текст білі на чорному тлі. У цьому випадку для атрибута class нижнього колонтитула встановлено значення “ui-bar”, що повідомляє jQuery Mobile, що він повинен розмістити трохи більше місця навколо вмісту нижнього колонтитула. Ви дізнаєтесь більше про це на малюнку 15-12.

HTML для кнопок у розділі:

! - Для вбудованих кнопок встановіть для атрибута data-line значення true -> a href = "#" data-role = "button" data-inline = "true"> Скасувати / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Щоб додати піктограму до кнопки, використовуйте атрибут data-icon -> кнопка href = "#" data-role = " "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Головна / a>! - Для групування кнопок використовуйте елемент div з атрибути, що слідують -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Так / a> href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Можливо / a> / div>! - До кодувати кнопку Назад, встановити атрибут data-rel назад -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Повернутися на попередню сторінку / a >

HTML для кнопок у нижньому колонтитулі:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Додати до Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Твітувати цю сторінку / a> / footer>

Опис

• Щоб додати кнопку на веб-сторінку, ви кодуєте елемент> з атрибутом ролі даних, встановленим на «button».

Як створити панель навігації

На малюнку 15-10 показано, як можна додати панель навігації до веб-сторінки. Для цього ви кодуєте елемент div з його роллю даних, встановленою на “navbar”. У цьому елементі ви кодуєте елемент ul, який містить елементи li, що містять елементи a> для елементів на панелі навігації. Однак зверніть увагу, що ви не кодуєте атрибут data-role для елементів a>.

Щоб змінити колір елементів на панелі навігації, код у цьому прикладі включає атрибут data-theme-b для кожного елемента. Як результат, jQuery Mobile змінює колір тла кожного елемента з чорного, який є типовим, на привабливий синій. Крім того, цей код встановлює атрибут класу для активної кнопки на “ui-btn-active”, тому jQuery Mobile змінює колір для активної кнопки на більш світлий синій. Це показує, як ви можете змінити форматування, яке використовується jQuery Mobile, і про це ви дізнаєтесь далі.

HTML для панелі навігації:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Головна / a> / li> li> a href =" # колонки "data-icon =" star "data-theme =" b "> Динаміки / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Зв'яжіться з нами / a> / li> / ul> / div> / header>

Як кодувати HTML для панелі навігації:

• Кодуйте елемент div у заголовку. Потім встановіть атрибут data-role для елемента div на “navbar”.
• Всередині елемента div кодуйте елемент ul, який містить по одному елементу li для кожного посилання.
• У кожному елементі li кодуйте елемент a> з атрибутом href, який використовує заповнювач для сторінки, на яку має переходити посилання. Потім встановіть атрибут data-icon на обрану вами піктограму.
• Для активного елемента на панелі навігації встановіть для атрибута класу значення “ui-btn-active”.Тоді колір цього елемента буде світлішим за інші елементи на панелі навігації.
• Ви також повинні використовувати атрибут data-theme, щоб застосувати тему jQuery Mobile до кожного елемента на панелі навігації. В іншому випадку кнопки на панелі будуть того самого кольору, що і решта заголовка. Щоб дізнатись більше про застосування тем, див. Малюнок 15-12.

Як форматувати вміст за допомогою 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. Тут знову ж таки ці теми мають на меті імітувати появу власного мобільного додатка.

Одним із способів застосування тем є кодування атрибута теми даних із значенням теми. Ви побачили це на панелі навігації на малюнку 15-10, і ви можете побачити це в коді для другої панелі навігації на цьому малюнку. Тут атрибут data-theme застосовує тему "e" до заголовка, а тему "d" до елементів на панелі навігації.

Інший спосіб застосування тем - це встановити атрибут class для елемента на ім’я класу, яке вказує на тему. Це проілюстровано на першому прикладі після таблиці. Тут атрибут class використовується для застосування класів “ui-bar” та “ui-bar- b” до елемента div. Як результат, jQuery Mobile спочатку застосовує стиль до стилю для панелі за замовчуванням, а потім застосовує тему b до цього стилю. На наступних сторінках ви побачите інші приклади такого типу укладання.

Зверніть увагу, що в таблиці на цьому малюнку сказано використовувати тему e економно. Це тому, що він використовує помаранчевий колір, який добре працює для акцентування предмета, але не привабливий у великих дозах. Це ілюструється другим заголовком та навігаційною панеллю на цьому малюнку, яка, як правило, нервує, коли бачите її кольоровою.

Загалом, найкраще дотримуватися типових стилів та перших трьох тем, які зазвичай добре працюють разом. Потім ви можете експериментувати з темами d і e, коли вважаєте, що вам потрібно щось більше.

HTML для другого заголовка та навігаційної панелі:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Головна / a> / li> li> a href =" # динаміки "data-icon =" star "data-theme =" d "> Виступаючі / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Новини / a> / li> / ul> / div> / header>

П’ять тем jQuery Mobile:

Два способи застосування теми:

Використовуючи атрибут data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> Головна / a> / li>

Використовуючи атрибут класу, який вказує на тему:

div> Bar / div>

Опис

• Використовуючи п’ять тем, які входять до jQuery Mobile, ви можете внести відповідні корективи в стилі за замовчуванням для елементів HTML.
• Хоча ви можете використовувати свою власну таблицю стилів CSS із програмою jQuery Mobile, вам слід уникати цього, коли це можливо.

Перспектива

За останні кілька років використання мобільних пристроїв різко зросло. Через це стає все більш важливим створення веб-сайтів, простими у використанні з цих пристроїв. Хоча це зазвичай означає розробку окремого веб-сайту, це може бути критичним аспектом підтримки вашої присутності в Інтернеті.

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