JQuery Mobile менен мобилдик вебсайт түзүңүз

Мазмун

• Бир HTML файлындагы бир нече баракты кантип коддоо керек
• Сүрөттөмө
• Диалог кутучаларын жана өткөөлдөрүн кантип колдонсо болот
• Колдонууга болот өткөөлдөр
• Сүрөттөмө
• Баскычтарды кантип түзүү керек
• Сүрөттөмө
• Багыттоо тилкесин кантип түзүү керек
• Навигация тилкеси үчүн HTML кодун кантип жазса болот:
• JQuery Mobile менен мазмунду кантип форматтоо керек
• JQuery Mobile колдонгон демейки стилдер
• Сүрөттөмө
• HTML элементтерине темаларды кантип колдонсо болот
• Теманы колдонуунун эки жолу:
• Сүрөттөмө
• Перспектива

Бул 15-бөлүмдүн редакцияланган үзүндүсү Murach’s HTML5 жана CSS3 Зак Рувалькаба жана Энн Боэм тарабынан.

jQuery Mobile - бул акысыз, ачык булактуу, кайчылаш платформа, JavaScript китепканасы, аны мобилдик веб-сайттарды иштеп чыгууга колдоно аласыз. Бул китепкана түпнуска мобилдик тиркеменин беттерине окшош жана сезилген баракчаларды түзүүгө мүмкүнчүлүк берет.

Учурда jQuery Mobile бета тесттин версиясы катары жеткиликтүү болсо дагы, бул версия мыкты мобилдик веб-сайтты иштеп чыгуу үчүн керектүү бардык функцияларды камтыйт. Натыйжада, аны дароо колдоно баштасаңыз болот. Ошондой эле, бул версия үзгүлтүксүз жакшыртылат деп күтсөңүз болот, андыктан jQuery Mobile жакшыра берет.

Бул макалада сиз мобилдик веб-баракчаны түзүүнүн негизги ыкмаларын үйрөнөсүз. Буга диалог кутучаларын, баскычтарды жана навигациялык тилкелерди колдонуу кирет.

Бир HTML файлындагы бир нече баракты кантип коддоо керек

Экрандык веб-сайттын веб-баракчаларын иштеп чыгуу ыкмасынан айырмаланып, jQuery Mobile бир HTML файлында бир нече барактарды түзүүгө мүмкүнчүлүк берет. Бул 15-7 сүрөт менен сүрөттөлгөн. Бул жерде, сиз бул баракчалар үчүн HTML менен кошо сайттын эки барагын көрө аласыз. Эң таң калыштуусу, эки барак тең бир HTML файлынын ичинде коддолгон.

Ар бир барак үчүн, сиз бир див элементти “баракча” менен берилиш-ролу атрибутунун мааниси катары коддойсуз. Андан кийин, ошол div элементтеринин ар биринде, сиз ар бир барактын баш, мазмунун жана төмөнкү колонтитулу үчүн div элементтерин коддойсуз. Кийинчерээк, HTML файлы жүктөлгөндө, файлдын корпусундагы биринчи бет көрсөтүлөт.

HTML файлындагы беттердин ортосунда шилтеме берүү үчүн, 7-бөлүмдүн 7-11-сүрөттөрүндө көрсөтүлгөндөй толтургучтарды колдоносуз. Мисалы, мисалдагы биринчи беттеги a> элементи колдонуучу "#toobin" баскычын басканда h2 же img элементи, бул шилтеменин мазмуну катары коддолгон. Бул иди атрибуту катары "toobin" бар div элементин билдирет, демек, шилтемени басуу менен окурман файлдагы экинчи бетке өтөт.

Бул мисал эки гана баракты көрсөткөнү менен, бир 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 спикерлер / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 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> Жогорку тогуз: br> Кара түстөгү сырлар / h3> img src = "images / toobin_court.cnn.webp" alt = "Джеффри Toobin "> p> Сынчылардын купулуна толгон мыкты сатуучунун автору, i> Тогуз:! - КӨЧҮРМӨ УЛАНТЫЛУУДА -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Сүрөттөмө

• JQuery Mobile колдонгондо, ар бир барак үчүн өзүнчө HTML файлын иштеп чыгуунун кажети жок. Анын ордуна, бир HTML файлынын тулку элементинин ар бир бети үчүн бир див элементин, анын "баракка" коюлган маалымат-ролу атрибутун коддогуңуз келет.
• Ар бир div элементи үчүн id атрибутун башка беттердеги a> элементтериндеги href атрибуттары аркылуу жетүүгө боло турган толтуруучу маанисине койдуңуз.

