Създайте мобилен уебсайт с jQuery Mobile

Съдържание

• 01. Как да кодирам множество страници в един HTML файл
• 02. Как се използват диалогови прозорци и преходи
• 03. Преходите, които могат да се използват
• 04. Как се създават бутони
• 05. Как да създам лента за навигация
• 06. Как да кодирам HTML за лента за навигация:
• 07. Как да форматирате съдържание с jQuery Mobile
• 08. Стиловете по подразбиране, които jQuery Mobile използва
• 09. Как да приложите теми към HTML елементи
• 10. Два начина за прилагане на тема:
• 11. Перспектива
• Хареса ли ви това? Прочетете тези!

• Необходими знания: Начало на HTML5, междинни CSS, jQuery и jQuery Mobile
• Изисква: jQuery и jQuery Мобилни библиотеки и текстов редактор
• Време на проекта: 4-6 часа
• Файл за поддръжка

Това е редактиран откъс от глава 15 на HTML5 и CSS3 на Murach от Zak Ruvalcaba и Anne Boehm.

jQuery Mobile е безплатна библиотека на JavaScript с отворен код, междуплатформена, която можете да използвате за разработване на мобилни уебсайтове. Тази библиотека ви позволява да създавате страници, които изглеждат и се чувстват като страниците на собствено мобилно приложение.

Въпреки че jQuery Mobile понастоящем се предлага като бета тестова версия, тази версия вече предлага всички функции, необходими за разработването на отличен мобилен уебсайт. В резултат на това можете да започнете да го използвате веднага. Можете също така да очаквате тази версия да се подобрява непрекъснато, така че jQuery Mobile ще се подобрява само.

В тази статия ще научите основните техники за създаване на страниците на мобилен уебсайт. Това ще включва използването на диалогови прозорци, бутони и навигационни ленти.

• Прочетете всички наши статии за уеб дизайн тук

01. Как да кодирам множество страници в един HTML файл

За разлика от начина, по който разработвате уеб страниците за екранен уеб сайт, jQuery Mobile ви позволява да създавате множество страници в един HTML файл. Това е илюстрирано от фигура 15-7. Тук можете да видите две страници на сайт заедно с HTML за тези страници. Изненадващото е, че и двете страници са кодирани в един HTML файл.

За всяка страница кодирате по един div елемент със „page“ като стойност на атрибута data-role. След това, във всеки от тези елементи на div, кодирате елементите div за заглавката, съдържанието и долния колонтитул на всяка страница. По-късно, когато се зареди HTML файлът, се показва първата страница в тялото на файла.

За да свържете между страниците в HTML файла, използвате заместители, както е показано на фигура 7-11 от глава 7. Например, елементът a> на първата страница в този пример отива на „#toobin“, когато потребителят докосне h2 или img елемент, който е кодиран като съдържание на тази връзка. Това се отнася до елемента div с “toobin” като атрибут id, което означава, че докосването на връзката отвежда читателя до втората страница във файла.

Въпреки че този пример показва само две страници, можете да кодирате много страници в един HTML файл. Не забравяйте обаче, че всички страници заедно с техните изображения, JavaScript и CSS файлове се зареждат с един HTML файл. В резултат на това времето за зареждане ще стане прекомерно, ако съхранявате твърде много страници в един файл. Когато това се случи, можете да разделите страниците си на повече от един HTML файл.

HTML за двете страници в тялото на един HTML файл:

div data-role = "page">
header data-role = "header"> h1> SJV Town Hall / h1> / header>
раздел data-role = "content">
h3> Високоговорителите 2011-2012 / h3>
a href = "# toobin">
h4> Jeffrey Toobinbr> 19 октомври 2011 г. / h4>
img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>
! - ЕЛЕМЕНТИТЕ ЗА Останалите говорители ->
/ раздел>
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>
раздел data-role = "content">
h3> Върховната деветка: br> Black Robed Secrets / h3>
img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin">
p> Автор на най-популярния бестселър, i> The Nine:
! - КОПИЕТО ПРОДЪЛЖАВА ->
/ раздел>
footer data-role = "footer"> h4> © 2011 / h4> / footer>
/ div>

Описание

• Когато използвате jQuery Mobile, не е нужно да разработвате отделен HTML файл за всяка страница. Вместо това в елемента body на един HTML файл кодирате по един div елемент за всяка страница с неговия атрибут за роля на данни, зададен на „page“.
• За всеки елемент div задавате атрибута id на стойност на резервоар, която може да бъде достъпна от атрибутите href в елементите a> на други страници.

02. Как се използват диалогови прозорци и преходи

Фигура 15-8 показва как да създадете диалогов прозорец, който се отваря при докосване на връзка. За да направите това, кодирате диалоговия прозорец точно както всяка страница. Но в елемента a>, който отива на тази страница, кодирате атрибут data-rel с „диалог“ като негова стойност.

