JQuery Mobile bilan mobil veb-sayt yarating

Tarkib

• Bitta HTML faylida bir nechta sahifalarni qanday kodlash kerak
• Tavsif
• Muloqot oynalari va o'tishlarni qanday ishlatish
• Foydalanish mumkin bo'lgan o'tish
• Tavsif
• Tugmalar qanday yaratiladi
• Tavsif
• Navigatsiya panelini qanday yaratish kerak
• Navigatsiya paneli uchun HTMLni qanday kodlash kerak:
• JQuery Mobile bilan tarkibni qanday formatlash mumkin
• JQuery Mobile foydalanadigan standart uslublar
• Tavsif
• HTML elementlariga mavzular qanday qo'llanilishi
• Mavzuni qo'llashning ikkita usuli:
• Tavsif
• Perspektiv

Bu 15-bobdan tahrirlangan parcha Murachning HTML5 va CSS3 Zak Ruvalcaba va Anne Boem tomonidan.

jQuery Mobile - bu bepul veb-saytlarni ishlab chiqish uchun foydalanishingiz mumkin bo'lgan, ochiq manbali, o'zaro faoliyat platformali, JavaScript-ni kutubxonasi. Ushbu kutubxona sizga mahalliy mobil dastur sahifalariga o'xshash va o'xshash sahifalarni yaratishga imkon beradi.

Hozirda jQuery Mobile beta-sinov versiyasi sifatida mavjud bo'lsa-da, ushbu versiya sizga ajoyib mobil veb-saytni ishlab chiqish uchun kerak bo'lgan barcha xususiyatlarni taqdim etadi. Natijada siz uni darhol ishlatishni boshlashingiz mumkin. Bundan tashqari, ushbu versiyani doimiy ravishda takomillashtirilishini kutishingiz mumkin, shuning uchun jQuery Mobile yanada yaxshilanadi.

Ushbu maqolada siz mobil veb-sayt sahifalarini yaratishning asosiy usullarini bilib olasiz. Bunga dialog oynalari, tugmalar va navigatsiya panellaridan foydalanish kiradi.

Bitta HTML faylida bir nechta sahifalarni qanday kodlash kerak

Ekran veb-sahifasi uchun veb-sahifalarni ishlab chiqish usulidan farqli o'laroq, jQuery Mobile sizga bitta HTML-faylda bir nechta sahifalar yaratishga imkon beradi. Bu 15-7-rasm bilan tasvirlangan. Bu erda siz ushbu sahifalar uchun HTML bilan birga saytning ikkita sahifasini ko'rishingiz mumkin. Ajablanarlisi shundaki, ikkala sahifa bitta HTML fayli ichida kodlangan.

Har bir sahifa uchun siz bitta div elementini "page" bilan ma'lumotlar-roli atributining qiymati sifatida kodlaysiz. Keyin, ushbu div elementlarining har birida siz har bir sahifaning sarlavhasi, tarkibi va altbilgisi uchun div elementlarini kodlaysiz. Keyinchalik, HTML fayli yuklanganda, fayl tanasida birinchi sahifa ko'rsatiladi.

HTML-fayldagi sahifalar orasidagi bog'lanish uchun siz 7-bobning 7-11-rasmlarida ko'rsatilgandek plomba belgilaridan foydalanasiz. Masalan, ushbu misoldagi birinchi sahifadagi a> elementi foydalanuvchi "#toobin" ga o'tganda h2 yoki img elementi, bu havola uchun tarkib sifatida kodlangan. Bu "toobin" bilan div elementini uning id atributi deb anglatadi, ya'ni havolani bosish o'quvchini faylning ikkinchi sahifasiga olib boradi.

Ushbu misolda faqat ikkita sahifa ko'rsatilgan bo'lsa-da, bitta HTML fayli ichida ko'plab sahifalarni kodlashingiz mumkin. Shunga qaramay, barcha sahifalar, ularning rasmlari, JavaScript va CSS fayllari bitta HTML fayli bilan yuklanganligini unutmang. Natijada, bitta faylda juda ko'p sahifalarni saqlasangiz, yuklanish vaqti ortiqcha bo'ladi. Bu sodir bo'lganda, siz o'zingizning sahifalaringizni bir nechta HTML fayllarga ajratishingiz mumkin.

Bitta HTML fayli tanasida joylashgan ikkita sahifa uchun HTML:

