Стварыце мабільны сайт з дапамогай 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 / h1> / header> section data-role = "content"> h3> Выступоўцы 2011-2012 / h3> href = "# toobin"> h4> Джэфры Тубінбр> 19 кастрычніка 2011 г. / h4> img src = "images / toobin75.webp" alt = "Джэфры Тубін"> / a>! -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Ратуша SJV / 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", які карыстальнік павінен націснуць, каб вярнуцца на папярэднюю старонку.

Калі вы кадуеце элемент>, які пераходзіць на іншую старонку ці дыялогавае акно, вы таксама можаце выкарыстоўваць атрыбут пераходу дадзеных, каб паказаць адзін з шасці пераходаў, якія абагульнены ў табліцы на гэтым малюнку. Кожны з гэтых пераходаў прызначаны для імітацыі эфекту, які выкарыстоўвае такая мабільная прылада, як iPhone.

Пераходы, якія можна выкарыстоўваць

HTML, які адкрывае старонку ў выглядзе дыялогавага акна з пераходам "поп":

a href = "# toobin" data-rel = "дыялог" data-пераход = "поп">

HTML, які адкрывае старонку з пераходам "знікаць":

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

Апісанне

• HTML для дыялогавае акно кадуецца так, як кадуецца любая старонка. Аднак элемент a>, які спасылаецца на старонку, у якасці значэння ўключае атрыбут data-rel з дыялогам. Каб закрыць дыялогавае акно, карыстальнік націскае X у загалоўку акна.
• Каб паказаць спосаб адкрыцця старонкі ці дыялогавага акна, вы можаце выкарыстоўваць атрыбут пераходу да дадзеных з адным са значэнняў у табліцы вышэй. Калі прылада не падтрымлівае ўказаны пераход, атрыбут ігнаруецца.
• Стылізацыя дыялогавага акна зроблена з дапамогай файла jQuery Mobile CSS.

Як стварыць кнопкі

На малюнку 15-9 паказана, як выкарыстоўваць кнопкі для пераходу ад адной старонкі да іншай. Для гэтага вы проста ўсталёўваеце атрыбут data-role для элемента> у "кнопка", а ўсё астатняе выконвае jQuery Mobile.
Аднак вы таксама можаце ўсталяваць некаторыя іншыя атрыбуты для кнопак. Калі, напрыклад, вы хочаце, каб дзве або некалькі кнопак з'яўляліся побач, як першыя дзве кнопкі на гэтым малюнку, вы можаце ўсталяваць атрыбут data-inline у ​​"true".

Калі вы хочаце дадаць да кнопкі адзін з 18 значкоў, якія прадастаўляюцца jQuery Mobile, вы таксама закадзіруеце атрыбут data-icon. Напрыклад, трэцяя кнопка ў гэтым прыкладзе выкарыстоўвае значок "выдаліць", а чацвёртая кнопка выкарыстоўвае значок "дома". Усе гэтыя значкі падобныя на абразкі, якія вы можаце ўбачыць у роднай мабільнай праграме. Дарэчы, гэтыя значкі не з'яўляюцца асобнымі файламі, да якіх старонка павінна атрымаць доступ. Замест гэтага яны прадастаўляюцца бібліятэкай jQuery Mobile.

Калі вы хочаце згрупаваць дзве або больш кнопак па гарызанталі, напрыклад, кнопкі "Так", "Не" і "Магчыма" на гэтым малюнку, вы можаце закадзіраваць элементы> для кнопак у элеменце 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 "> 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 назад -> 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>

Апісанне

• Каб дадаць кнопку на вэб-старонку, вы закадуеце элемент> з атрыбутам ролі дадзеных, усталяваным у «кнопка».

Як стварыць панэль навігацыі

На малюнку 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 на абраны вамі абразок.
• Для актыўнага элемента на панэлі навігацыі ўсталюйце атрыбут class у "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 / 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 вэб-распрацоўшчыкі цяпер могуць ствараць шматфункцыянальныя вэб-сайты, якія выглядаюць і адчуваюць сябе як родныя мабільныя дадаткі.