Както показват примерите на тази фигура, jQuery Mobile CSS файлът форматира диалогов прозорец по различен начин от обикновената уеб страница. По подразбиране диалоговият прозорец ще има тъмен фон с бял текст на преден план, а горният и долният колонтитул няма да обхващат ширината на страницата. В диалоговия прозорец ще има и „X“ в заглавката, която потребителят трябва да докосне, за да се върне на предишната страница.

Когато кодирате елемент a>, който отива на друга страница или диалогов прозорец, можете също да използвате атрибута за преход на данни, за да посочите един от шестте прехода, обобщени в таблицата на тази фигура. Всеки от тези преходи има за цел да имитира ефект, който използва мобилно устройство като iPhone.

03. Преходите, които могат да се използват

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

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

HTML, който отваря страницата с преход „избледняване“:

a href = "# toobin" data-prelaz = "избледняване">

Описание

• HTML за a диалогов прозорец е кодиран по начина, по който е кодирана всяка страница. Елементът a>, който води към страницата, обаче включва атрибута data-rel със стойност „dialog“. За да затвори диалоговия прозорец, потребителят докосва X в заглавката на полето.
• За да посочите начина на отваряне на страница или диалогов прозорец, можете да използвате атрибута за преход на данни с една от стойностите в таблицата по-горе. Ако дадено устройство не поддържа прехода, който сте посочили, атрибутът се игнорира.
• Стилът на диалоговия прозорец се извършва от jQuery Mobile CSS файла.

04. Как се създават бутони

Фигура 15-9 показва как да използвате бутони за навигация от една страница към друга. За да направите това, просто задавате атрибута data-role за a> елемент на „бутон“, а jQuery Mobile прави останалото.
Можете обаче да зададете и някои други атрибути за бутоните. Ако например искате два или повече бутона да се показват един до друг, като първите два бутона на тази фигура, можете да зададете атрибута data-inline на „true“.

Ако искате да добавите една от 18-те икони, предоставени от jQuery Mobile, към бутон, вие също кодирате атрибута data-icon. Например третият бутон в този пример използва иконата „изтриване“, а четвъртият бутон използва иконата „начало“. Всички тези икони приличат на иконите, които може да видите в родното мобилно приложение. Между другото, тези икони не са отделни файлове, до които страницата трябва да има достъп. Вместо това те се предоставят от библиотеката jQuery Mobile.

Ако искате да групирате два или повече бутона хоризонтално, като бутоните „Да“, „Не“ и „Може би“ на тази фигура, можете да кодирате елементите a> за бутоните в елемент div, който има „controlgroup“ като свой атрибут за роля на данни „Хоризонтален“ като свой атрибут тип данни. Или, за да групирате бутоните вертикално, можете да промените атрибута на типа данни на „вертикален“.

