Sahifalar jQuery demo yon sahifalari.

Kontseptsiya

Chaqirilganda plagin elementlarni ajratadi

, sozlanishi mumkin bo'lgan guruhlar soni uchun tartibsiz ro'yxatga joylashtirilishi mumkin.

Bu guruhlar (yoki tomonlar) element atrofida oqadi, u ko'rinmaydi, lekin hid element atrofida oqadi.
• kimga kuch berilgan
  • toshib ketish: yashirin
  • toshib ketish: yashirin
  • toshib ketish: yashirin
  • toshib ketish: yashirin

  . Ko'rinish zonasi ichidagi elementlar bilan fon sahifasini ko'chirish uchun bir qator navigatsiya buyruqlari yaratiladi Fikrni yaxshiroq tushunish uchun quyidagi rasmga qarang.

  Krok 1 - XHTML

  Birinchi croque XHTML tartibining mohiyatidir.

  • O'lchamdagi har qanday kontent jQuery tomonidan avtomatik ravishda ko'rsatiladi (agar siz tasvirlarni tahrirlashni istasangiz, ularning kengligi va balandligini belgilashingiz kerakligini unutmang).

    Krok 2 - CSS

    Tartibni tugatgandan so'ng, biz ma'lumotlarga g'amxo'rlik qilamiz zamonaviy dizayn.

    Ko'p tarixiy navigatsiyaga ega bo'lmaslik uchun turli uslublardan foydalanish yaxshi fikr, chunki plagin JavaScript-da saqlanadi.

    Bu shuni anglatadiki, xakerlar sizning orqaga qarab navigatsiyangizni yaxshilay olmaydi va, albatta, uni tezlashtiradi. styles.css – 1-qism#main( /* Asosiy konteyner div */ pozitsiyasi:nisbiy; chegara:50px avtomatik; kenglik:410px; fon:url("img/main_bg.jpg") takrorlash-x #aeadad; chegara: 1px qattiq #CCCCCC; : 70px 25px 60px;

    Google Chrome Ko'rinish zonasi ichidagi elementlar bilan fon sahifasini ko'chirish uchun bir qator navigatsiya buyruqlari yaratiladi o'rnatilgan soyalar bilan birlashtirilgan yumaloq burchaklarni yoqtirmaydi): */ -moz-box-shadow:0 0 0 10px #222 inset; /*-webkit-box-shadow:0 0 10px #222 inset;*/ box-shadow:0 0 10px #222 inset;).

    ) .swControls (pozitsiya: mutlaq; chekka tepa: 10px; ) Biz birinchi navbatda blokga uslubni beramiz va tartibsiz ro'yxat (qolganlari tayinlangan

    id = egasi E'tibor bering, biz CSS3-da soya effektini atribut bilan vikorist qilamiz kiritilgan Ichki soyani taqlid qilish uchun CSS3 qoidalarining aksariyatida bo'lgani kabi, biz hali ham boshqa brauzerlar uchun qoidalarni belgilashimiz kerak: Mozilla (Firefox) va Webkit (Safri va Chrome). Webkit versiyasi sharhlanganini qadrlashingiz mumkin.

    Bu Chrome brauzerida bir soatlik vikoristanda soyani bo'yash bilan bog'liq xato bilan bog'liq

    A.swShowPage( /* Sahifa slaydni ishga tushiruvchi havolalar */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*chegara: 1px qattiq #ccc;*/ /* CSS3 yumaloq burchaklar */ -moz-border-radius:7px;-webkit-border-radius:7px border-radius: 7px (fon rangi:#2993dd; /* CSS3 ichki soya */ -moz-box-shadow: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; chekka: 10px 10px 0; toʻldirish: 20px; float: chap; inset): */ -moz-box-shadow:0 0 6px #111111; -shadow:0 0 6px #111111 * Ham ushlagichga, ham ushlagichga o'ralgan burchaklarni qo'llash lis */ -moz-border-radius:8px;-webkit-border-radius:8px;

    Men kod sinfini tugataman aniq, bu elementlarning o'rashini olib tashlash uchun ishlatiladi.

    
    

    Krok 3 - jQuery

    Darsning yakuniy qismi uchun biz uni yon tomonga burishimiz kerak Men versiyani saqlayman jQuery kutubxonalari.

    Samaradorlik uchun barcha tashqi JavaScript-ni yopilish asosiy yorlig'idan oldin qo'shish oqilona bo'ladi, chunki ba'zi skriptlar sahifani ko'rsatishni bloklaydi.

    script.js – 1-qism<2) return this; // Creating the controls div: var swControls = $("

    (function($)( // sweetPages jQuery plaginini yaratish: $.fn.sweetPages = function(opts)( // Hech qanday variant oʻtmasa, boʻsh opts obyekti yaratiladi if(!opts) opts = (); var resultsPerPage = variant element, // va uni ma'lumotlar usuli bilan saqlash: var el = $(this .ceil(li.length/resultsPerPage); "); for(var i=0;i

    "); // swControls div ga havola qo'shing: swControls.append(""+(i+1)+""); ) ul.append(swControls); JQuery plaginini yaratish siz o'ylaganchalik oson emas. Biz kuch sifatida yangi funktsiyani yaratishimiz kerak jQuery.fn(yoki $.fn, bu erda ko'rsatilganidek).

    Pokazchik bu Bu funksiya asl JQuery obyektiga ishora qiladi.

    Keyin funksiya bilan tomonlar sonini yangilaymiz Math.ceil().

  • Von garov natijasini butun songa yaxlitlaydi, bu bizga tomonlarning to'g'ri sonini beradi. Endi, agar bizda bir nechta sahifa bo'lsa, biz tsikldan o'tishimiz mumkin jQuery-da chiqish to'plamini bo'sh qoldirib, yangi elementlar guruhini yaratadi (aks holda, tsiklning har bir iteratsiyasida biz elementlarning chiqish to'plamidan boshladik.
  • ).

    script.js – 2-qism

    Var maxHeight = 0;

    var totalWidth = 0;

    var swPage = ul.find(".swPage");

    swPage.each(function())( // Yangi sahifalar bilan barcha ijodlarni aylanib chiqish: var elem = $(this); var tmpHeight = 0; elem.find("li").each(function())(tmpHeight+= $( this ).data("height");));if(tmpHeight>maxHeight) maxHeight = tmpHeight totalWidth+=elem.outerWidth());));

    .

    swPage.wrapAll(" "); // Ul balandligini ip sahifasining balandligiga o'rnatish: ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append("").width(totalWidth); var hyperLinks = ul.find("a.swShowPage"); barcha sahifalarni o'z ichiga oladi) va uni faol deb belgilang: $(this).addClass("active").siblings().removeClass ("faol");swSlider.stop().animate(("margin-left": - (parseInt($(this).text())-1)*ul.width()),,"sekin") ; e.preventDefault( )); ishlaydi: hyperLinks.eq(0).addClass("aktiv"); chap" ":-swControls.width()/ 2)), buni qaytaring;))) (jQuery); "); // Ul balandligini ip sahifasining balandligiga o'rnatish: ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append(" Skriptning yana bir qismida biz yangi yaratilgan sahifalarni aylanib chiqamiz, ularning o'lchamlarini o'rnatamiz va yomon hid yovuzlik atrofida oqadigan tarzda o'rnatamiz. Jarayonda biz tomonni qanday topishni bilamiz va aniq elementning balandligini o'rnatamiz Biz tomonlarni ham blokga qadar yotqizamiz

    swSlider

    , bu ularning "elkama-elka" ko'rinishini tasvirlash uchun etarlicha keng.

    Keyinchalik, biz navigatsiya xabarlarini bosishimiz va blokni ko'chirishimiz mumkin usuli jonlantirish . Bu siz demoda ko'rgan zarb qilish (siljish) effektini yaratadi.

    , ular asosiy funksionalligini saqlab, boshidan hidlaydi.

    Veb-saytlar, qoida tariqasida, juda ko'p sahifalarga ega.

    Ular 3-5 sahifaga kengaytirilishi mumkin, masalan, ochilish sahifasida va hatto undan ham ko'proq.

    Har bir yaxshi sayt foydalanuvchilarga sayt sahifalari orasida toʻgʻri oʻtish va harakat qilish imkonini berish uchun navigatsiyani notoʻgʻri joylashtirish uchun javobgardir.

    JavaScript-dan foydalanib, bunday sahifalarni yaratishingiz mumkin.

    Ushbu maqolada biz bunday navigatsiyani yaratish haqida gapiramiz.

    Yana bir narsa, asosiy JavaScript-dan tashqari, ilova Bootstrap 4-dan foydalanadi. Ushbu yuklash paginatsiyasi komponenti JQuery kutubxonasi va maxsus Buzina Pagination plagini bilan birlashtirilgan.
    Bu sizga barcha ma'lumotlarni bir nechta sahifalarga bo'lish imkonini beradi, ular orasidagi navigatsiya. Kerakli ramkalarni ulash:

    Bootstrap va JQuery-dan foydalanish uchun ularni yoqishingiz kerak. Qo'shimcha teglar uchun HTML hujjatingizdan foydalanishingiz mumkin Agar siz allaqachon saytingizda jQuery yoqilgan bo'lsangiz va ishlayotgan bo'lsangiz, tanadagi barcha o'zgarishlar yuqorida tavsiflangan, siz uni xavfsiz o'tkazib yuborishingiz mumkin va jQuery versiyasi juda qorong'i bo'lmasligi uchun ehtiyot bo'ling. WordPress-da, gapirishdan oldin, hamma narsa yaxshi. Keyinchalik, biz ishchi kuchimizni - plaginni ulaymiz
    

    jquery.simplePagination.js

    Siz shahar yaratishingiz shart emas, shunchaki kerakli uslubni, engil, qorong'i yoki ixchamni tanlang va shabloningiz uchun styles.css fayliga qoidalar to'plamini kiriting.
    Ro'yxatdan o'ting

    kuch uslublari

    yoki tezlashtiring

    Bootstrap , xuddi shu variant, saytni ishlab chiqishning o'ziga xosligi va rivojlanishi nuqtai nazaridan, u qisqaroq bo'ladi..
    Krok 3. HTML

    • Yon navigatsiya panelini siz joylashtirmoqchi bo'lgan sayt sahifalarida ko'rsatish uchun asosiy joyning pastki qismida quyidagilarni yozish mantiqiy va eng keng tarqalgan: Yengil fon uchun: 1 .
    • Kompakt mavzu:$(function() ( $(#light-pagination).pagination(( element: 100, itemsOnPage: 10, cssStyle: "engil mavzu" )); )); 1 .
    • Misolda men #light-pagination bilan engil sahifalash uchun initsializatsiyani tanlayman, siz selektorni boshqa narsaga o'zgartirishingiz mumkin, ixcham uslub uchun #ixcham-sahifalash yoki qorong'u uslub uchun #dark-pagination.- Majburiy emas.
    • Qiymat ko'rsatilganda, elementlar va itemsOnPage parametrlari e'tiborga olinmaydi. Roʻyxat uchun sahifalar sonini belgilaydi. 3 ko'rsatilgan sahifalar 5 .
    • — Navigatsiya paytida qancha sahifa raqamlari ko'rinishi mumkin. Minimal qabul qilinadigan qiymatlar: 2 .
    • , tozalash uchun: qirralar 1 .
    • — Sahifada qancha sahifa raqamlari ko'rinadi va, masalan, raqamlash. Tozalashning ahamiyati: joriy sahifa.
    • — Qaysi tomon ishga tushirilgandan so'ng darhol tanlanadi. Bizning tushunchamizga ko'ra, bu mantiqiy:
    • hrefTextPrefix— HREF atributida paydo bo'lgan qator sahifa raqamidan oldin qo'shiladi. Tayyorgarlik uchun:.
    • "#sahifa-" hrefTextSuffix — HREF atributida paydo bo'ladigan qator sahifa raqamidan keyin kiritiladi.
    • , xuddi shu variant, saytni ishlab chiqishning o'ziga xosligi va rivojlanishi nuqtai nazaridan, u qisqaroq bo'ladi. Promochanlarning orqasida bo'sh qator bor. oldingi matn- Old tomondagi tugma matni. Tayyorgarlik uchun:
    • "Oldingi" keyingi matn — Keyingi sahifadagi tugma matni. Tayyorgarlik uchun:

    "Keyingisi" - Ma'nosi CSS uslubi

    .

    Tayyorgarlik uchun: "engil mavzu" tanlangOnClick

    — Bosgandan so‘ng tomonni tanlang, bosgandan keyin — xabardor qilinadi(

    

    Bu Remy Elazare tomonidan yaratilgan ilg'or jQuery plagini bo'lib, u oddiy backend interfeysida sahifalarni raqamlash va aylantirishni o'z ichiga oladi.

    jPaginate

    

    jPaginate- Shaxsiy sahifa raqamlash uchun jQuery plagini, u bitta xususiyatga ega: jonlantirilgan sahifa raqamlari. Foydalanuvchilar sichqoncha kursorini strelka ustiga bosish yoki shunchaki olib borish orqali mavjud sahifa raqamlari boʻylab oʻtishlari mumkin. Posilannya birinchi marta

    Men boshqa tomondan ketaman

    

    Men boshqa tomondan ketaman ham mavjud.

    

    Pajinat - Oddiy va ixcham jQuery plagini, bu sizga bir nechta ro'yxatlarni bir nechta sahifalarga bo'lish yoki joylashtirish imkonini beradi. Bu nafaqat serverni amalga oshirishga oddiy muqobil, balki yonma-yon o'tishlar orasidagi sahifalarni jalb qilish vaqti deyarli nolga teng (ayniqsa, sahifaning oqilona o'lchami bilan).

    Uzr so'rayman

    

    Uzr so'rayman jQuery plagini uchta CSS mavzusidan foydalangan holda sahifalarni raqamlashni yaratish..

    

    jPList ê har qanday HTML tartibini saralash, raqamlash va filtrlash uchun kichik jQuery plagini (DIV, UL/LI, jadvallar va boshqalar) -

    CodeCanyon-dan premium plagin

    

    Ushbu plagin oddiy tarkibni saralashni yaratadi va qo'shimcha sahifa raqamlari yordamida tarkibingizni tartibga solish imkonini beradi!

    Oddiy tarkibni saralash interfeysingizni kuchli saralash mexanizmi bilan yaxshilashning oson usulini taqdim etadi.

    

    Oddiy tarkibni saralash interfeysingizni kuchli saralash mexanizmi bilan yaxshilashning oson usulini taqdim etadi.-

    

    CodeCanyon-dan premium plagin Oson sahifalash Ushbu plagin bo'limlardan sahifalargacha bo'lgan elementlar ro'yxatini osongina ko'rish imkonini beradi.

    

    Amalga oshirish juda oddiy va juda engil, bu boshqa loyihalarda foydalanish uchun foydali bo'lishi mumkin. SimplePager Iloji boricha minimal harakat va konfiguratsiya bilan sahifa raqamlashni yaratishga imkon beradi.

    

    Eski uslubdagi navigatsiyani yaratish uchun yana bir jQuery plagini.

    

    Bu jozibali, intuitiv va sahifalar bo‘ylab harakatlanish uchun slayder bilan birga keladi, shuning uchun siz xohlagancha ko‘p sahifa qo‘shishingiz mumkin.

    Sahifalarni (turli joylarda) shaxsiy raqamlash uchun jQuery plagini, bu sahifadagi elementlar soniga emas, balki tarkibga ega maydonning balandligiga asoslanadi.

    

    Sahifalarni (turli joylarda) shaxsiy raqamlash uchun jQuery plagini, bu sahifadagi elementlar soniga emas, balki tarkibga ega maydonning balandligiga asoslanadi. Smart paginator

    

    Bu yon navigatsiya uchun juda ko'p funktsional jQuery plaginidir, bu sizga hatto oddiy vazifalarga ham sahifa raqamlashni qo'shish imkonini beradi va u ham yaxshi ishlaydi.

    Smart Paginator mijoz tomonidagi ma'lumotlarni avtomatik ravishda filtrlashi mumkin.

    

    Smart Paginator mijoz tomonidagi ma'lumotlarni avtomatik ravishda filtrlashi mumkin. Nomidan taxmin qilganingizdek, bu saytingizda yonma-yon navigatsiya yaratish uchun Ajax vositasi.

    
    

    Butun sahifani emas, balki qo'shiqning faqat bir qismini jalb qilish orqali bu saytni jalb qilish vaqtini tezlashtiradi.

    1. Shirin sahifalar
    2. - Bu jQuery plagini bo'lib, dastlab tartibsiz elementlar ro'yxatini navigatsiya bilan qo'lda sahifalar to'plamiga aylantirish imkonini beradi.
    3. Tarkibdan sharhlar, slayd-shoular yoki boshqa turdagi tuzilgan kontent uchun foydalanishingiz mumkin.
    4. Agar sizda ovqatlanish bilan bog'liq muammo bo'lsa, tezda bizning kompaniyamiz bilan bog'lanishingizni tavsiya qilamiz
    5. Siz navigatsiyani teginish va sichqoncha bilan surishingiz mumkin
    6. Siz vikoristuvat rízny turi sahifalar o'zgartirish mumkin
    7. Faol sahifa holati History API-da saqlanadi

    Siz turli xil tugmalar to'plamini tanlashingiz mumkin: raqamlar, o'qlar, element, jarayon paneli va kerakli sahifalarni kiritish uchun maydonlar

    Siz tayyor mavzulardan birini vikorize qilishingiz mumkin

    Siz nafaqat matnni, balki tasvir yoki sahifalarni ham etkazishingiz mumkin

    Ko'p sonli turli xil parametrlar va usullar bilan siz zerikarli matn o'rniga konfet yaratishingiz mumkin

    BOSHQARISH Elementlari TOPLAMI

    Agar siz barcha sahifalarga oson kirishni rad qilishingiz kerak bo'lsa, ushbu nazorat mavjud.

    Ushbu turdagi kerubanya katta matnlar va kichiklar uchun ishlatiladi.

    Ushbu turdagi nazorat sahifa raqamlari bo'lgan tugmalar yo'qligiga minimallashtirishni o'z ichiga oladi.

    Bu boshqaruv sahifalarining zamonaviy va zamonaviy ko'rinishi.

    Bu juda ko'p joy emas, lekin u juda funktsional.

    Bu standart sahifalash turi emas.

    Uning yordamida o'qilgan sahifalar foizini taxmin qilish mumkin.

    Plaginda ro'yxatdan o'tish uchun elementlarni boshqarish talab qilinmaydi.

    Siz avtomatik ravishda kodning joylashuvi ustidan istalgan nazoratni qo'lga kiritishingiz mumkin, lekin bu data-href atributidagi ma'lum bir sahifalash bloki nomi va o'tish identifikatori uchun shart emas.

    Boshqaruv tugmasi sifatida siz istalgan HTML elementini sozlashingiz mumkin: a, tugma, span, div, img va boshqalar. Bu klassik ko'rinish va bistorni ma'lum bir tomonga o'tkazish uchun blokning kombinatsiyasi. MAZMUNI TURI

    Agar siz faqat matn harflarini o'z ichiga olgan blokda plagindan foydalansangiz, matn matndagi kabi qismlarga, docklarga bo'linadi.

    Matn nuqta qo'yilmagani uchun, matn paydo bo'lishi uchun "splitSymbols" parametrida bo'sh joy, harf yoki boshqa belgilar kerak bo'ladi.

    Agar siz maqola piktogrammalariga yoki boshqa HTML teglariga matn bilan mos keladigan moduldan foydalansangiz, matn HTML teglari bo'lgan qismlarga bo'linadi.

    Plagin sahifada bir xil darajada yaxshi bo'linadi