C to'plami bepul HTML va CSS sahifalash kod misollari: sezgir, sodda, moddiy dizayn, navigatsiya nuqtalari, va boshqalar. 2018 yil iyun kolleksiyasining yangilanishi. 5 ta yangi element.
Tegishli maqolalar
Kod haqida
HTML va CSS-da sezgir sahifalash / peyjer. Qiziqarli effektni ko'rsatish uchun brauzeringiz hajmini o'zgartiring.
Javob: ha
Bog'liqliklar: bootstrap.css
Kod haqida
Satrdan keyingi sahifalash
CSS qatorini sahifalash.
Javob: ha
Bog'liqliklar: -
Kod haqida
Sahifalar tugmalari
Sof CSS sahifalash tugmalari.
Mos brauzerlar: Chrome, Firefox, Opera, Safari
Javob: ha
Bog'liqliklar: -
Kod haqida
Hover yordamida satrlarni sahifalash
Hover effekti bilan sof CSS qator sahifalash.
Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari
Javob: ha
Bog'liqliklar: -
Kod haqida
Pacman sahifalash
HTML, CSS va JS bilan sahifalash animatsiyasi.
Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari
Javob: ha
Bog'liqliklar: -
Kod haqida
Oddiy CSS.
Kod haqida
Sof CSS Pac-Man sahifalash hoverda animatsiya bilan.
Kod haqida
Oddiy javob beruvchi sahifalash.
Kod haqida
HTML va CSS sahifalash.
Kod haqida
Turli sahifalar orasida harakat qilish imkonini beruvchi sahifalash misoli. Ushbu misol sahifalashni talab qiladigan haqiqiy ilova bilan ishlash uchun href atributlariga ega bo'lishi kerak.
Kod haqida
CSS maxsus xususiyatlari bilan sahifalash.
Sahifalar variantlari va dizaynlari.
MojoM tomonidan ishlab chiqarilgan
2017 yil 25 may
Demo GIF: SVG Page Hopper
HTML, CSS va SVG sahifa hopper.
Kris Gannon tomonidan yaratilgan
2017 yil 14 may
Demo GIF: cheksiz sahifalash
HTML va CSS-da cheksiz sahifalash.
Mariusz Dabrowski tomonidan yaratilgan
2017 yil 27 aprel
Kod haqida
CSS komponentlari:.
HTML va CSS yordamida veb-saytlarni sahifalash uchun 12 ta g'oyalar.
Rosa tomonidan yaratilgan
2016 yil 3 noyabr
Demo GIF: sahifalash
HTML / CSS / JavaScript bilan sahifalash.
JP Nothard tomonidan ishlab chiqarilgan
2016 yil 9 oktyabr
Namoyishli GIF: Pagination Hover animatsiyasi
HTML va CSS pagination hover animatsiya.
Elena Nazarova tomonidan yaratilgan
2016 yil 12 sentyabr
Hover effekti bilan sahifalash.
Andre Wichert tomonidan yaratilgan
2016 yil 27 avgust
HTML, CSS va JavaScript bilan sahifalash ko'rsatkichlari.
Musa Xolmström tomonidan yaratilgan
2016 yil 19 avgust
Brendan Mullins tomonidan yaratilgan
2016 yil 16 avgust
Sehrli satrlarni javob berish
Sahifalar uchun sehrli chiziq yarating. Bu ajoyib ko'rinadi.
Rayan Yu tomonidan yaratilgan
2015 yil 18 fevral
Javob beruvchi, kirish mumkin, muqobil sahifalash tajribasi.
Simon Goellner tomonidan yaratilgan
2014 yil 11 noyabr
Namoyish GIF: sahifalash strelkalari
Moslashuvchi sahifalash strelkalari.
Hakim El-Xattab tomonidan yaratilgan
2013 yil 18 oktyabr
Ushbu maqolada biz sahifalash uchun navigatsiya bloki sifatida veb-interfeys elementini yaratish jarayonini ko'rib chiqamiz. Bootstrap 3 va 4 ushbu UI elementini Pagination komponenti yordamida amalga oshiradi.
Sahifalash nima?
Pagination - bu ma'lumotlarni sahifalash. Bular. bu shunday xulosa, ma'lumotlar chiqarilganda hammasi birdan emas, lekin kichik qismlar (sahifalar).
Navigatsiya bloki ushbu qismlar (sahifalar) bo'ylab harakatlanish uchun ishlatiladi.
Bootstrap ramkasining Pagination komponenti shunchaki ushbu interfeys elementini yaratish uchun mo'ljallangan, ya'ni. navigatsiya bloki.
Sahifalar uchun navigatsiya blokini yaratish
Bootstrap 3 da navigatsiya oynasi quyidagi tuzilishga ega:
Ushbu parchadagi nav elementi o'rash idishi vazifasini bajaradi. Ushbu tuzilmada faqat yordamchi texnologiyalar uchun kerak HTML kodining ushbu qismini navigatsiya sifatida qabul qildi.
Bundan tashqari, yordamchi texnologiyalar qanday navigatsiya bloki ekanligini ham aniqlab olishlari kerak. Bu harakat aria-label atributi orqali amalga oshiriladi.
Bootstrap-da sahifalash uchun nav bloki belgisi bilan amalga oshiriladi Belgilangan ro'yxat... Bu blokdagi har bir nav aloqasi li bilan oʻralgan va ulga joylashtirilgan.
Bootstrap-dagi nav qutisining vizual uslubi ul-ga qo'shilishi kerak bo'lgan sahifalash sinfi yordamida amalga oshiriladi.
Bootstrap 4 da navigatsiya blokining tuzilishi:
Esda tutingki, Bootstrap 4 da siz li va a elementlariga sinflar qo'shishingiz kerak. Li - sahifa elementi sinfi, a - sahifa havolasi. Ushbu sinflar elementlar uchun CSS uslublarini o'rnatadi va navigatsiya blokini to'g'ri ko'rsatish uchun zarurdir.
Matn belgilari o'rniga piktogramma yoki piktogrammalardan foydalanish
Ba'zi havolalar uchun kontent sifatida piktogrammalardan foydalanadigan sahifalash navigatsiya paneliga misol:
Navigatsiya havolasining holatini o'zgartirish
Navbardagi havolalar holatini o'zgartirish o'chirilgan va faol sinflar yordamida amalga oshiriladi. Birinchi sinf (o'chirilgan) faol bo'lmagan (bosilmaydigan) havola yaratish uchun ishlatiladi. Ikkinchi sinf (faol) ta'kidlash (ko'rsatish) uchun kerak joriy sahifa... Siz faol va o'chirilgan sinflarni havolaning o'ziga emas, balki li elementiga qo'shishingiz kerak.
O'chirilgan sinf CSS havolalari deklaratsiyasini o'rnatadi ko'rsatuvchi hodisalar: yo'q. Ushbu e'lon havolaning funksionalligini o'chirish uchun mo'ljallangan. Lekin u klaviatura navigatsiyasini o'chirmaydi. Shuning uchun, agar siz loyihangizdagi bunday havolalarning funksionalligini butunlay o'chirib qo'ymoqchi bo'lsangiz, ularni JavaScript-dan foydalanib qo'shimcha ravishda kuzatib borishingiz va ularga tabindex = "- 1" atributini qo'shishingiz kerak.
Bog'lanish funksiyasini o'chirishning yana bir usuli a elementidan foydalanmang.
Navigatsiya oynasining o‘lchamini o‘zgartirish
Bootstrap 3 va 4 da siz pagination-lg va pagination-sm sinflari yordamida navigatsiya oynasining o'lchamini o'zgartirishingiz mumkin. Bunga ushbu sinflardan birini sahifalash sinfiga qo'shish orqali erishiladi.
Birinchi sinf (pagination-lg) navigatsiya hajmini oshirish zarur bo'lganda, ikkinchisi (pagination-sm) uni kamaytirish kerak bo'lganda qo'llaniladi.
Navigatsiya oynasini tekislash
Bootstrap 3-da sahifalash uchun navbarni tekislash bilan amalga oshiriladi matnni tekislash uchun sinflar.
Bootstrap 4 da, sahifalash uchun navbarni tekislash moslashuvchan sinflar yordamida amalga oshiriladi.
Peyjer komponenti (Bootstrap 3)
Peyjer - sahifalar yoki boshqa sayt mazmuni bo'ylab oddiy navigatsiya yaratish uchun mo'ljallangan Bootstrap 3 komponentidir. Ushbu komponent 2 ta tugma (bog'lanish) dan iborat.
Ushbu navigatsiya uchun eng keng tarqalgan foydalanishdan biri uni shunday qilishdir birinchi tugma boshqasiga o'tdi yangi kirish saytida, ikkinchisi esa - yoshi kattaroq.
Peyjer komponentining sintaksisi:
Tugma tartibini o'zgartirish
Odatiy bo'lib, peyjer tugmalari markazga tekislangan... Ammo bu variantdan tashqari, Bootstrap 3 ularni turli qirralarda tekislash imkonini beradi. Bu sinfni birinchi tugma oldidan, ikkinchisi yoniga qo'shish orqali amalga oshiriladi. Oldingi sinf havolani chapga va o'ngga yaqinlashtiradi.
Tugma funksiyasini o'chirib qo'ying
Tugmani o'chirilgan holatga o'tkazish unga o'chirilgan sinfni qo'shish orqali amalga oshiriladi.
Saytlar odatda bir nechta sahifalarni o'z ichiga oladi. Ular 3-5 sahifani o'z ichiga olishi mumkin, masalan, ochilish sahifasida va ehtimol undan ham ko'proq.
Har bir yaxshi sayt foydalanuvchiga sayt sahifalari orasida to'g'ri harakat qilish va harakat qilish imkonini beradigan navigatsiyani o'z ichiga olishi kerak. Qachon bunday sahifalashni yaratishingiz mumkin JavaScript yordami... Ushbu maqolada biz bunday navigatsiyani qanday yaratish haqida gapiramiz.
Yana bir narsa, oddiy JavaScript-dan tashqari, misolda Bootstrap 4-dan foydalaniladi. Uning bootstrap pagination komponenti jQuery kutubxonasi, ya'ni maxsus Buzina Pagination plagini bilan birlashtirilgan. Bu sizga barcha ma'lumotlarni bir nechta sahifalarga bo'lish imkonini beradi, ular orasida navigatsiya yaratiladi.
Kerakli ramkalarni ulash
Bootstrap va JQuery bilan ishlash uchun ularni ulashingiz kerak. Bu sizning qurilmangizda amalga oshirilishi mumkin HTML hujjati teglardan foydalanish
Agar saytingizda jQuery allaqachon yoqilgan bo'lsa va kuchli va asosiy bilan ishlayotgan bo'lsangiz, yuqorida tavsiflangan barcha imo-ishoralarni xavfsiz o'tkazib yuborishingiz mumkin, asosiysi jQuery versiyasi juda zich emasligiga ishonch hosil qilishdir. Aytgancha, WordPress-da bu yaxshi.
Keyinchalik, biz o'zimizni bog'laymiz ishchi ot- plagin jquery.simplePagination.js:
Bog'da panjara o'rnatishingiz shart emas, shunchaki o'zingizga yoqqan uslubni, engil, qorong'i yoki ixchamni tanlang va qoidalar to'plamini shabloningizning stylesheet.css fayliga joylashtiring. O'zingizning uslublaringizni yozing yoki foydalaning Bootstrap, shuningdek, o'ziga xoslik va sayt qurish ko'nikmalarini rivojlantirish nuqtai nazaridan variant ham afzalroqdir.
3-qadam. HTML
Sahifalar panelini sayt sahifalarida ko'rsatish uchun, uni qaerga joylashtirishni rejalashtirmoqchi bo'lsangiz, u mantiqiyroq va ko'pincha asosiy tarkibning pastki qismida joylashgan bo'lib, quyidagilarni yozishingiz kerak:
Yengil fon uchun:
Kompakt mavzu:
$ (funktsiya () ($ (# yorug'lik-sahifalash) .paginatsiya ((moddalar: 100, itemsOnPage: 10, cssStyle: "yorug'lik-mavzu"));));
Men yorug'lik mavzusini sahifalash uchun initsializatsiyadan foydalanganman # engil-sahifalash, siz selektorni boshqa narsaga o'zgartirishingiz mumkin, ixcham uchun bu # ixcham sahifalash yoki qorong'u uslub uchun # qorong'u sahifalash. Bunday holda, funktsiyadagi sinfni ham o'zgartirishni unutmang. cssStyle.
Kai men yuqorida yozgan edim, plagin sozlamalarda juda moslashuvchan, quyidagi variantlarni o'zgartirish mumkin:
- buyumlar- sahifalarni hisoblashda foydalaniladigan elementlarning umumiy soni. Birlamchi: 1 .
- itemsOnPage- Har bir sahifada ko'rsatilgan elementlar soni. Birlamchi: 1 .
- sahifalar- Majburiy emas. Belgilansa, elementlar va itemsOnPage parametrlari e'tiborga olinmaydi. Roʻyxatdagi sahifalar sonini belgilaydi.
- ko'rsatilgan sahifalar- Navigatsiya paytida qancha sahifa raqamlari ko'rinishi kerak. Minimal ruxsat etilgan qiymat: 3 , standart: 5 .
- qirralar- Raqamlash boshida va oxirida qancha sahifa raqamlari ko'rinadi. Birlamchi qiymat: 2 .
- joriy sahifa- Qaysi sahifa ishga tushirilgandan so'ng darhol tanlanadi. Mantiqan, sukut bo'yicha: 1 .
- hrefTextPrefix- HREF atributida ishlatiladigan satr sahifa raqamidan oldin qo'shiladi. Birlamchi: "# sahifa-".
- hrefTextSuffix- HREF atributida ishlatiladigan satr sahifa raqamidan keyin kiritiladi. Standart bo'sh qatordir.
- oldingi matn- Oldingi sahifaga tugma matni. Birlamchi: "Oldingi".
- keyingi matn- Matn tugmasi yoqilgan keyingi sahifa... Birlamchi: "Keyingi"
- cssStyle- Aniqlang CSS uslubi... Birlamchi: "Yengil mavzu"
- tanlangOnClick- Bosgandan keyin sahifani tanlash, sukut bo'yicha - yoqilgan ( rost), nega men nima uchun uni o'chirib qo'yishni tushunmadim, lekin bunday imkoniyat, qiymat bor: "noto'g'ri".
Biz eng asosiy sozlamalarni ko'rib chiqdik. O qo'shimcha funktsiyalar va ushbu plagindan foydalanishning mavjud usullarini to'g'ridan-to'g'ri ishlab chiquvchi sahifasida hujjatlarni o'rganish orqali bilib olishingiz mumkin.
Men qila oladigan narsa - sizga omad va yangi loyihalaringizda muvaffaqiyatlar tilash.
Sahifalar, shu jumladan sahifalarni navigatsiya qilish kifoya oddiy narsa, lekin yangi boshlanuvchilar ko'pincha uni yaratishda va eng muhimi, uning ishini tushunishda muammolarga duch kelishadi ...
Sahifalar vazifalaridan biri bir vaqtning o'zida barcha elementlarni emas, balki ularning cheklangan soni, aytaylik, $ pp elementlardan ko'p bo'lmagan va qaysi elementlar guruhi ko'rsatilishi kirish parametriga $ pn - ushbu guruhning soniga bog'liq. Bu raqam, aslida, sahifa raqamidir. Bu erda sizga shunday so'rov kerak:
TANLOV * `jadval` LIMIT (($ pn-1) * $ pp), ($ pp)
$ pn qiymati 1 ga kamayadi, masalan, $ pp qiymati 10 ga teng bo'lgan ro'yxatning birinchi sahifasi uchun 10 dan 19 gacha emas, 0 dan 9 gacha elementlar tanlanadi. Tabiiyki, agar sahifalar noldan raqamlangan, so'rovda $ qiymatini 1 pn ga kamaytirish kerak emas.
Keyingi muammoni hal qilish uchun, ya'ni sahifa navigatsiyasini qurish uchun, avvalo, ro'yxatdagi sahifalarning umumiy sonini bilishingiz kerak. Buni amalga oshirish uchun siz birinchi navbatda elementlarning umumiy sonini so'rashingiz mumkin. Yoki to'g'ridan-to'g'ri so'rovda elementlarning umumiy soniga qarab sahifalarning umumiy sonini hisoblang:
QAT TANLASH ((COUNT (*) + ($ pp-1)) / ($ pp)) `jadval`dan
Sahifalarning umumiy sonini $ pc olish uchun bu yerda maʼlum boʻlgan $ pc = (count + per_page-1) div per_page formulasidan foydalaniladi, lekin butun son boʻlinishi (div) oʻrniga FLOOR funksiyasidan foydalanish uchun sozlangan. MySQL-da uzoq vaqt davomida qo'llab-quvvatlanadigan DIV operatoridan ham foydalanishingiz mumkin.
Agar sahifalarda bir vaqtning o'zida faqat bitta elementni ko'rsatish kerak bo'lsa, yuqoridagi so'rovlarni soddalashtirish mumkin.
Umumiy $ kompyuter sahifalari soni olingandan so'ng, siz darhol ro'yxatdagi barcha sahifalarga havolalarni 1 dan $ kompyutergacha bo'lgan taymerli halqa yordamida ko'rsatishingiz mumkin, ammo odatda yanada murakkab navigatsiya ishlatiladi, bunda havolalar mavjud. bir vaqtning o'zida barcha sahifalarda ko'rsatilmaydi, faqat joriy sahifaning soniga qarab cheklangan diapazondagi raqamlari bo'lgan sahifalarda ko'rsatiladi. Masalan, bank navigatsiyasi deb ataladigan $ birinchi va $ oxirgi chegara qiymatlarini olish uchun formulalar:
$ birinchi = $ pn-1 - ($ pn-2)% $ oralig'i; $ oxirgi = $ birinchi + $ oralig'i<$pc?$first+$range:$pc;
$ diapazonida siz diapazonning kerakli kengligidan 1 ga kichik qiymat qo'yishingiz kerak, masalan, $ diapazonidagi sahifalarga yettidan ortiq oddiy havolalarni ko'rsatish uchun siz 6 qiymatini qo'yishingiz kerak. Agar siz barchani birlashtirsangiz. Yuqoridagilardan siz quyidagilarni olasiz:
$ pp = 10; agar ($ natija = mysqli_query ($ havolasi, "QATTANI SELECT ((COUNT (*) +". ($ pp-1). ") /". $ pp. ") FROM` jadval` ")) (ro'yxat ($) kompyuter) = mysqli_fetch_row ($ natija); mysqli_free_result ($ natija); // 0 va 1 sahifa raqamlarining rotatorini bu erga joylashtirish mumkin, agar ($ pn == 0 || $ pn> $ pc) xato (404); elseif ($ natija = mysqli_query ($ havola, "SELECT * FROM` jadval` LIMIT ". (($ pn-1) * $ pp).", ". $ pn-1)) ($ diapazon = 6; $ birinchi = $ pn -1- ($ pn-2)% $ oralig'i; $ oxirgi = $ birinchi + $ oralig'i<$pc?$first+$range:$pc; } else error(503); } else error(503);
Faqat navigatsiya panelini ko'rsatish qoladi:
Taqdim etilgan dasturda birinchi muntazam havola (agar u birinchi sahifaga havola bo'lmasa) oldingi sahifalar bankiga o'tishga imkon beradi. Agar siz oxirgi oddiy havola ham keyingi sahifalar bankiga o‘tishga ruxsat berishini istasangiz (ya’ni, u “Ko‘proq” havolasiga o‘xshash ishlaydi va uni almashtirishi mumkin), ifodani ($ diapazoni-1) sifatida belgilashingiz mumkin. $ diapazon o'zgaruvchisi o'rniga birinchi formulada bo'luvchi.
Sahifa havolasi funksiyasi sahifa raqami o'rnatilgan havola qismini shakllantirish uchun javobgardir. 0 va 1 sahifa raqamlarining rotatoridan foydalanganda, bu funktsiyani rotatorning yoniga qo'yish yaxshidir, chunki u rotatorning ta'sirini qoplashi kerak, bu sizga havoladagi / o'rniga / p = 1 manzilini $ pn kiritish parametrining nol qiymatiga moslashtirishga imkon beradi:
Function pagelink ($ p) (qaytish $ p> 1? "? P =". $ P: "";) agar ($ pn == 0) $ pn ++; elseif ($ pn == 1) $ pn--;