div data-role = "page"> header data-role = "header"> h1> SJV shahar zali / h1> / header> section data-role = "content"> h3> 2011-2012 ma'ruzachilari / h3> a href = "# toobin"> h4> Jeffri Toobinbr> 2011 yil 19 oktabr / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - GAPIRuvchilarning Qolgan elementlari - -> / 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> Oliy to'qqiz: br> Qora kiyingan sirlar / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffri Toobin "> p> Taniqli taniqli sotuvchilarning muallifi, men> To'qqiz:! - NUSHASI DAVOM ETADI -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Tavsif

• JQuery Mobile-dan foydalanganda har bir sahifa uchun alohida HTML fayli ishlab chiqishingiz shart emas. Buning o'rniga, bitta HTML-faylning asosiy elementi ichida siz har bir sahifa uchun bitta div elementini ma'lumotlar-roli atributini "sahifa" ga o'rnatasiz.
• Har bir div elementi uchun id atributini boshqa sahifalarning a> elementlarida href atributlari bilan kirish mumkin bo'lgan joyni to'ldiruvchi qiymatiga o'rnatasiz.

Muloqot oynalari va o'tishlarni qanday ishlatish

15-8-rasmda havolani bosganda ochiladigan dialog oynasini yaratish tartibi ko'rsatilgan. Buning uchun siz dialog oynasini har qanday sahifada bo'lgani kabi kodlaysiz. Ammo ushbu sahifaga kiradigan a> elementida siz data-rel atributini qiymati sifatida "dia-log" bilan kodlaysiz.

Ushbu rasmdagi misollardan ko'rinib turibdiki, jQuery Mobile CSS fayli dialog oynasini oddiy veb-sahifadan farq qiladi. Odatiy bo'lib, dialog oynasi quyuq fonga ega, old fon oqi va sarlavha va altbilgi sahifaning kengligini qamrab olmaydi. Muloqot oynasida sarlavhada "X" belgisi mavjud bo'lib, foydalanuvchi oldingi sahifaga qaytish uchun uni bosishi kerak.

Boshqa sahifaga yoki dialog oynasiga o'tadigan a> elementini kodlashda, shuningdek, ushbu rasmdagi jadvalda jamlangan oltita o'tishdan birini ko'rsatish uchun ma'lumotlar-o'tish atributidan foydalanishingiz mumkin. Ushbu o'tishlarning har biri iPhone kabi mobil qurilma ishlatadigan effektni taqlid qilish uchun mo'ljallangan.

Foydalanish mumkin bo'lgan o'tish

Sahifani "pop" o'tish bilan dialog oynasi sifatida ochadigan HTML:

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

Sahifani "xira" o'tish bilan ochadigan HTML:

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

Tavsif

• A uchun HTML dialog oynasi har qanday sahifani kodlash usuli bilan kodlangan. Biroq, sahifaga bog'langan a> elementi qiymati sifatida "dialog" bilan data-rel atributini o'z ichiga oladi. Muloqot oynasini yopish uchun foydalanuvchi katakchaning sarlavhasidagi X ga tegadi.
• Sahifani yoki dialog oynasini ochish usulini ko'rsatish uchun yuqoridagi jadvaldagi qiymatlardan biri bilan ma'lumotlar-o'tish atributidan foydalanishingiz mumkin. Agar qurilma siz ko'rsatgan o'tishni qo'llab-quvvatlamasa, atribut e'tiborga olinmaydi.
• Muloqot oynasi uchun uslub jQuery Mobile CSS fayli tomonidan amalga oshiriladi.

Tugmalar qanday yaratiladi

15-9-rasmlarda bir sahifadan ikkinchisiga o'tish uchun tugmachalardan qanday foydalanish ko'rsatilgan. Buning uchun siz a> elementi uchun ma'lumotlar-rol atributini "tugma" ga o'rnatgansiz, qolganini jQuery Mobile bajaradi.
Shu bilan birga, siz tugmachalar uchun boshqa ba'zi bir atributlarni o'rnatishingiz mumkin. Agar siz, masalan, ushbu rasmdagi dastlabki ikkita tugma singari, ikkita yoki undan ortiq tugma yonma-yon ko'rinishini xohlasangiz, ma'lumotlar qatoriga kiritilgan atributni "rost" ga o'rnatishingiz mumkin.

