Matnni sahifalash - jQuery Auto Pagination yoki avtomatik matn sahifalash. Aqlli sahifalar: jQuery oddiy jQuery sahifa navigatsiyasi yordamida sahifalash

Fikrni yaxshiroq tushunish uchun quyidagi rasmga qarang.

1-qadam - XHTML

Birinchi qadam XHTML belgilarini yaratishdir. Plagin tartibsiz ro'yxatni taqdim etishi kerak

bir qator elementlar bilan
• uning ichida. Quyida demo.html faylidagi kodni misol bilan arxivda topasiz:
  • Lorem ipsum dolor sit amet ...
  • Lorem ipsum dolor sit amet ...
  • Lorem ipsum dolor sit amet ...
  • Lorem ipsum dolor sit amet ...

  Bloklash asosiy sahifalangan element uchun konteyner vazifasini bajaradi

  va unga ochiq kulrang fon qo'llaniladi. Tartibsiz ro'yxat elementlarni o'z ichiga oladi.

  Ko'pgina hollarda, bu belgi fon skripti tomonidan yaratilgan bo'lishi mumkin, bu sizni qo'lda qilishdan ozod qiladi. Elementlarni ichkariga joylashtirishingiz mumkin

  • har qanday tarkib, chunki o'lchamlar jQuery tomonidan avtomatik ravishda hisoblanadi (agar siz tasvirlardan foydalanmoqchi bo'lsangiz, ularning kengligi va balandligini belgilashni unutmang).

    2-qadam - CSS

    Belgilashni yaratgandan so'ng, uni uslublashni boshlaylik. Uslublardan go‘yo sizda bu sahifalangan navigatsiya yo‘qdek foydalanish yaxshi fikr, chunki plagin JavaScript-ga tayanadi. Bu shuni anglatadiki, ba'zi foydalanuvchilar sizning sahifangiz navigatsiyasini ko'ra olmasligi va shuning uchun undan foydalanishi ehtimoli bor.

    styles.css - 1-qism

    #main (/ * Asosiy konteyner div * / pozitsiyasi: nisbiy; chekka: 50px avtomatik; kenglik: 410px; fon: url ("img / main_bg.jpg") takrorlash-x #aeadad; chegara: 1px qattiq #CCCCCC; toʻldirish : 70px 25px 60px; / * CSS3 rounded cornenrs * / -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;) #holder (/ * Boʻlinadigan tartibsiz roʻyxat sahifalarga * / kengligi: 400px; to'lib ketish: yashirin; pozitsiya: nisbiy; fon: url ("img / dark_bg.jpg") takrorlash # 4e5355; to'ldirish-pastki: 10px; / * CSS3 ichki soyasi (veb-kitning bir qismi baholanadi, chunki Gugl xrom o'rnatilgan soyalar bilan birlashtirilgan yumaloq burchaklarni yoqtirmaydi): * / -moz-box-shadow: 0 0 10px # 222 inset; / * - webkit-box-shadow: 0 0 10px # 222 inset; * / box-shadow: 0 0 10px # 222 inset; ) .swControls (joylashuvi: mutlaq; chetidan tepa: 10px;)

    Birinchidan, blokni uslublash asosiy va tartibsiz ro'yxat (ikkinchisi tayinlangan id = egasi).

    E'tibor bering, biz atribut bilan CSS3 soya effektidan foydalanmoqdamiz kiritilgan ichki soyani simulyatsiya qilish uchun. Ko'pgina CSS3 qoidalarida bo'lgani kabi, biz hali ham ba'zi brauzerlar uchun qoidalarni alohida belgilashimiz kerak: Mozilla (Firefox) va Webkit (Safri va Chrome).

    Webkit versiyasi sharhlanganini payqagan bo'lishingiz mumkin. Buning sababi, bu xususiyat xususiyat bilan bir vaqtda foydalanilganda Chrome brauzerida soyalarni ko‘rsatishdagi xatolikdir. chegara radiusi(soyalar blokning to'g'ri burchakli burchaklari bo'lgani kabi yaratiladi, ularning filetosiga e'tibor bermasdan va shuning uchun effektni buzadi).

    styles.css - 2-qism

    A.swShowPage (/ * Sahifa slaydni ishga tushiruvchi havolalar * / background-color: # 444444; float: chap; balandlik: 15px; hoshiya: 4px 3px; matndan chekinish: -9999px; eni: 15px; / * chegara: 1px qattiq #ccc; * / / * CSS3 yumaloq burchaklar * / -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;) a.swShowPage: hover, a.swShowPage.active (fon rangi: # 2993dd; / * CSS3 ichki soyasi * / -moz-box-soya: 0 0 7px # 1e435d inset; / * - webkit-box-shadow: 0 0 7px # 1e435d inset; * / box-shadow : 0 0 7px # 1e435d inset;) #holder li (fon rangi: # F4F4F4; roʻyxat uslubi: hech biri tashqarida yoʻq; cheti: 10px 10px 0; toʻldirish: 20px; float: chap; / * Oddiy CSS3 quti soyalari (emas) inset): * / -moz-box-shadow: 0 0 6px # 111111; -webkit-box-shadow: 0 0 6px # 111111; box-shadow: 0 0 6px # 111111;) #holder, #holder li (/ * Ham ushlagichga, ham ushlagichga o'ralgan burchaklarni qo'llash lis * / -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;) .clear (/ * Bu sinf suzuvchi elementlarni tozalaydi. * / aniq: ikkalasi ham; )

    Kodni sinf bilan to'ldiradi aniq elementlar atrofidagi oqimni tiklash uchun ishlatiladi.

    
    

    3-qadam - jQuery

    Qo'llanmaning yakuniy qismida jQuery kutubxonasining so'nggi versiyasini sahifaga kiritishimiz kerak. Ishlash nuqtai nazaridan, barcha tashqi javaskriptlarni yopilish asosiy yorlig'idan oldin qo'shish oqilona bo'ladi, chunki skriptlar sahifani ko'rsatishni bloklaydi.

    script.js - 1-qism

    (funksiya ($) (// sweetPages jQuery plaginini yaratish: $ .fn.sweetPages = funktsiya (opts) (// Hech qanday parametr berilmagan bo'lsa, bo'sh opts ob'ektini yarating, agar (! opts) opts = (); var resultsPerPage = opts.perPage || 3; // Plagin tartibsiz roʻyxatlar uchun eng yaxshi ishlaydi, // garchi OLlar ham shunday qiladi: var ul = this; var li = ul.find (“li”); li.each (funksiya). () (// Har bir li elementning balandligini hisoblash, // va uni ma'lumotlar usuli bilan saqlash: var el = $ (bu); el.data ("balandlik", el.outerHeight (to'g'ri));)); // Sahifalarning umumiy sonini hisoblash: var pagesNumber = Math.ceil (li.length / resultsPerPage); // Agar sahifalar ikkitadan kam bo'lsa, hech narsa qilmang: if (pagesNumber<2) return this; // Creating the controls div: var swControls = $("

    "); uchun (var i = 0; i "); // swControls div ga havola qo'shish: swControls.append (" "+ (i + 1) +" ");) ul.append (swControls);

    JQuery plaginini yaratish siz o'ylagandek qiyin emas. Biz mulk sifatida yangi funksiya yaratishimiz kerak jQuery.fn(yoki $ .fn bu erda ko'rsatilganidek). Pointer bu bu funksiya asl jQuery obyektiga ishora qiladi.

    Keyin funksiya bilan sahifalarning umumiy sonini hisoblaymiz Math.ceil ()... Natijani eng yaqin butun songacha yaxlitlaydi, bu bizga to'g'ri sahifalar sonini beradi.

    Endi bizda umumiy sahifalar soni bor, biz aylana olamiz uchun barcha elementlar uchun

  • ularni alohida guruhlarga bo'lish va ularni swpage blokiga o'rash, shu bilan sahifalarni shakllantirish. Usulni chaqirishni unutmang tilim () jQuery-da asl to'plamga tegmasdan qoldirib, yangi elementlar guruhini yaratadi (aks holda, tsiklning har bir iteratsiyasida biz elementlarning asl to'plamidan boshlaymiz.
  • ).

    script.js - 2-qism

    Var maxHeight = 0; var totalWidth = 0; var swPage = ul.find (". swPage"); swPage.each (funksiya () (// Barcha yangi yaratilgan sahifalar boʻylab aylanish: var element = $ (bu); var tmpHeight = 0; elem.find ("li"). har bir (funktsiya () (tmpHeight + = $). (bu) .data ("balandlik");)); agar (tmpHeight> maxHeight) maxHeight = tmpHeight; totalWidth + = elem.outerWidth (); elem.css ("float", "chap"). width (ul. kengligi ())) swPage.wrapAll ("

    "); // Ul balandligini eng baland sahifa balandligiga o'rnatish: ul.height (maxHeight); var swSlider = ul.find (". SwSlider "); swSlider.append ("

    ") .width (totalWidth); var hyperLinks = ul.find ("a.swShowPage"); hyperLinks.click (funktsiya (e)) (// Agar boshqaruv havolalaridan biri bosilsa, swSlider div // suring (qaysi) barcha sahifalarni o'z ichiga oladi) va uni faol deb belgilang: $ (bu) .addClass ("faol"). siblings (). removeClass ("faol"); swSlider.stop (). animate ("margin-left": - (parseInt ($ (bu) .text ()) - 1) * ul.width ()), "sekin"); e.preventDefault ();)); // Kod birinchi marta kiritilganda birinchi havolani faol deb belgilang ishlaydi: hyperLinks.eq (0) .addClass ("faol"); // Boshqaruv div markazini markazlashtiring: swControls.css (("chap": "50%", "margin-left": - swControls.width () / 2)); buni qaytaring;))) (jQuery);

    Skriptning ikkinchi qismida biz yangi yaratilgan sahifalarni aylantiramiz, ularning o'lchamlarini o'rnatamiz va ularni chapga oqib o'rnatamiz. Jarayonda biz "eng baland" sahifani topamiz va shunga mos ravishda elementning balandligini o'rnatamiz.

    .

    Shuningdek, biz sahifalarni blokga o'ramiz swSlider Bu ularni yonma-yon ko'rsatish uchun etarlicha keng. Keyinchalik, biz navigatsiya havolalarida bosish hodisasini kuzatib boramiz va blokni siljitamiz. swSlider usuli jonlantirish... Bu demoda ko'rgan siljish effektini yaratadi.

    script.js - 3-qism

    $ (hujjat) .ready (funksiya () (/ * DOM yuklangandan keyin quyidagi kod bajariladi * / // jQuery plaginini chaqirish va // #holder UL ni har biri 3 LI sahifaga bo'lish: $ ("# holder "). sweetPages ((perPage: 3)); // Plaginning standart xatti-harakati ul-ga // sahifa havolalarini kiritishdir, lekin biz ular asosiy konteynerda kerak: var controls = $ (". swControls ") .ajirlash (); controls.appendTo (" # main ");));

    Kodning oxirgi qismida biz faqat plaginni chaqiramiz va sozlashni o'tkazamiz bosh sahifa(har bir sahifada qancha element ko'rsatilishi kerak). Shuningdek, usuldan foydalanishga e'tibor bering ajratish jQuery 1.4 da kiritilgan. U DOM (Hujjat ob'ekt modeli) dan elementlarni olib tashlaydi, lekin barcha voqea "tinglovchilari" ni buzilmagan holda qoldiradi. Bu bizga boshqaruv havolalarini elementdan tashqariga ko'chirish imkonini beradi.

    kerakli funksionallikni saqlab qolgan holda, ular dastlab qaerda edi.

    jQuery pagination plaginlari - bu sahifalar va postlarni bir nechta alohida sahifalarga bo'lish uchun saytingizga birlashtirilishi mumkin bo'lgan skriptlar. Asosan, saytingiz uchun sahifa raqamlashni yaratishning ikki yo'li mavjud. Sahifani yuklagandan so'ng ma'lumotlarni bir nechta sahifalarga ajratadigan plagindan foydalanish yoki ma'lumotlar bazasidan kerakli miqdordagi ma'lumotlar olinadigan va keyin sahifaga yuklanadigan server tomonidagi skriptdan foydalanish. Sahifalar bo'lishi mumkin yaxshi ma'noda saytingizdagi sahifalarni ko'rishlar sonini ko'paytiring va shu bilan birga chiqish tezligini va qidiruv tizimlari tomonidan hisobga olinadigan boshqa xatti-harakatlar omillarini yaxshilang.

    Agar sizning sahifalaringizda katta hajmdagi ma'lumotlar mavjud bo'lsa, sahifama-sahifa navigatsiyani yaratish uchun plaginlar kontentni tashrif buyuruvchilar uchun qulayroq shaklda keltirishga yordam beradi. Ushbu maqolada veb-saytlaringizda kerakli sahifalash sozlamalarini yaratishga yordam beradigan ba'zi plaginlarni siz bilan baham ko'ramiz. Ushbu plaginlarning aksariyati bepul va har qanday dizaynga joylashtirilishi mumkin.

    

    Bu oddiy foydalanuvchi interfeysida sahifalash va aylantirishni birlashtirgan Remy Elazare-dan ajoyib jQuery plaginidir.

    jPaginate

    

    jPaginate jQuery sahifalash plagini bo'lib, u bitta maxsus xususiyatga ega: jonlantirilgan sahifa raqamlari. Foydalanuvchi strelkani bosish yoki shunchaki kursorni o'tkazish orqali mavjud sahifa raqamlari bo'ylab harakatlanishi mumkin. Birinchi va oxirgi sahifalarga havolalar ham mavjud.

    Pajinat

    

    Pajinat bu oddiy va moslashuvchan jQuery plaginidir, bu sizga uzun ro'yxatlar yoki kontentni bir nechta alohida sahifalarga bo'lish imkonini beradi. Bu nafaqat server tomonida amalga oshirishning oddiy muqobilligi, balki sahifa o'tishlari orasidagi sahifani yuklash vaqti deyarli nolga teng (albatta, o'rtacha sahifa hajmi bilan).

    

    Oddiy jQuery plagini uchta CSS mavzusi bilan sahifalash yaratish.

    jPList

    

    jPList har qanday HTML belgilarini (DIV, UL / LI, jadvallar va boshqalar) saralash, sahifalash va filtrlash uchun moslashuvchan jQuery plaginidir - CodeCanyon-dan premium plagin.

    

    Ushbu plagin oddiy tarkibni saralashni yaratadi va kontentingizni sahifalash bilan boshqarish imkonini beradi! Oddiy tarkibni saralash qulay tartiblash mexanizmini taqdim etish orqali interfeysingizni bezashning oson usulini taqdim etadi. - Premium plagin u CodeCanyon

    Oson sahifalash

    

    Ushbu plagin ob'ektlar ro'yxatini sahifalash bilan ko'rishni osonlashtiradi. Amalga oshirish juda oson va juda engil, shuning uchun u o'z loyihalaringiz uchun foydali bo'lishi mumkin.

    SimplePager

    

    SimplePager imkon qadar kamroq harakat va konfiguratsiya bilan sahifalarni yaratishga imkon beradi. Ushbu plagin divalarni, paragraflarni, ro'yxat elementlarini va deyarli har qanday boshqa kontentni sahifalashi mumkin.

    

    JQuery plagini taqdim etadi yangi usul veb-saytingiz yoki ilovangiz uchun sahifalash. An'anaviy usullardagi kabi sahifa raqamlari ro'yxatini ko'rsatish o'rniga jqPagination "5 sahifadan 1 tasi" kabi interaktiv sahifa raqamlash chiqishidan foydalanadi, plagin tanlanganda foydalanuvchiga kerakli sahifa raqamini kiritish imkonini beradi. Birinchi sahifa, oldingi, keyingi va oxirgi havolalar sukut bo'yicha o'rnatiladi, lekin siz ularni o'chirib qo'yishingiz mumkin.

    

    Agar sizda ob'ektlarning katta ro'yxati bo'lsa (masalan, qidiruv natijalari yoki yangiliklar, maqolalar), ularni alohida sahifalarga guruhlashingiz va ushbu plagin yordamida navigatsiya elementlarini qo'shishingiz mumkin.

    

    Sahifa navigatsiyasini yaratish uchun yana bir jQuery plagini. Bu jozibali, intuitiv, sahifani aylantirish slayderi bilan birga keladi va siz cheksiz sahifalarni qo'shishingiz mumkin.

    

    Sahifani yaratish uchun jQuery plagini (turli xil kontent uchun), bu sahifadagi elementlar soniga emas, balki kontent maydonining balandligiga asoslanadi.

    Aqlli paginator

    

    Aqlli paginator bu jQuery sahifalash plagini boʻlib, u sahifalarni qoʻshishni osonlashtiradi va u ham juda moslashtiriladi. Smart Paginator, shuningdek, mijoz tomonidagi ma'lumotlarni avtomatik ravishda filtrlashi mumkin.

    

    Nomidan ko'rinib turibdiki, saytingizda sahifalangan navigatsiya yaratish uchun Ajax-dan foydalanadi. U butun sahifani emas, balki faqat ma'lum bir qismini yuklaydi, shuning uchun veb-saytni yuklash vaqtini tezlashtiradi.

    Shirin sahifalar

    

    Shirin sahifalar bu jQuery plagini bo'lib, oddiy tartibsiz elementlar ro'yxatini navigatsiya bilan qulay sahifalar to'plamiga aylantirish imkonini beradi. U sharhlar, slayd-shoular yoki boshqa turdagi tuzilgan kontent uchun ishlatilishi mumkin.

    
    

    Agar sizda biron bir savol bo'lsa, bizdan foydalanishni tavsiya etamiz

    1. Siz teginish va sichqonchani surish navigatsiyasidan foydalanishingiz mumkin
    2. Siz sahifalarni o'zgartirishning har xil turlaridan foydalanishingiz mumkin
    3. Faol sahifa holati History API-da saqlanadi
    4. Siz turli xil boshqaruv elementlaridan foydalanishingiz mumkin: raqamlar, o'qlar, nuqta, harakatlanish paneli va kerakli sahifaga kirish maydoni.
    5. Siz tayyor mavzulardan birini ishlatishingiz mumkin
    6. Siz nafaqat matn, balki tasvirlar yoki ro'yxatlarning ham ko'rinishini yaxshilashingiz mumkin
    7. Ko'p sonli turli xil parametrlar va usullardan foydalanib, siz zerikarli matn o'rniga konfet yaratishingiz mumkin

    BOSHQARUVCHI Elementlar TOPLAMI

    Klassik sahifalash "Uy", "Oldingi", "Keyingi", "Oxirgi sahifa" tugmalari va, albatta, sahifa raqamlari kabi tugmalar to'plamidan iborat. Shuningdek, sahifa holati blokidan iborat. Har bir element alohida va mustaqil element bo'lib, u sahifaning istalgan joyida ko'rsatilishi yoki umuman ko'rsatilmasligi mumkin.

    Kerakli sahifaga tezda o'tish uchun - maydonga sahifa raqamini kiriting va "OK" tugmasini bosing.

    Ushbu to'plam kam sonli sahifalar uchun juda mos navigatsiya bo'lib, sahifalarni oldinga va orqaga aylantirish kifoya qiladi

    Bu siz slayderlarda ko'rganga o'xshash boshqaruv elementlarining eng minimalist ko'rinishi.

    Agar siz barcha sahifalarga tezkor kirishingiz kerak bo'lsa, ushbu nazorat foydalidir. Ushbu turdagi boshqaruv katta matn uchun va kichik postlar uchun mos keladi

    Ushbu turdagi nazorat sahifa raqamlari bo'lgan tugmalar yo'qligi sababli minimallashtiriladi.

    Bu sahifalarni boshqarishning zamonaviy va zamonaviy ko'rinishi. Bu juda kam joy egallaydi, lekin u juda funktsional.

    Bu standart sahifalash turi emas. Uning yordamida o'qilgan sahifalar foizini taxmin qilish mumkin.

    Plaginda ro'yxatdan o'tish shart emas boshqaruv elementlari. Kodning istalgan joyiga har qanday boshqaruvni qo'lda qo'shishingiz mumkin, ammo buning uchun data-href atributida sahifalash blokining noyob nomini va o'tish identifikatorini ko'rsatish kerak. Boshqaruv tugmasi sifatida siz istalgan HTML elementidan foydalanishingiz mumkin: a, tugma, span, div, img va boshqalar.

    Ushbu boshqaruv elementlari to'plami klassik ko'rinishni va ma'lum bir sahifaga o'tish uchun blokni birlashtiradi.

    MAZMUNI TURI

    Agar siz faqat matn tugunlarini o'z ichiga olgan blokirovka qilish uchun plagindan foydalansangiz, matn matnda bo'lsa, nuqta bilan qismlarga bo'linadi. Agar matn nuqta bo'lmasa, matnni ajratish uchun siz "splitSymbols" parametrida bo'sh joy, harf yoki boshqa belgilarni ko'rsatishingiz kerak.

    Agar siz paragraf teglari yoki matnli boshqa html teglarini o'z ichiga olgan blokirovka qilish uchun plagindan foydalansangiz, matn ushbu HTML teglari tomonidan qismlarga bo'linadi.

    Plagin sahifada matn va rasm teglarini formatlash uchun teglar sifatida teng darajada yaxshi ajratiladi. CSS uslublaridan foydalangan holda tasvir balandligining harakatini kuzatib boring

    ro'yxat boshqa teglar kabi bo'linadi. Eng muhimi, elementlar ro'yxati ishga tushirish elementining bolasi bo'lishidir

    KO'PROQ DEMOLAR

    Bir sahifada sahifa navigatsiyasi bilan bir nechta bloklar bo'lishi mumkin. Va bu bloklarning har birida sizning sozlamalaringiz bo'lishi mumkin

    Ushbu parametr birinchi yuklab olish saytidan keyin ko'rsatiladigan sahifa raqamini belgilaydi