Ağıllı səhifələr: jQuery istifadə edərək səhifələşdirmə. Text Pagination - jQuery Auto Pagination və ya avtomatik mətn səhifələnməsi Lazımi çərçivələri birləşdirmək

jQuery səhifələşdirmə plaginləri səhifələri və yazıları bir neçə ayrı səhifəyə bölmək üçün saytınıza inteqrasiya oluna bilən skriptlərdir. Veb səhifə səhifələrini yaratmağın əsasən iki yolu var. Ya səhifə yükləndikdən sonra məlumatları bir neçə səhifəyə bölən plagin vasitəsilə, ya da verilənlər bazasından lazımi miqdarda məlumatın alındığı və sonra səhifəyə yükləndiyi server tərəfi skripti vasitəsilə. Səhifələmə ola bilər yaxşı mənada saytınızdakı səhifə baxışlarının sayını artırın və bununla da axtarış motorları tərəfindən nəzərə alınan sıçrayış nisbətlərini və digər davranış amillərini yaxşılaşdırın.

Səhifələrinizdə böyük miqdarda məlumat varsa, səhifə naviqasiyası yaratmaq üçün plaginlər məzmunu ziyarətçilər üçün daha rahat etməyə kömək edəcəkdir. Bu yazıda vebsaytlarınızda istədiyiniz səhifələmə parametrlərini yaratmağınıza kömək edəcək bəzi plaginləri sizinlə paylaşacağıq. Bu plaginlərin əksəriyyəti pulsuzdur və istənilən dizayna inteqrasiya oluna bilər.

Bu, səhifələşdirmə və sadə istifadəçi interfeysinə sürüşdürməni birləşdirən Remy Elazare-dən əla jQuery plaginidir.

jPaginate bir xüsusiyyəti olan jQuery səhifələmə plaginidir: animasiya edilmiş səhifə nömrələri. İstifadəçi klikləməklə və ya sadəcə oxun üzərinə sürməklə mövcud səhifə nömrələri arasında sürüşə bilər. Birinciyə keçidlər və son səhifə də mövcuddur.

Pajinate, uzun siyahıları və ya məzmunu bir neçə ayrı səhifəyə bölməyə imkan verən sadə və çevik jQuery plaginidir. Bu, təkcə server tərəfində həyata keçirməyə sadə alternativ deyil, səhifə keçidləri arasında səhifə yükləmə müddəti praktiki olaraq sıfırdır (əlbəttə ki, ağlabatan səhifə ölçüsü ilə).

Üç CSS mövzusu ilə səhifələmə yaratmaq üçün sadə jQuery plagini.

jPList istənilən HTML işarələməsini (DIV, UL/LI, cədvəllər və s.) çeşidləmək, səhifələşdirmək və filtrləmək üçün çevik jQuery plaginidir - CodeCanyon-dan premium plagin.

Bu plagin sadə məzmun çeşidlənməsi yaradır və səhifələşdirmədən istifadə edərək məzmununuzu idarə etməyə imkan verir! Sadə Məzmun Çeşidlənməsi rahat çeşidləmə mexanizmi təmin etməklə interfeysinizi bəzəmək üçün asan bir yol təqdim edir. - Premium plagin CodeCanyon

Bu plagin asanlıqla səhifələnmiş elementlərin siyahısına baxmaq imkanı verir. Tətbiq etmək çox asandır və çox yüngüldür, buna görə də öz layihələrinizdə istifadə etmək üçün faydalı ola bilər.

SimplePager sizə mümkün qədər az səy və konfiqurasiya ilə səhifələşdirmə yaratmağa imkan verir. Bu plagin divləri, paraqrafları, siyahı elementlərini və demək olar ki, hər hansı digər məzmunu səhifələşdirə bilər.

təmin edən jQuery plagini yeni üsul veb saytınız və ya tətbiqiniz üçün səhifələmə. Ənənəvi üsullarda olduğu kimi səhifə nömrələrinin siyahısını çıxarmaq əvəzinə, jqPagination seçilmiş zaman “5 Səhifədən 1-i” kimi səhifə nömrələrinin interaktiv çıxışından istifadə edir, plagin istifadəçiyə istədiyi səhifə nömrəsini daxil etməyə imkan verir. "Birinci səhifə", "əvvəlki", "növbəti" və "son" keçidləri standart olaraq aktivdir, lakin söndürülə bilər.