Ако зададете атрибута data-rel за един бутон „назад“ и атрибута href на символа за паунд (#), бутонът ще се върне на страницата, която го е извикала. С други думи, бутонът работи като бутон Назад. Това е илюстрирано от последния бутон в съдържанието на страницата.

Последните два бутона показват как бутоните се появяват в долния колонтитул на страница. Тук иконите и текстът са бели на черен фон. В този случай атрибутът на класа за долния колонтитул е зададен на „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 ->
a href = "#" data-role = "button" 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"> Не / a>
a href = "#" data-role = "button"> Може би / a>
/ div>
! - За да кодирате бутон Назад, задайте атрибута data-rel на back ->
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 = "бутон"
data-icon = "plus"> Добавяне към Facebook / a>
a href = "http://www.twitter.com" data-role = "бутон"
data-icon = "plus"> Tweet тази страница / a>
/ footer>

Описание

• За да добавите бутон към уеб страница, кодирате елемент> с неговия атрибут за роля на данни, зададен на „бутон“.

05. Как да създам лента за навигация

Фигура 15-10 показва как можете да добавите лента за навигация към уеб страница. За да направите това, кодирате елемент div с неговата роля на данни, зададена на „navbar“. В този елемент кодирате ul елемент, който съдържа li елементи, които съдържат елементите a> за елементите в навигационната лента. Имайте предвид обаче, че не кодирате атрибута за роля на данни за елементите a>.

За да промените цвета на елементите в лентата за навигация, кодът в този пример включва атрибута data-theme-b за всеки елемент. В резултат на това jQuery Mobile променя цвета на фона на всеки елемент от черен, който е по подразбиране, на привлекателен син. В допълнение, този код задава атрибута на класа за активния бутон на „ui-btn-active“, така че jQuery Mobile променя цвета на активния бутон на по-светло синьо. Това показва как можете да промените форматирането, използвано от jQuery Mobile, и ще научите повече за това по-нататък.

HTML за лентата за навигация

header data-role = "header">
h1> кметство на SJV / 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>

06. Как да кодирам HTML за лента за навигация:

• Кодирайте елемент div в заглавния елемент. След това задайте атрибута за роля на данни за елемента div на „navbar“.
• В рамките на елемента div кодирайте елемент ul, който съдържа по един елемент li за всяка връзка.
• Във всеки елемент li кодирайте a> елемент с атрибут href, който използва заместител за страницата, към която трябва да отиде връзката. След това задайте атрибута data-icon на избраната от вас икона.
• За активния елемент в лентата за навигация задайте атрибута на клас на „ui-btn-active“. След това цветът на този елемент ще бъде по-светъл от останалите елементи в навигационната лента.
• Също така трябва да използвате атрибута data-theme, за да приложите jQuery Mobile тема към всеки елемент в навигационната лента. В противен случай бутоните в лентата ще бъдат със същия цвят като останалата част на заглавката. За да научите повече за прилагането на теми, вижте фигура 15-12.

07. Как да форматирате съдържание с jQuery Mobile

Както вече видяхте, jQuery Mobile автоматично форматира компонентите на уеб страница въз основа на своя собствен стил. Сега ще научите повече за това, както и за това как да коригирате стила по подразбиране, който jQuery Mobile използва.

08. Стиловете по подразбиране, които jQuery Mobile използва

Фигура 15-13 показва стиловете по подразбиране, които jQuery Mobile използва за често срещани HTML елементи. За всичките си стилове jQuery Mobile разчита на механизма за рендиране на браузъра, така че собственият му стил е минимален. Това поддържа времето за зареждане бързо и минимизира режийните разходи, които прекомерният CSS би наложил на дадена страница.

Както можете да видите, стилът на jQuery Mobile е толкова ефективен, че не би трябвало да модифицирате стила му, като предоставите свой собствен CSS лист със стилове. Например разстоянието между елементите в неподредения списък и форматирането на таблицата са приемливи както са. Също така, черният тип на сивия фон е в съответствие с форматирането за местни мобилни приложения.

Описание

• По подразбиране jQuery Mobile автоматично прилага стилове към HTML елементите за страница. Тези стилове са не само привлекателни, но и имитират родните стилове на браузъра.
• По подразбиране jQuery Mobile прилага малко количество подплънки отляво, отдясно, отгоре и отдолу на всяка мобилна страница.
• По подразбиране връзките са малко по-големи от нормалния текст. Това улеснява потребителя да докосва връзките.
• По подразбиране връзките са подчертани със синьо като цвят на шрифта.

09. Как да приложите теми към HTML елементи

В някои случаи ще искате да промените стиловете по подразбиране, които jQuery Mobile използва. Вече сте виждали това в навигационната лента на фигура 15-10. За да промените стиловете по подразбиране, можете да използвате петте теми, които jQuery Mobile предоставя. Те са обобщени на фигура 15-12. Тук отново тези теми са предназначени да имитират появата на родно мобилно приложение.

Един от начините за прилагане на теми е кодирането на атрибут на тема данни с буквата на темата като негова стойност. Видяхте това в навигационната лента на фигура 15-10 и можете да видите това в кода за втората навигационна лента на тази фигура. Тук атрибутът data-theme прилага тема „e“ към заглавката и тема „d“ към елементите в навигационната лента.

Другият начин за прилагане на теми е да зададете атрибута на клас за елемент на име на клас, което указва тема. Това е илюстрирано от първия пример след таблицата. Тук атрибутът class се използва за прилагане на класовете “ui-bar” и “ui-bar- b” към елемента div. В резултат на това jQuery Mobile първо прилага стила си по подразбиране за лента към елемента и след това прилага темата b към този стил. На следващите страници ще видите други примери за този тип стилизиране.

Моля, обърнете внимание, че таблицата на тази фигура казва да използвате темата e пестеливо. Това е така, защото използва оранжев цвят, който работи добре за акцентиране върху елемент, но не е привлекателен в големи дози. Това е илюстрирано от втората заглавна и навигационна лента на тази фигура, която има тенденция да смущава, когато я видите в цвят.

Като цяло, най-добре е да се придържате към стиловете по подразбиране и първите три теми, които обикновено работят добре заедно. След това можете да експериментирате с теми d и e, когато смятате, че имате нужда от нещо повече.

HTML за втория хедър и навигационната лента:

header data-role = "header" data-theme = "e">
h1> кметство на SJV / 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:

10. Два начина за прилагане на тема:

Чрез използване на атрибут data-theme:

li> a href = "# home"
data-icon = "home" data-theme = "b"> Начало / a> / li>

Чрез използване на атрибут на клас, който указва темата:

div> Bar / div>

Описание

• Като използвате петте теми, включени в jQuery Mobile, можете да направите подходящи корекции на стиловете по подразбиране за HTML елементите.
• Въпреки че можете да използвате своя собствен CSS таблица със стилове с приложението jQuery Mobile, трябва да избягвате да правите това, когато е възможно.

11. Перспектива

Използването на мобилни устройства се увеличи драстично през последните няколко години. Поради това става все по-важно да се проектират уеб сайтове, които са лесни за използване от тези устройства. Въпреки че това обикновено означава разработване на отделен уеб сайт, това може да бъде критичен аспект за поддържане на присъствието ви в интернет.

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

Хареса ли ви това? Прочетете тези!

• Как да създадете приложение
• Професионални съвети за изграждане на мобилен уебсайт.
• Най-добрите безплатни уеб шрифтове за дизайнери
• Полезни и вдъхновяващи шаблони за флаери