Agar siz jQuery Mobile tomonidan taqdim etilgan 18 ta belgidan birini tugmachaga qo'shmoqchi bo'lsangiz, siz shuningdek ma'lumotlar-belgi atributini kodlaysiz. Masalan, ushbu misoldagi uchinchi tugmachada "o'chirish" belgisi, to'rtinchi tugma esa "uy" belgisidan foydalaniladi. Ushbu piktogrammalarning barchasi mahalliy mobil ilovada ko'rishingiz mumkin bo'lgan piktogrammalarga o'xshaydi. Aytgancha, ushbu piktogramma sahifaga kirishi kerak bo'lgan alohida fayllar emas. Buning o'rniga ular jQuery Mobile kutubxonasi tomonidan taqdim etiladi.

Agar siz ushbu rasmdagi "Ha", "Yo'q" va "Ehtimol" tugmachalari kabi ikki yoki undan ortiq tugmachalarni gorizontal ravishda guruhlashni istasangiz, "element guruhi" tarkibidagi ma'lumotlar elementining atributi sifatida "boshqarish guruhi" ga ega bo'lgan tugmalar uchun a> elementlarini kodlashingiz mumkin va Ma'lumotlar turidagi atribut sifatida "gorizontal". Yoki tugmachalarni vertikal ravishda guruhlash uchun ma'lumotlar turidagi atributni "vertikal" ga o'zgartirishingiz mumkin.

