Javob beruvchi jadval yaratish.
Kichkina ekranda katta hajmli ma'lumotlarni ko'rsatish har doim boshqotirma. Uni qanday yo'llar bilan hal qila olasiz va mobil telefonda qulay stol qanday bo'lishi kerak?
Shuni ta'kidlash kerakki, jadvallar ko'pincha nafaqat mobil qurilmalarda, balki ekrandan tashqariga chiqadi: shunday bo'ladiki, ular ulkan monitorga yoki hatto bir nechta ustunlarga mos keladiganidan ko'ra ko'proq ustunlar yoki qatorlarni o'z ichiga oladi. Biroq, ekran qanchalik kichik bo'lsa, foydalanish qulayligi bilan bog'liq muammolar paydo bo'lishi ehtimoli shunchalik yuqori.
Jadval ko'rinishidagi asosiy elementlar tarkibning uyg'unligi va mazmunli atributlaridir. Har ikkisi ham mobil stollar uchun ayniqsa muhimdir. Avval siz katta monitorlar uchun qulay jadval yaratishingiz kerak, keyin esa kichik ekranlar uchun versiyani yaratishingiz kerak. Bunday ehtiyoj sizning jadvalingiz tarkibini yaxshilash va barcha foydalanuvchilar uchun qulayroq qilish uchun ajoyib sabab bo'lishi mumkin.
Mobil ekranda ko'rsatiladigan jadval ustunlari soni ularning kengligiga bog'liq bo'lib, ularning mazmuni masshtabdan foydalanmasdan aniq bo'lishi kerak.
Murakkab yoki uzun matnlar uchun, masalan, taqqoslash jadvallarida, tor mobil ekranga faqat 2 ta ustun mos keladi. Va agar jadval asosan raqamlar bilan to'ldirilgan bo'lsa, ustunlar torroq bo'lishi mumkin va shuning uchun ko'proq mos keladi.
Milliy regbi ligasi statistikasi raqamlardan iborat, shuning uchun 11 ta ustun gorizontal aylantirishni talab qilmasdan mobil ekranga qulay tarzda joylashadi. E'tibor bering, bu natijaga faqat birinchi ustundagi raqib jamoa logotipi va bilmaganlar uchun tushunarsiz bo'lgan qisqartmalardan foydalanish orqali erishiladi. Biroq o'yinchilar haqidagi bunday batafsil statistik ma'lumotlar faqat regbi muxlislarini qiziqtiradi.
Telefonni aylantirish oxirgi chora hisoblanadi
Agar siz telefoningizni gorizontal ravishda aylantirsangiz, ekranda ko'proq ustunlar joylashadi. Biroq, shu bilan birga, chiziqlar soni kamayadi va foydalanuvchilar smartfonni aylantirishni zerikarli deb bilishlari mumkin (ayniqsa, agar u aylanish qulfiga ega bo'lsa). Jadvalning katta kengligi bu kamchiliklarni oqlaydimi, diqqat bilan o'ylab ko'ring.
Citi veb-saytida kredit kartalarni solishtirish uchun foydalanuvchilar ko'rsatmalarga amal qilishlari kerak: "Kredit kartalarini taqqoslashni davom ettirish uchun telefoningizni gorizontal ravishda aylantiring." Shu bilan birga, aylanayotganda, ekranning katta qismini kredit kartalarining ulkan tasvirlari egallaydi, ular aylanayotganda joyida o'rnatiladi va jadval tarkibi uchun juda kam joy qoldiradi. Bu ko'plab mobil saytlarning xatosi: agar ish stolida tasvirlar ustun uchun yaxshi sarlavha bo'lishi mumkin bo'lsa, unda mobil telefonda ular kerak.
Bir nechta vertikal ekranni o'z ichiga olgan har qanday jadvalda yopishqoq ustun sarlavhalari foydalanuvchiga kontekst haqida chalkashmaslikka yordam beradi.
Chapdagi Best.Buy bilan taqqoslash jadvalida na ustunlar, na ularning sarlavhalari yozilmaydi va ma'lumotlarni o'qish qiyin. O'ng tomonda ushbu jadval aylantirilganda qanday ko'rinishga ega, hech qanday tushuntirishsiz.
Mobil qurilmalarda ham, ish stolida ham umuman istalmagan bo'lsa-da, mobil qurilmalardagi katta jadvallar uchun nisbatan maqbuldir. Ma'lumotlar ekranga mos kelmasa, tashrif buyuruvchilar undan foydalanishlari mumkin. Biroq, bu holda zarur: bu barcha mavjud ma'lumotlar emasligi aniq bo'lishi kerak. Slayderlarda bo'lgani kabi, o'qlar va kesilgan elementlar bu ma'lumotni eng aniq tarzda etkazadi. Nuqtalar ba'zan ishlatiladi, lekin ularni sezish va tushunish odatda qiyinroq.
eBag veb-saytida mahsulotlarning oxirgi ustuni kesilgan, shuning uchun foydalanuvchilar gorizontal aylantirish mavjudligini tushunishadi.
Subaru veb-sayti foydalanuvchilarga ko'proq kontent ekranlari mavjudligini ko'rsatish uchun jadval ustidagi nuqta va o'qlardan foydalanadi. Nuqtalar biroz chalkashliklarni keltirib chiqaradi, chunki ulardan ikkitasi "joriy joylashuvni" (ya'ni hozirda ko'rinadigan ikkita ustun) ko'rsatish uchun ta'kidlangan. Bunga qo'shimcha ravishda, o'qlarni stol ustida emas, balki to'g'ri joylashtirish yaxshiroqdir.
Agar foydalanuvchilar gorizontal aylantirishga murojaat qilishlari kerak bo'lsa, odatda satr sarlavhalarini o'z ichiga olgan eng chap ustun muzlatib qo'yilishi kerak, shunda foydalanuvchilar har doim satr sarlavhalarini ko'rishadi.
Fidelity ilova nomlari va ustun sarlavhalarini tuzatdi. Foydalanuvchilarga gorizontal aylantirish mavjudligini tushunishga yordam berish uchun o'ngdagi oxirgi ustun kesiladi.
Officeworks.com.au birinchi mahsulot ustunini tuzatdi, shunda foydalanuvchilar boshqa barcha variantlarni unga nisbatan solishtirishlari mumkin. Birinchi ustundagi mahsulot taqqoslash uchun mos yozuvlar nuqtasi bo'lib xizmat qiladi va foydalanuvchilar uni boshqa narsa bilan almashtirishlari mumkin. To'g'ridan-to'g'ri jadvalga joylashtirilgan o'qlar ma'lumotlarni chapga va o'ngga aylantirish mumkinligini aniq ko'rsatadi.
Agar ma'lumotlar ekranga to'g'ri kelmasa, foydalanuvchilarning uni to'liq o'rganishga vaqti yoki moyilligi bo'lmasligi mumkin. Demak, savol ularga faqat kerakli ma'lumotlarni qanday taqdim etishda. Bu savolga javob vazifa va ma'lumotlar turiga bog'liq. Turli vaziyatlarda ma'lumotlar miqdorini cheklash uchun ikkita strategiya mavjud:
- Foydalanuvchi o'zi qiziqqan ma'lumotlarni ko'rishdan oldin tanlaydi.
- Foydalanuvchi uni ko'rish vaqtida o'zini qiziqtirgan ma'lumotlarni tanlaydi.
Birinchi yondashuv foydalanuvchi ma'lumotlarni ko'rishi kerak bo'lganda ishlaydi, lekin uni solishtirmaydi va u faqat ma'lumotlar yuklanishidan oldin o'ziga kerak bo'lgan narsani tanlaydi. Misol uchun, u faqat ma'lum bir mashinaning xususiyatlari, ma'lum bir taomning ozuqaviy xususiyatlari yoki ma'lum bir o'yinchining statistikasi bilan qiziqishi mumkin va foydalanuvchi ularni boshqa variantlar bilan taqqoslamaydi.
Jamba Juice uchun ozuqaviy ma'lumotlarni ko'rish uchun tashrif buyuruvchilar u haqidagi ma'lumotni ko'rish uchun o'zlari qiziqqan ichimlikni tanlashlari kerak. Kichik/O'rta/Katta kalit kerakli variantni tanlash imkonini beradi, lekin ularni solishtirishga imkon bermaydi. Masalan, kichik va o'rta stakan o'rtasidagi kaloriyalar farqini tushunish uchun foydalanuvchi avval kichik stakan uchun kaloriyalar sonini eslab qolishi, so'ngra o'rtachaga o'tishi, uning kaloriyalar sonini izlashi va bittasini ayirishi kerak. boshqa o'zlaridan - ko'p odamlar qilish uchun juda dangasa aqliy ish ko'p.
Ikkinchi strategiya - foydalanuvchiga ma'lumotlarni ko'rib chiqishda ko'rib chiqishni nazorat qilish. Misol uchun, bir foydalanuvchi ikkita variant o'rtasidagi o'xshashlik yoki farqni ko'rishni istasa, boshqasi yuk tashish hajmi yoki xavfsizlik xususiyatlari kabi mahsulotlarning o'ziga xos xususiyatlarini bilishni xohlaydi, lekin ikkita avtomobil o'rtasidagi shovqin darajasidagi farq bilan qiziqmaydi. Ko'rsatish uchun satr va ustunlarni tanlash qobiliyati foydalanuvchilarga o'zlari uchun muhim bo'lgan xususiyatlarga e'tibor qaratish imkonini beradi.
Dell veb-saytida foydalanuvchilar sahifaning yuqori qismidagi menyudan o'zlarini qiziqtirgan mahsulot spetsifikatsiyalarini tanlaydilar. Chapda: Odatiy bo'lib, barcha xususiyatlar ko'rsatiladi. Markazda: foydalanuvchi o'ziga kerak bo'lganlarini tanlaydi. O'ng: Faqat u tanlagan narsa ko'rsatiladi.
Agar jadvalda toifalar bo'yicha guruhlanishi mumkin bo'lgan ma'lumotlar mavjud bo'lsa, buni bajaring va mobil foydalanuvchilarga:
- jadvalda mavjud bo'lgan ma'lumotlar turlari haqida umumiy tushunchaga ega bo'lish;
- qiziqtirgan ma'lumotlarga to'g'ridan-to'g'ri kirish.
Samsung.com saytida taqqoslash jadvallari barcha texnik xususiyatlarni yoki faqat mahsulotlar o'rtasidagi o'xshashliklarni yoki faqat farqlarni yoki foydalanuvchi tanlaydigan mezonlarni ko'rsatishi mumkin. Sayt o'xshash atributlarga ega ma'lumotlarni guruhlarga ajratadi, bu sizga qiziqish ma'lumotlar to'plamini tanlash imkonini beradi. Shu bilan birga, ma'lumotlar guruhlari foydalanuvchilarga qanday mahsulot ma'lumotlari mavjudligini aytib, sahifa mazmuni haqida umumiy ma'lumot beradi.
Aspro-da: Keyingi, 1.1.7 versiyasidan boshlab, jadvallarni mobil versiyaga moslashtirishingiz mumkin. Sahifaning dastlabki kodiga o'zgartirishlar kiritish kerak - jadvallarning moslashuvi uchun javobgar bo'lgan sinfni qo'shing.
Mobil versiyadagi oddiy jadval sahifadan tashqariga chiqadi.
Jadvalni sezgir qilish uchun jadval qo'shilgan sahifani tahrirlashga o'ting. Keyin manba kodini tahrirlash rejimiga o'ting.
Ochilish yorlig'idan oldin
O'zgartirishlaringizni saqlang.
Endi stol aylantiriladi va ramkadan tashqariga chiqmaydi.
Gorizontal ravishda aylantirilganda, jadval ramkadan tashqariga chiqmaydi, lekin mobil versiyada o'ngga o'tishda yon menyu ochiladi. Menyu jadval bilan ishlashga xalaqit bermasligini ta'minlash uchun siz sahifa kodiga o'zgartirishlar kiritishingiz kerak.
Tegga "swipeignore" sinfini qo'shishingiz kerak
O'zgartirishlaringizni saqlang.
Endi, stolni o'ngga aylantirganda, yon menyu ochilmaydi, bu stol bilan ishlashga xalaqit berdi.
O'ngga va boshqa sahifalarga o'tishda yon menyuni yashirishingiz mumkin. Tegga "swipeignore" sinfini qo'shishingiz kerak
Agar veb-saytingizda jadvallardan foydalansangiz, ular mobil qurilmalar uchun ham moslashtirilishi kerak. Men ikkita moslashtirish variantidan foydalanaman - siqish va so'zlarni o'rash + jadvallarni bitta ustunda tartibga solish.
Birinchi variant barcha ko'p ustunli jadvallar uchun javob beradi, men ikkinchi variantni old qismdagi ba'zi saytlarda ishlataman. Menyularni jadval ko'rinishida ko'rsatishda bunday zaiflik mavjud, ammo piksellar soni pasayganda, ular shunchalik siqiladiki, ular foydalanuvchining g'azabini keltirib chiqaradi. Kichkina o'lchamdagi bitta ustunga aylantirish yaxshi echimdir, lekin yana, uni barcha jadvallar uchun ishlatishga arzigulik emas.
Asosiy variant
Shunday qilib, saytdagi ko'pgina jadvallar uchun men quyidagi CSS kodidan foydalanaman:
@media ekrani va (maksimal kenglik: 1000px) (td (so'zni buzish: barchasini buzish;)
Bu blokga mos kelmaydigan so'zlar, agar ruxsat 1000 pikseldan kam bo'lsa, yangi satrdan boshlanishi kerakligini belgilaydi. 1000 rezolyutsiyasi misol, saytlaringizga qarang, ba'zilar uchun piksellar sonini pastroq qilib qo'yish mantiqan.
CSS-da ikkita kod yordamida yaxshi jadval ko'rinishiga erishishingiz mumkin. Men parallel ravishda foydalanaman:
@media ekrani va (maksimal kenglik:700px)(img(maksimal kenglik:96% !important;height:auto !important;) iframe, textarea, kiritish, tugma, yuborish, video, ob'ekt, joylashtirish (maksimal kenglik: 99% !muhim;) jadval, oraliq, div, ins(maksimal kenglik:100% !muhim;)
Unda aytilishicha, ruxsati 700 px dan kam bo'lsa, jadval 100% hajmda ko'rsatiladi, ya'ni u siqilgan, lekin kengligi bo'yicha butun blokni egallaydi. Important xususiyati u 700px dan kichik boʻlgan barcha ruxsatlarga nisbatan qoʻllanilishini bildiradi.
Bir ustunda moslashish
Jadvalni past piksellar sonida bitta ustunda ko'rsatilishi uchun moslashtirish qiyinroq. Barcha jadvallar uchun mos emas, lekin ko'pincha kerak. Birinchidan, jadval uchun asl sinfni belgilang, masalan,
| Ism | Familiya | Ballar | Ballar | Ballar | Ballar | Ballar | Ballar | Ballar | Ballar | Ballar | Ballar |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Yuliya | Smirnova | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Evelin | Yakovleva | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Andrey | Petrov | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Biz oddiy yaratdik HTML stol, agar u ekranga to'g'ri kelsa, hamma narsa yaxshi. Ekranning kengligi kichraytirilganda, jadval kesiladi va biz uning ma'lumotlarini ko'rmaymiz yoki u juda kichik bo'lib qoladi va biz yana hech narsani ko'rmaymiz.
Jadvalni teg ichiga joylaganimni payqagandirsiz div va aniq bir sababga ko'ra. Tegning o'zi div biz unga uslublar tayinlamagunimizcha hech narsa bermaydi.
CSS uslublari
Faqat bitta xususiyatni belgilash orqali, stol moslashadi, kontent teg ichida bo'lsa, gorizontal aylantirish paneli avtomatik ravishda paydo bo'ladi div endi o'q bo'ylab joriy ekran kengligiga sig'maydi X.
Div (
overflow-x: avtomatik;
)
Jadval teglarining qolgan qismini uslublashtiramiz:
Jadval (
chegara-burilish: qulash; /* Faqat bitta qatorlarni ko'rsatish */
chegara oralig'i: 0; /* Hujayralar orasidagi masofa */
kengligi: 100%;
chegara: 1px qattiq #afb42b;
rang: #212121;
}
Th, td (
matnni tekislash: chapga;
to'ldirish: 8px;
}
Tag uslubi tr(qator) alohida izohga loyiqdir. Stol qatorlari chiziqli ko'rinishga ega bo'lishi allaqachon normaga aylangan (zebra). Buning uchun psevdo-sinf ishlatiladi :nchi bola qavs ichida ma'no bilan hatto. Ma'nosi hatto, barcha juft elementlarga xossalarni belgilaydi, bizning holatlarimizda bu fon rangi. Shunday qilib, stol chiziqli bo'ladi.
Ma'lumotlar jadvallari sezgir dizaynni juda yaxshi ishlatmaydi. Afsuski, bu moment mavjud. Ta'sirchan dizayn - bu turli xil ekran o'lchamlarini moslashtirish uchun dizayningizni sozlashdir. Xo'sh, ekran minimal ma'lumotlar jadvali kengligidan torroq bo'lsa nima bo'ladi? Siz kattalashtirishingiz va butun jadvalni ko'rishingiz mumkin, lekin matn hajmi o'qish uchun juda kichik bo'ladi. Yoki siz o'qish nuqtasini kattalashtirishingiz mumkin, lekin jadvalni ko'rish uchun vertikal gorizontal va (afsuski) aylantirishingiz kerak bo'ladi. Ma'lumotlar jadvallari juda keng bo'lishi mumkin va albatta. Jadvallar kengligi bo'yicha moslashuvchan bo'lishi mumkin (og'irligi = 100%), lekin hujayralar tarkibi shunchalik tor bo'lib qolishi mumkinki, ularni ko'rib bo'lmaydi.
Ushbu noxush daqiqani oldini olish uchun moslashuvchan jadvallar qo'llaniladi. Agar ekran to'liq tarkibni ko'rsatish uchun juda kichik bo'lsa, bunday jadval gorizontal aylantirish panelini ko'rsatadi.
CSS-dan foydalanib javob beruvchi jadvalni qanday qilish kerak
Javob beruvchi jadval yaratish uchun konteyner elementini qo'shing overflow-x: avtomatik atrofida Eslatma. OS X Lion’da (Mac’da) aylantirish panellari sukut bo‘yicha berkitiladi va faqat foydalanilganda paydo bo‘ladi (hatto “toshib ketish: aylantirish” yoki avtomatik rejimga o‘rnatilgan bo‘lsa ham).
:
...
Javob beruvchi jadval yaratish
Asinxron delegatlar Asinxron dasturlash kodiga misollar c Buyurtma
Ma'lumotlar bazasi foydalanuvchilarini qo'shish SQL Server xavfsizligi va ishonchli autentifikatsiya