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 элементін оның id атрибутына жатқызады, яғни сілтемені басу арқылы оқырман файлдағы екінші бетке шығады.

Бұл мысалда тек екі парақ көрсетілгенімен, сіз бір 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> Джеффри Тубинбр> 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 Town Hall / h1> / header> section data-role = «content»> h3> Жоғарғы тоғыз: br> Қара киінген құпиялар / h3> img src = «images / toobin_court.cnn.webp» alt = «Джеффри Toobin «> p> Сыншылардың ең жақсы сатылған авторы, мен> Тоғыз:! - КӨШІРМЕ ЖАЛҒАСАДЫ -> / бөлім> footer data-role =» footer «> h4> © 2011 / h4> / footer> / div>

Сипаттама

• JQuery Mobile қолданған кезде әр парақ үшін бөлек HTML файлын жасау қажет емес. Оның орнына, жеке HTML файлының негізгі элементінде сіз әр бетке бір div элементін «парақ» деп орнатылған деректер-рөл атрибутымен кодтайсыз.
• Әрбір 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> элементі мәні ретінде «диалог» бар data-rel атрибутын қамтиды. Диалогтық терезені жабу үшін пайдаланушы терезенің тақырыбындағы Х-ті басады.
• Беттің немесе диалогтық терезенің ашылу жолын көрсету үшін жоғарыдағы кестедегі мәндердің бірімен бірге деректерге ауысу атрибутын пайдалануға болады. Егер құрылғы сіз көрсеткен ауысуды қолдамаса, төлсипат еленбейді.
• Диалогтық терезеге сәндеуді jQuery Mobile CSS файлы орындайды.

Түймелер қалай жасалады

15-9 суретте бір беттен екінші параққа өту үшін батырмаларды қалай қолдану керектігі көрсетілген. Мұны істеу үшін сіз a> элементі үшін деректер рөлінің төлсипатын «батырмаға» орнатасыз, ал қалғанын jQuery Mobile орындайды.
Сонымен қатар, батырмалардың басқа төлсипаттарын да орнатуға болады. Егер сіз, мысалы, осы суреттегі алғашқы екі батырма тәрізді екі немесе одан да көп батырманың қатар пайда болуын қаласаңыз, сіз деректер кірістірілген төлсипатты «шын» етіп орната аласыз.

Егер сіз батырмаға jQuery Mobile ұсынатын 18 белгішенің бірін қосқыңыз келсе, онда сіз сонымен қатар деректер белгішесінің атрибутын кодтайсыз. Мысалы, осы мысалдағы үшінші батырма «жою» белгісін, ал төртінші батырма «үй» белгісін қолданады. Барлық осы белгішелер жергілікті ұялы қосымшадан көруге болатын белгішелерге ұқсайды. Айтпақшы, бұл белгішелер параққа қол жетімді болатын бөлек файлдар емес. Оның орнына оларды jQuery Mobile кітапханасы ұсынады.

Егер сіз осы суреттегі «Иә», «Жоқ» және «Мүмкін» батырмалары сияқты көлденеңінен екі немесе одан да көп батырманы топтастырғыңыз келсе, онда сіз «басқару тобы» бар мәліметтер рөлінің атрибуты ретінде div элементіндегі батырмалар үшін a> элементтерін кодтай аласыз және Деректер типінің төлсипаты ретінде «көлденең». Түймелерді тігінен топтау үшін деректер типінің атрибутын «тік» етіп өзгертуге болады.

Егер батырмаға 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»> жоқ / 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>

Сипаттама

• Түймені веб-бетке қосу үшін сіз 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 элементі ішінде ul сілтемесі үшін әр сілтеме үшін бір элемент болатын кодты кодтаңыз.
• Әр li элементінде сілтеме өтуі керек парақ үшін толтырғышты пайдаланатын href атрибутымен a> элементін кодтаңыз. Содан кейін деректер белгішесінің төлсипатын таңдаған белгішеге қойыңыз.
• Шарлау жолағындағы белсенді элемент үшін сынып төлсипатын «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 суреттегі навигациялық жолақтан көрдіңіз және сіз оны осы суреттегі екінші навигация тақтасының кодынан көре аласыз. Мұнда деректер-тақырып атрибуты «е» тақырыбын тақырыпқа, ал «d» тақырыбын шарлау жолағындағы элементтерге қолданады.

Тақырыптарды қолданудың басқа әдісі - бұл элементтің сынып атрибутын тақырыпты көрсететін сынып атауына орнату. Бұл кестеден кейінгі бірінші мысалда көрсетілген. Мұнда класс атрибуты div элементіне «ui-bar» және «ui-bar- b» кластарын қолдану үшін қолданылады. Нәтижесінде, jQuery Mobile элементке жолаққа арналған әдепкі стильді қолданады, содан кейін b тақырыбын осы стильге қолданады. Келесі беттерде сіз осы стильдің басқа мысалдарын көресіз.

Назар аударыңыз, бұл суреттегі кестеде тақырыпты үнемді пайдалану керек. Себебі ол затты екпіндеу үшін жақсы жұмыс істейтін сарғыш түсті пайдаланады, бірақ үлкен дозада тартымды болмайды. Мұны суреттегі екінші тақырып және навигациялық тақта суреттейді, оны түрлі-түсті көргенде дау шығуға бейім.

Жалпы, әдепкі стильдермен және әдетте жақсы үйлесетін алғашқы үш тақырыппен жүрген дұрыс. Содан кейін 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 = «үй «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-дің бес тақырыбы:

Тақырыпты қолданудың екі әдісі:

Деректер тақырыбының төлсипатын қолдану арқылы:

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 көмегімен веб-әзірлеушілер енді мобильді қосымшалар сияқты көрінетін және сезінетін мүмкіндіктерге бай веб-сайттар құра алады.