Диалог кутучаларын жана өткөөлдөрүн кантип колдонсо болот

15-8-сүрөттө шилтемени басканда ачылуучу диалог кутучасын кантип түзүү керектиги көрсөтүлгөн. Ал үчүн баарлашуу терезесин каалаган баракчадай коддоңуз. Бирок ошол бетке өткөн a> элементинде data-rel атрибутун анын мааниси катары "dia-log" менен коддогонсуз.

Бул сүрөттөгү мисалдардан көрүнүп тургандай, jQuery Mobile CSS файлы диалог терезесин кадимки веб баракчадан башкача форматтайт. Демейки шартта, диалог терезеси алдыңкы пландагы ак текст менен караңгы фонго ээ болот жана баш жана төмөнкү колонтитул барактын кеңдигине кирбейт. Диалог терезесинде, ошондой эле, колдонуучу мурунку бетке кайтуу үчүн таптап турушу керек болгон "X" белгиси болот.

Башка бетке же диалог терезесине өткөн a> элементин коддогондо, анда ушул сүрөттөгү таблицада кыскача баяндалган алты өтүүнүн бирин көрсөтүү үчүн, маалыматка өтүү атрибутун колдонсоңуз болот. Бул өткөөлдөрдүн ар бири iPhone сыяктуу мобилдик шайман колдонгон эффектти туурап турат.

Колдонууга болот өткөөлдөр

Баракты диалог терезеси катары "поп" өтүүсү менен ачкан HTML:

a href = "# toobin" data-rel = "dialog" data-o'tish = "pop">

Баракчаны "өчүү" өтүүсү менен ачкан HTML:

a href = "# toobin" data-o'tish = "fade">

Сүрөттөмө

• HTML үчүн a баарлашуу терезеси каалаган баракча коддолгон жол менен коддолгон. Бирок, баракчага шилтеме кылган a> элементи data-rel атрибутун "диалог" маанисинде камтыйт. Диалог терезесин жабуу үчүн, колдонуучу кутучанын баш жагындагы X белгисин басат.
• Барактын же диалог кутусунун ачылыш жолун көрсөтүү үчүн, жогорудагы таблицада көрсөтүлгөн маанилердин бири менен берилиштерге өтүү атрибутун колдонсоңуз болот. Эгер шайман сиз көрсөткөн өтүүнү колдобосо, атрибут эске алынбайт.
• Диалог терезесинин стилин jQuery Mobile CSS файлы аткарат.

Баскычтарды кантип түзүү керек

15-9-сүрөттө бир барактан экинчи бетке өтүү үчүн баскычтарды кантип колдонуу керектиги көрсөтүлгөн. Ал үчүн a> элементи үчүн маалымат-ролу атрибутун "баскычка" койсоңуз болот, калганын jQuery Mobile жасайт.
Бирок, баскычтар үчүн дагы бир башка атрибуттарды орното аласыз. Эгер сиз, мисалы, ушул сүрөттөгү алгачкы эки баскычка окшош эки же андан көп баскычтын жанаша пайда болушун кааласаңыз, анда берилиштер киргизилген атрибутту "true" кылып койсоңуз болот.

Эгерде сиз jQuery Mobile тарабынан берилген 18 сүрөтчөнүн бир баскычына кошууну кааласаңыз, анда сиз дагы data-icon атрибутун коддойсуз. Мисалы, ушул мисалдагы үчүнчү баскычта "жок кылуу", төртүнчү баскычта "үй" сүрөтчөсү колдонулат. Бул сөлөкөттөрдүн бардыгы сиз жергиликтүү мобилдик тиркемеде көрүнүп турган сөлөкөттөргө окшош. Баса, бул сүрөтчөлөр баракчага кириши керек болгон өзүнчө файлдар эмес. Анын ордуна, аларды jQuery Mobile китепканасы камсыз кылат.

Эгерде сиз бул сүрөттөгү Ооба, Жок жана Балким баскычтары сыяктуу эки же андан ашык баскычтарды горизонталдык топтоону кааласаңыз, анда a> элементтерин div-элементтин ичиндеги "controlgroup" маалымат-ролу атрибуту болгон баскычтардын кодун жана Анын горизонталдуу түрү катары. Же болбосо, баскычтарды тигинен топтоо үчүн, маалымат типиндеги атрибутту "вертикалдык" кылып өзгөртө аласыз.