Agar tugma uchun data-rel atributini "orqaga" va href atributini funt belgisiga (#) o'rnatgan bo'lsangiz, tugma uni chaqirgan sahifaga qaytadi. Boshqacha qilib aytganda, tugma "Orqaga" tugmasi kabi ishlaydi. Bu sahifa tarkibidagi so'nggi tugma bilan tasvirlangan.

So'nggi ikkita tugma sahifaning altbilgisida qanday tugmalar paydo bo'lishini ko'rsatadi. Bu erda piktogramma va matn qora fonga qarshi oq rangga ega. Bunday holda, altbilgi uchun sinf atributi "ui-bar" ga o'rnatiladi, bu jQuery Mobile-ga altbilgi tarkibiga biroz ko'proq joy ajratishi kerakligini aytadi. Siz bu haqda ko'proq ma'lumotni 15-12 rasmdan bilib olasiz.

Bo'limdagi tugmalar uchun HTML:

! - Kiritilgan tugmalar uchun ma'lumotlar satrining atributini true -> a href = "#" data-role = "button" data-inline = "true"> Bekor qilish / a> a href = "#" ma'lumotlarini o'rnating -role = "button" data-inline = "true"> OK / a>! - Tugmachaga belgi qo'shish uchun data-icon atributidan foydalaning -> a href = "#" data-role = "tugmasi "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - tugmachalarni guruhlash uchun div elementidan foydalaning quyidagi atributlar -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Ha / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Yo'q / a> a href = "#" data-role = "button"> Ehtimol / a> / div>! - Kimga a Back tugmachasini kodlang, data-rel atributini back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> oldingi sahifaga qaytish / a >

Taglavhadagi tugmalar uchun HTML:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Facebook-ga qo'shish / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Sahifani tweet qiling / a> / footer>

Tavsif

• Veb-sahifaga tugmachani qo'shish uchun siz ma'lumotlar elementi xususiyati "tugmachasi" bilan o'rnatiladigan a> elementini kodlaysiz.

Navigatsiya panelini qanday yaratish kerak

15-10-rasmda veb-sahifaga qanday qilib navigatsiya panelini qo'shishingiz mumkinligi ko'rsatilgan. Buning uchun siz div elementini "navbar" ga o'rnatilgan ma'lumotlar roli bilan kodlaysiz. Ushbu element ichida siz ul elementini o'z ichiga olgan li elementlarini kodlaysiz, ular navigatsiya panelidagi elementlar uchun a> elementlarini o'z ichiga oladi. Shunga qaramay, a> elementlari uchun ma'lumotlar roli atributini kodlamasligingizga e'tibor bering.

Navigatsiya panelidagi elementlarning rangini o'zgartirish uchun ushbu misoldagi kod har bir element uchun data-theme-b atributini o'z ichiga oladi. Natijada, jQuery Mobile har bir elementning fon rangini qora rangdan o'zgartiradi, bu odatiy hisoblanadi, jozibador ko'k rangga. Bundan tashqari, ushbu kod faol tugma uchun sinf atributini "ui-btn-active" ga o'rnatadi, shuning uchun jQuery Mobile faol tugma rangini ochroq ko'k rangga o'zgartiradi. Bu jQuery Mobile tomonidan ishlatiladigan formatlashni qanday o'zgartirishingiz mumkinligini ko'rsatadi va siz bu haqda ko'proq bilib olasiz.

Navigatsiya paneli uchun HTML:

header data-role = "header"> h1> SJV shahar zali / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Uy / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> ma'ruzachilar / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Biz bilan bog'laning / a> / li> / ul> / div> / header>

Navigatsiya paneli uchun HTMLni qanday kodlash kerak:

• Div elementini sarlavha elementida kodlash. So'ngra div elementi uchun ma'lumotlar-rol atributini "navbar" ga o'rnating.
• Div elementi ichida har bir havola uchun bitta li elementni o'z ichiga olgan ul elementini kodlang.
• Har bir li elementida, a> elementini href atributi bilan kod kiriting, u erda havola o'tishi kerak bo'lgan sahifa uchun joy topuvchisi ishlatiladi. So'ngra ma'lumotlar-belgi atributini siz tanlagan belgiga o'rnating.
• Navigatsiya panelidagi faol element uchun class atributini "ui-btn-active" ga sozlang.Keyinchalik, ushbu elementning rangi navigatsiya panelidagi boshqa narsalarga qaraganda engilroq bo'ladi.
• Shuningdek, jQuery Mobile mavzusini navigatsiya panelidagi har bir elementga qo'llash uchun ma'lumotlar mavzusi atributidan foydalanishingiz kerak. Aks holda, satrdagi tugmachalar sarlavhaning qolgan qismi bilan bir xil rangga ega bo'ladi. Mavzular haqida ko'proq bilish uchun 15-12-rasmga qarang.

JQuery Mobile bilan tarkibni qanday formatlash mumkin

Siz allaqachon ko'rganingizdek, jQuery Mobile veb-sahifaning tarkibiy qismlarini o'z uslublar jadvaliga asosan avtomatik ravishda shakllantiradi. Endi siz bu haqda ko'proq bilib olasiz, shuningdek jQuery Mobile ishlatadigan standart uslubni qanday sozlashni bilib olasiz.

JQuery Mobile foydalanadigan standart uslublar

15-13-rasmda jQuery Mobile-ning umumiy HTML elementlari uchun ishlatadigan standart uslublari ko'rsatilgan. Barcha uslublar uchun jQuery Mobile brauzerning ko'rsatish mexanizmiga tayanadi, shuning uchun uning uslubi minimaldir. Bu yuklanish vaqtini tez ushlab turadi va ortiqcha CSS-ning sahifaga yuklaydigan yukini minimallashtiradi.

Ko'rib turganingizdek, jQuery Mobile uslubi shu qadar samarali bo'ladiki, o'zingizning CSS uslublar jadvalingizni taqdim etish orqali uning uslubini o'zgartirishingiz shart emas. Masalan, tartibsiz ro'yxatdagi elementlar orasidagi bo'shliq va jadvalni formatlash har ikkalasi ham qabul qilinadi. Shuningdek, kulrang fonda qora rang mahalliy mobil ilovalar uchun formatlash bilan mos keladi.

Tavsif

• Odatiy bo'lib, jQuery Mobile sahifa uchun HTML elementlariga uslublarni avtomatik ravishda qo'llaydi. Ushbu uslublar nafaqat jozibali, balki brauzerning o'ziga xos uslublarini ham taqlid qiladi.
• Odatiy bo'lib, jQuery Mobile har bir mobil sahifaning chap, o'ng, yuqori va pastki qismlariga ozgina to'ldirishni qo'llaydi.
• Odatiy bo'lib, havolalar odatdagi matndan biroz kattaroqdir. Bu foydalanuvchi uchun havolalarni bosishni osonlashtiradi.
• Odatiy bo'lib, havolalar shrift rangi sifatida ko'k bilan chizilgan.

HTML elementlariga mavzular qanday qo'llanilishi

Ba'zi hollarda, jQuery Mobile ishlatadigan standart uslublarni o'zgartirishni xohlaysiz. Siz buni 15-10 raqamli navigatsiya panelida ko'rgansiz. Standart uslublarni o'zgartirish uchun siz jQuery Mobile taqdim etadigan beshta mavzudan foydalanishingiz mumkin. Bular 15-12-rasmlarda umumlashtirilgan. Bu erda yana ushbu mavzular mahalliy mobil ilovaning ko'rinishini taqlid qilish uchun mo'ljallangan.

Mavzularning qo'llanilish usullaridan biri bu ma'lumotlar harfi atributini qiymati sifatida harf harfi bilan kodlashdir. Siz buni 15-10-rasmdagi navigatsiya panelida ko'rgansiz va buni ushbu rasmdagi ikkinchi navigatsiya paneli kodida ko'rishingiz mumkin. Bu erda ma'lumotlar mavzusi atributi "e" mavzusini sarlavhaga va "d" mavzusini navigatsiya panelidagi narsalarga qo'llaydi.

Mavzularni qo'llashning boshqa usuli - bu element uchun sinf atributini mavzuni ko'rsatadigan sinf nomiga o'rnatish. Bu jadvaldan keyingi birinchi misol bilan tasvirlangan. Bu erda class atributi div elementiga "ui-bar" va "ui-bar- b" sinflarini qo'llash uchun ishlatiladi. Natijada, jQuery Mobile dastavval element uchun satr uchun standart uslubni qo'llaydi, so'ngra b mavzuni ushbu uslubga qo'llaydi. Keyingi sahifalarda ushbu uslubning boshqa misollarini ko'rasiz.

Iltimos, ushbu rasmdagi jadvalda mavzudan tejamkorlik bilan foydalanish kerakligi ko'rsatilgan. Buning sababi shundaki, u elementni ta'kidlash uchun yaxshi ishlaydigan, ammo katta dozalarda jozibali bo'lmagan to'q sariq rangdan foydalanadi. Bu rasmdagi ikkinchi sarlavha va navigatsiya paneli bilan tasvirlangan bo'lib, uni rangda ko'rganingizda ziddiyatli bo'ladi.

Umuman olganda, odatda yaxshi ishlaydigan standart uslublar va dastlabki uchta mavzu bilan qolish yaxshiroqdir. Keyinchalik, sizga ko'proq narsa kerak deb o'ylaganingizda d va e mavzularida tajriba qilishingiz mumkin.

Ikkinchi sarlavha va navigatsiya paneli uchun HTML:

header data-role = "header" data-theme = "e"> h1> SJV shahar zali / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Uy / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> Karnaylar / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> yangiliklar / a> / li> / ul> / div> / header>

Beshta jQuery Mobile mavzusi:

Mavzuni qo'llashning ikkita usuli:

Ma'lumotlar mavzusi atributidan foydalanib:

li> a href = "# home" data-icon = "home" data-theme = "b"> uy / a> / li>

Mavzuni ko'rsatadigan sinf atributidan foydalanib:

div> Bar / div>

Tavsif

• JQuery Mobile-ga kiritilgan beshta mavzudan foydalanib, HTML elementlari uchun standart uslublarga tegishli o'zgarishlar kiritishingiz mumkin.
• O'zingizning CSS uslublar jadvalingizni jQuery Mobile dasturi bilan ishlatishingiz mumkin bo'lsa ham, iloji boricha bunday qilishdan saqlanishingiz kerak.

Perspektiv

So'nggi bir necha yil ichida mobil qurilmalardan foydalanish keskin oshdi. Shu sababli, ushbu qurilmalardan foydalanish oson veb-saytlarni loyihalashtirish tobora muhim ahamiyat kasb etmoqda. Odatda bu alohida veb-sayt ishlab chiqishni anglatsa-da, bu sizning Internetdagi mavjudligingizni saqlashning muhim jihati bo'lishi mumkin.

Yaxshiyamki, jQuery Mobile paydo bo'lishi bilan mobil veb-sayt yaratish vazifasi ancha osonlashdi. Endi mobil veb-sahifalar sarlavhalar, paragraflar, havolalar va kichik rasmlarni o'z ichiga olgan statik sahifalar bilan chegaralanmaydi. JQuery Mobile yordamida veb-ishlab chiquvchilar endilikda mahalliy mobil dasturlarga o'xshash va o'xshash xususiyatlarga boy veb-saytlarni yaratishlari mumkin.