Elementlərin böyük siyahısını (məsələn, axtarış nəticələri və ya xəbərlər, məqalələr) varsa, bu plaqindən istifadə edərək onları ayrı-ayrı səhifələrdə qruplaşdıra və naviqasiya elementləri əlavə edə bilərsiniz.

Səhifə naviqasiyası yaratmaq üçün başqa bir jQuery plagini. O, cəlbedicidir, intuitivdir, səhifə sürüşdürməsi ilə gəlir və siz limitsiz sayda səhifə əlavə edə bilərsiniz.

Səhifədəki elementlərin sayına deyil, məzmun sahəsinin hündürlüyünə əsaslanan səhifələşdirmə yaratmaq üçün jQuery plagini (müxtəlif məzmunlar üçün).

Smart Paginator, səhifələmə əlavə etməyi asanlaşdıran xüsusiyyətlərlə zəngin jQuery səhifələşdirmə plaginidir və o, həm də yüksək səviyyədə fərdiləşdirilə bilər. Smart Paginator həmçinin müştəri tərəfindəki məlumatları avtomatik olaraq süzgəcdən keçirə bilər.

Adından da göründüyü kimi, saytınızda səhifə naviqasiyası yaratmaq üçün Ajax-dan istifadə edir. O, bütün səhifəni deyil, yalnız müəyyən bir hissəni yükləyəcək, beləliklə saytın yüklənmə müddətini sürətləndirəcək.

Sweet Pages, elementlərin sadə sıralanmamış siyahısını naviqasiya ilə rahat səhifələr dəstinə çevirməyə imkan verən jQuery plaginidir. O, şərhlər, slayd şouları və ya hər hansı digər strukturlaşdırılmış məzmun növü üçün istifadə edilə bilər.

Hər hansı bir sualınız varsa, bizim istifadə etməyi məsləhət görürük

Səhifələmə və ya əgər popprost - səhifə naviqasiyası, hər hansı bir az və ya çox tam veb saytın vacib elementidir. Müxtəlif məzmun idarəetmə sistemləri, əksər hallarda, səhifələşdirməni həyata keçirmək üçün daxili alətlərə malikdir. Bu faydalı tapşırıq üçün yazılmış bir çox ayrıca plaginlər də var, əksər hallarda onlar . Bütün bu plaginlər həm icra tərzində, həm də fərqlidir funksionallıq, lakin əsas odur ki, onlar saytların həcmli məzmununun səhifələrə bölünməsinin server tərəfində həyata keçirilməsinə əla alternativdir.

Fikrimcə, ən asanlarından birini nəzərdən keçirməyi təklif edirəm jQuery plaginləri, təşkil etməyə, cəlbedici və sürətli səhifələşdirməyə kömək edən səhifələmə naviqasiyası yaratmaq üçün.

İstər çəki baxımından, istərsə də əlaqə, parametrlərlə bağlı hər şey baxımından çox yüngül, səhifələmə yaratmaq üçün sürətli, üç dizayn üslubu ilə təchiz edilmiş və dəstək yüklənmişdir.

Yeri gəlmişkən, əgər standart üslublar sizi qane etmirsə, istifadə edə bilərsiniz, bu da plaqinin .css-ə əlavə edilməsi çətin olmayacaq.

İndi plaqinin özünü və üslub faylını sənədə necə düzgün bir şəkildə qoşmağı, yəni onu birbaşa saytın səhifələrində tətbiq etməyi və mövcud plagin parametrlərini nəzərdən keçirək.

Başlamaq üçün, əlbəttə ki, jquery javascriptinin özü və css stil faylının diqqətlə paketləndiyi mənbələrə malik bir plaginə sahib olmalısınız.

Pluginin addım-addım istifadəsinə baxaq:

Səhifənin əsas hissəsində, ... bölməsində, jQuery çərçivəsini, tercihen 1.7.2 və ya daha yeni versiyanı birləşdirməlisiniz, bu, xüsusi Google repozitoriyasından istifadə etməklə edilə bilər:

Əgər vebsaytınızda jQuery artıq işə salındıqda və tam sürətlə işləyir, yuxarıda təsvir edilən bütün hərəkətləri təhlükəsiz keçə bilərsiniz, əsas odur ki, jQuery versiyasının çox sıx olmadığından əmin olun. WordPress-də, yeri gəlmişkən, hər şey qaydasındadır.
Sonra, özümüzü bağlayırıq iş atı- jquery.simplePagination.js plagini:

Bu barədə təlaşa düşmək lazım deyil, sadəcə olaraq sizə lazım olan üslubu açıq, qaranlıq və ya yığcam seçin və şablonunuzun styles.css faylına bir sıra qaydalar yerləşdirin. Özünüzü qeydiyyatdan keçirin öz üslubları və ya orijinallıq və veb sayt qurma bacarıqlarının inkişafı baxımından bir seçim olan Bootstrap-dan istifadə edin, daha çox üstünlük verilir.

Səhifə naviqasiya panelini yerləşdirməyi planlaşdırdığınız sayt səhifələrində daha məntiqli və daha tez-tez bu əsas məzmunun aşağı hissəsində göstərmək üçün aşağıdakıları yazmalısınız:
Yüngül fon üçün:

Kompakt mövzu:

$(function() ( $(#light-pagination).pagination(( maddələr: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

Nümunədə mən işıqlı mövzunun səhifələnməsi üçün inisializasiyadan istifadə etdim #light-pagination , siz selektoru digərinə dəyişə bilərsiniz, yığcam üçün bu #compact-pagination , və ya tünd üslub üçün #dark-pagination . Bu halda cssStyle funksiyasında klassı dəyişməyi unutmayın.
Yuxarıda yazdığım kimi, plagin parametrlərdə çox çevikdir, aşağıdakı seçimlər dəyişdirilə bilər:

• maddələr — Səhifələri hesablamaq üçün istifadə ediləcək elementlərin ümumi sayı. Defolt: 1.
• itemsOnPage — Hər səhifədə göstəriləcək elementlərin sayı. Defolt: 1.
• səhifələr — Könüllü. Əgər dəyər göstərilibsə, elementlər və itemsOnPage seçimləri nəzərə alınmır. Siyahıdakı səhifələrin sayını təyin edir.
• displayedPages — Naviqasiya zamanı neçə səhifə nömrəsi görünməlidir. Minimum icazə verilən dəyər: 3, standart: 5.
• kənarlar — Nömrələmənin əvvəlində və sonunda neçə səhifə nömrəsi görünür. Defolt dəyər: 2.
• currentPage — Başladıqdan dərhal sonra hansı səhifə seçiləcək. Məntiqi, standart dəyər: 1.
• hrefTextPrefix - HREF atributunda istifadə olunan sətir səhifə nömrəsindən əvvəl əlavə edilir. Defolt: "#page- " .
• hrefTextSuffix — HREF atributunda istifadə olunan sətir səhifə nömrəsindən sonra daxil edilir. Defolt boş sətirdir.
• prevText — Əvvəlki səhifəyə düymənin mətni. Defolt: "Əvvəlki".
• nextText — Növbəti səhifəyə keçid düyməsinin mətni. Defolt: "Növbəti"
• cssStyle - Müəyyən edin CSS üslubu. Defolt: "yüngül mövzu"
• selectOnClick - Kliklədikdən sonra səhifəni seçmək, standart olaraq aktivdir (doğrudur), mən hələ də niyə söndürülməli olduğunu başa düşmürəm, amma belə bir seçim var, dəyər: "yanlış".

Ən əsas parametrlərə baxdıq. HAQQINDA əlavə funksiyalar Və mövcud üsullar Sənədləri birbaşa tərtibatçının səhifəsində öyrənməklə bu plaqindən necə istifadə edəcəyinizi öyrənə bilərsiniz.

Əlimdən gələn tək şey sizə uğurlar və yeni layihələrinizdə uğurlar arzulamaqdır.

Klassik Səhifələndirmə "Ev", "Əvvəlki", "Sonrakı", "Son səhifə" düymələri və əlbəttə ki, səhifə nömrələri kimi düymələr dəstindən ibarətdir. Həmçinin səhifə statusu blokundan ibarətdir. Hər bir element ayrıca və müstəqil elementdir, səhifənin istənilən yerində göstərilə bilər və ya ümumiyyətlə göstərilmir.

İstədiyiniz səhifəyə tez keçmək üçün - qutuya səhifə nömrəsini daxil edin və "OK" düyməsini basın.

Bu dəst, səhifələri irəli və geri çevirmək kifayətdirsə, az sayda səhifələr üçün uyğun mükəmməl naviqasiyadır

Bu, əvvəllər sürgülərdə gördüyünüz kimi idarəetmə vasitələrinin ən minimalist görünüşüdür.

Bu nəzarət bütün səhifələrə tez daxil olmaq lazımdırsa faydalıdır. Bu nəzarət növü böyük mətn və kiçik yazılar üçün uyğundur

Səhifə nömrələri olan düymələrin olmaması səbəbindən bu cür nəzarət minimuma endirilir.

Bu, səhifələrin idarə edilməsinin qəşəng və müasir görünüşüdür. Çox az yer tutur, lakin çox funksionaldır.

Bu standart səhifələmə növü deyil. Bununla oxunan səhifələrin faizini təxmin etmək mümkündür.

Nəzarət elementləri plagində qeydiyyatdan keçmək lazım deyil. Siz kodun istənilən yerinə istənilən nəzarəti əl ilə əlavə edə bilərsiniz, lakin data-href atributunda səhifələşdirmə blokunun unikal adını və keçid identifikatorunu təyin etmək lazımdır. İdarəetmə düyməsi olaraq istənilən html elementindən istifadə edə bilərsiniz: a, düymə, span, div, img və s.

Bu idarəetmə dəsti klassik görünüşü və xüsusi səhifəyə keçid üçün bloku birləşdirir.

Yalnız mətn qovşaqlarını ehtiva edən bloklamaq üçün plagindən istifadə edirsinizsə, mətn mətndə olarsa, hissələrə nöqtələrlə bölünəcək. Mətn nöqtə deyilsə, mətni ayırmaq üçün "splitSymbols" parametrində boşluq, hərf və ya digər simvolu göstərməlisiniz.

Əgər siz paraqraf teqləri və ya mətni olan digər html teqləri olan bloklamaq üçün plagindən istifadə edirsinizsə, mətn bu html teqləri ilə hissələrə bölünəcək.

Plugin səhifədə mətn və şəkil teqlərini formatlaşdırmaq üçün teqlər kimi eyni dərəcədə yaxşı bölünür. CSS üslublarından istifadə edərək şəkil hündürlüyünün davranışına diqqət yetirin

siyahı digər teqlər kimi bölünür. Ən əsası odur ki, elementlərin siyahısı başlanğıc elementinin uşaqıdır

Bir səhifədə səhifə naviqasiyası ilə bir neçə blok ola bilər. Və bu blokların hər birində parametrlər ola bilər

Bu parametr ilk yükləmə saytından sonra göstəriləcək səhifənin nömrəsini təyin edir

Veb saytlar adətən bir neçə səhifədən ibarətdir. Onlarda 3-5 səhifə ola bilər, məsələn, açılış səhifəsində və ya daha çox, daha çox.

Hər bir yaxşı veb-saytda istifadəçiyə düzgün naviqasiya və saytın səhifələri arasında hərəkət etməyə imkan verəcək naviqasiya olmalıdır. Siz JavaScript istifadə edərək belə səhifələşdirmə yarada bilərsiniz. Bu yazıda belə bir naviqasiyanı necə yaratmaq barədə danışacağıq.

Daha bir şey, adi JavaScript-ə əlavə olaraq, nümunədə Bootstrap 4 istifadə olunur. Onun komponenti bootstrap səhifələmə jQuery kitabxanası, yəni xüsusi Buzina Pagination plagini ilə birləşdirilir. Bu, aralarında naviqasiya ilə bütün məlumatları bir neçə səhifəyə bölməyə imkan verir.

Bootstrap və JQuery ilə işləmək üçün onları birləşdirməlisiniz. Bu, sizdə edilə bilər HTML sənədi, etiketlərdən istifadə etməklə. 3 qoşalanmış teq yaradın;. Biz Ajax.js, bootstrap 4 və JQuery plagininin özünü birləşdirəcəyik.

Bootstrap-ı düzgün birləşdirmək üçün siz həmçinin onun href atributunda etiketdən istifadə etməlisiniz, biz çərçivəmizə keçid göstəririk. Bu, plaginin ehtiva etdiyi üslublara keçid göstərəcək.

Beləliklə, iş üçün lazım olan hər şeyi birləşdirdik. Qalan şey, səhifələmə yaratmaq üçün plaqini birləşdirməkdir - Buzina Pagination. Onu yaratmaq üçün biz də yaradırıq və etiketləyirik. "href" və "src" atributlarında eyni keçidi daxil edirik.

Buzina Pagination və Bootstrap plaginləri, skriptlərdən əlavə, lazımi üslubları da ehtiva edir. Biz onları etiket vasitəsilə əlaqələndiririk;. İndi xatırlayın - hətta CSS-i yaxşı başa düşsəniz belə, daxil olub plagin parametrlərini dəyişdirməyi məsləhət görmürük. Sadəcə əylənmək üçün siz onları kod redaktorunda aça və baxa bilərsiniz, lakin əvvəlcə kodun orijinal versiyasını yadda saxlamağınızdan əmin olun.

HTML sənədinizdə aşağıdakı kod olmalıdır:

Bütün məqalələrimizdə 1-in yaradılmasına baxdıq HTML səhifələri, eyni nümunədə bir sənəd vasitəsilə eyni anda bir neçə yaradacağıq. Eyni zamanda, biz onları müxtəlif linklərə yerləşdirməyəcəyik; Hər səhifə üçün ayrıca blok yaradacağıq.

Bizim nümunəmizdə cəmi 5 səhifə yaradırıq. Onların hər biri üçün ayrıca div yaradın. Vizual nümayiş üçün içəriyə bir neçə mətn yaza bilərsiniz. İstəsəniz 10, 20 və 30 səhifə yarada bilərsiniz.

Onlarla işləmək üçün siniflərə və ya identifikatorlara ehtiyacınız yoxdur. Əsas odur ki, bütün bu səhifələr nümunə sinfi ilə əsas blokun içərisində yerləşir.

Bir neçə funksiyanı birləşdirməlisiniz:

Səhifəni yaratmağı bitirdik. Sonda nə əldə etdik? Veb saytınıza mükəmməl uyğunlaşacaq yaxşı üslublu naviqasiyamız var. Bir neçə element əlavə edin və onu mövcud səhifələrə uyğunlaşdıra bilərsiniz.

Skriptləri istədiyiniz kimi dəyişə bilərsiniz, ancaq JavaScript-i yaxşı bildiyiniz halda. Əsas odur ki, skriptlərin və plagin üslublarının dəyərlərini dəyişdirməyin.

Bu səhifələşdirmənin böyük üstünlüyü var - istifadə rahatlığı. İstifadəçiyə səhifələr arasında getmək üçün əlavə keçidlər yükləməyə ehtiyac olmayacaq.

Üstəlik, istifadə edilən skriptlərin sayının az olması səbəbindən optimallaşdırma çox da azalmayacaq.

Reg.ru: domenlər və hostinq

Rusiyada ən böyük qeydiyyatçı və hostinq provayderi.

2 milyondan çox domen adı xidmətdədir.

Təqdimat, domen poçtu, biznes həlləri.

Dünya üzrə 700 mindən çox müştəri artıq öz seçimini edib.

*Sürüşməni dayandırmaq üçün siçanın üzərinə keçin.

Geri irəli

Məzmunu ayrı səhifələrə bölmək (səhifələşdirmə) böyük həcmli məlumatlarla işləyərkən ümumi həll yoludur. Bu, adətən tələb olunan səhifənin nömrəsini verilənlər bazasından məlumatı götürən və onu müəyyən formada qaytaran əlavə prosessora ötürməklə həyata keçirilir. Zəhmət tələb edən bir proses, lakin zəruri bir pislik. Yoxsa yox?

Kiçik həcmli məlumatlarla işləyərkən, məzmunun əvvəlcədən hazırlanmış, aydın şəkildə təşkil edilmiş və asanlıqla əldə edilə bilən olması rahat olmazdımı?

İndi biz elementlərin nizamsız siyahısını asan naviqasiya ilə axtarış sistemi üçün uyğun səhifələr dəstinə çevirməyə imkan verəcək jQuery həlli hazırlayacağıq. Bu plagin şərhlər, slayd şouları və ya hər hansı digər strukturlaşdırılmış məzmun növü üçün istifadə edilə bilər.

Konsepsiya

Zəng edildikdə, plagin elementləri bölür