Эгерде сиз баскыч үчүн data-rel атрибутун "артка" жана href атрибутун фунт белгисине (#) койсоңуз, анда баскыч аны чакырган бетке кайтып келет. Башкача айтканда, баскыч Артка баскычы сыяктуу иштейт. Бул баракчанын мазмунундагы акыркы баскыч менен чагылдырылган.

Акыркы эки баскыч, барактын колонтитулунда баскычтардын кантип пайда болгонун көрсөтөт. Бул жерде иконалар жана текст кара фондо ак түстө. Бул учурда, төмөнкү колонтитул үчүн класс атрибуту "ui-bar" деп коюлган, ал jQuery Mobile колонтитулунун мазмунуна бир аз көбүрөөк орун бошотушу керектигин айтат. Бул тууралуу 15-12-сүрөттөн көбүрөөк билүүгө болот.

Бөлүмдөгү баскычтар үчүн HTML:

! - Киргизилген баскычтар үчүн, маалымат линиясынын атрибутун true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data деп коюңуз -role = "button" data-inline = "true"> OK / a>! - Баскычка сөлөкөт кошуу үчүн data-icon атрибутун -> a 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"> yes / a> 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 "> Tweet this Page / a> / footer>

Сүрөттөмө

• Веб-баракчага баскычты кошуу үчүн, a> элементин, анын маалымат-ролу атрибуту "баскычка" коюлган коду менен жазасыз.

Багыттоо тилкесин кантип түзүү керек

15-10-сүрөттө веб-баракчага навигациялык тилкени кантип кошууга боло тургандыгы көрсөтүлгөн. Ал үчүн, сиз div элементин, анын маалымат ролу “navbar” деп коесуз. Бул элементтин ичинде, сиз навигация тилкесиндеги нерселер үчүн а> элементтерин камтыган li элементтерин камтыган ul элементин коддойсуз. Бирок, 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 "> Home / a> / li> li> a href =" # speakers "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 элементин башкы элементтин ичинде кодуңуз. Андан кийин, div элементи үчүн маалымат-ролу атрибутун "navbar" кылып коюңуз.
• Div элементинде, ар бир шилтеме үчүн бирден li элемент камтылган ul элементин кодуңуз.
• Ар бир li элементинин ичинде, a> элементин href атрибуту менен коддоо керек, ал шилтеме өтүшү керек болгон барак үчүн орунду ээлейт. Андан кийин, маалымат-сөлөкөт атрибутун өзүңүз тандаган сүрөтчөгө коюңуз.
• Чабыттоо тилкесиндеги активдүү нерсе үчүн, "ui-btn-active" класс атрибутун орнотуңуз.Андан кийин, бул нерсенин түсү навигация тилкесиндеги башка нерселерге караганда жеңилирээк болот.
• Багыттоо тилкесиндеги ар бир нерсеге 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-сүрөттөгү навигация тилкесинен көрдүңүз жана бул сүрөттөгү экинчи навигация тилкесинин кодунан көрө аласыз. Бул жерде маалымат-тема атрибуту "e" темасын аталышка жана "d" темасын навигация тилкесиндеги элементтерге колдонот.

Темаларды колдонуунун дагы бир жолу - бул элементтин класс атрибутун теманы көрсөткөн класстын аталышына коюу. Бул таблицадан кийинки биринчи мисал менен чагылдырылган. Бул жерде class атрибуту div элементине “ui-bar” жана “ui-bar- b” класстарын колдонуу үчүн колдонулат. Натыйжада, jQuery Mobile элементке тилке үчүн демейки стилин колдонот, андан кийин b стилин ошол стилге колдонот. Кийинки беттерде сиз бул стилдин башка мисалдарын көрө аласыз.

Сураныч, ушул сүрөттөгү таблицада теманы е үнөмдүү колдонуу керектиги айтылган. Себеби ал нерсени баса белгилөө үчүн жакшы иштеген, бирок чоң дозада жагымдуу болбогон кызгылт сары түстү колдонот. Бул сүрөттөгү экинчи баш жана навигация тилкесинде чагылдырылган, аны түстө көргөндө ызы-чуу түшүп калат.

Жалпысынан, демейки стилдер жана адатта жакшы иштешкен алгачкы үч тема менен жүргөн жакшы. Андан кийин, сиз дагы бир нерсе керек деп ойлогондо, 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 =" # speakers "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 темасы:

Теманы колдонуунун эки жолу:

Дата-тема атрибутун колдонуу менен:

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 менен, веб-иштеп чыгуучулар эми жергиликтүү мобилдик тиркемелер сыяктуу көрүнгөн жана сезилген өзгөчөлүктөргө бай веб-сайттарды кура алышат.