Uyarlanabilir sayfalama. Bootstrap - Sayfalandırma (sayfalandırma için gezinme kutusu)

Sayfalandırma veya basitçe sayfa sayfa gezinme, az ya da çok dolu bir sitenin önemli bir unsurudur. Çeşitli içerik yönetim sistemleri, çoğunlukla, sayfalandırmayı uygulamak için yerleşik araçlara sahiptir. Bu faydalı iş için yazılmış birçok ayrı eklenti de vardır, çoğu durumda bunlar kütüphane kullanılarak oluşturulur. Tüm bu eklentiler, performans ve yazılım tarzında farklı işlevsellik, ancak hepsinden önemlisi, bu, büyük içerik sitelerinin sayfalandırmasının sunucu tarafında uygulanmasına harika bir alternatiftir.

Düşünmeyi öneriyorum, bence, en kolaylarından biri jQuery eklentileri, organize etmenize yardımcı olan sayfa sayfa gezinme, çekici ve hızlı sayfalama oluşturmak için.

Her bakımdan ve ağırlıkta çok hafif ve bağlantı, ayarlar, sayfalandırma oluşturma hızlı, üç tasarım stiliyle tamamlandı ve destek için ücretlendirildi.

Bu arada, standart stillerden memnun değilseniz, vidalamak zor olmayacak şekilde kullanabilirsiniz. .css Eklenti.

Şimdi, eklentinin kendisini ve stil dosyasını belgeye nasıl düzgün şekilde bağlayacağımıza, yani doğrudan site sayfalarına nasıl yerleştireceğimize ve mevcut eklenti ayarlarını gözden geçirelim.

İlk olarak, elbette, jquery javascript'in kendisinin ve css stilleri dosyasının özenle paketlendiği kaynak kodlu bir eklentiye sahip olmanız gerekir.

Eklentinin nasıl kullanılacağına adım adım bakalım:

Adım 1. jQuery dahil

Sayfanın gövdesinde bölüme ... jQuery çerçevesini, tercihen 1.7.2 veya daha yeni sürümünü bağlamanız gerekir, bunu özel bir Google depolama alanı kullanarak yapabilirsiniz:

Sitenizde zaten jQuery etkinse ve güçlü ve ana ile çalışıyorsanız, yukarıda açıklanan tüm hareketleri güvenle atlayabilirsiniz, asıl şey jQuery sürümünün çok yoğun olmadığından emin olmaktır. Bu arada, WordPress'te bu iyi.
Ardından, işgücümüz olan eklentiyi bağlarız jquery.simplePagination.js:

Bahçeyi çitle çevirmek zorunda değilsiniz, sadece istediğiniz stili seçin, açık, koyu veya kompakt ve kural setini şablonunuzun stylesheet.css dosyasına yapıştırın. Kendi stillerinizi yazın veya kullanın Önyükleme, ayrıca site oluşturma becerilerinin özgünlüğü ve gelişimi açısından bir seçenek daha da tercih edilir.

Adım 3. HTML

Sayfalandırma çubuğunu yerleştirmeyi planladığınız sitenin sayfalarında görüntülemek için, daha mantıklı ve çoğu zaman değil, ana içeriğin altındadır, aşağıdakileri yazmalısınız:
Hafif bir arka plan için:

Kompakt tema:

$ (function () ($ (# light-sayfalandırma) .pagination ((items: 100, itemsOnPage: 10, cssStyle: "light-theme"));));

Örnekte, ışık temasını # açık sayfa sayfalandırmasını sayfalandırmak için başlatmayı kullandım, seçiciyi başka bir şeyle değiştirebilirsiniz, kompakt olan için bu # kompakt sayfalandırma veya karanlık stil için # koyu sayfalamadır. Bu durumda fonksiyonda da sınıfı değiştirmeyi unutmayınız. cssStyle.
Kai Yukarıda yazdım, eklenti ayarlarda çok esnek, aşağıdaki seçenekler değiştirilebilir:

• öğeler- Sayfaları hesaplamak için kullanılacak toplam eleman sayısı. Varsayılan: 1 .
• öğelerOnPage- Her sayfada görüntülenen öğe sayısı. Varsayılan: 1 .
• sayfalar- İsteğe bağlı. Belirtilirse, öğeler ve öğelerOnPage seçenekleri yoksayılır. Listedeki sayfa sayısını ayarlar.
• görüntülenenSayfalar- Navigasyon sırasında kaç sayfa numarası görünmelidir. İzin verilen minimum değer: 3 , varsayılan: 5 .
• kenarlar- Numaralandırmanın başında ve sonunda kaç sayfa numarası görünüyor. Varsayılan değer: 2 .
• geçerli sayfa- Lansmandan hemen sonra hangi sayfa seçilecek. Mantıksal olarak, varsayılan: 1 .
• hrefTextPrefix- HREF özniteliğinde kullanılan dize, sayfa numarasından önce eklenir. Varsayılan: "# sayfa-".
• hrefTextSuffix- HREF özniteliğinde kullanılan dize, sayfa numarasından sonra eklenir. Varsayılan boş bir dizedir.
• öncekiMetin- Önceki sayfaya düğme metni. Varsayılan: "Önceki".
• sonrakiMetin- Sonraki sayfa için düğme metni. Varsayılan: "Sonraki"
• cssStyle- Belirlemek CSS stili... Varsayılan: "Işık temalı"
• SelectOnClick- Varsayılan olarak, tıkladıktan sonra bir sayfa seçme - etkin ( NS), neden devre dışı bırakacağımı anlamadım, ancak böyle bir olasılık var, değer: "yanlış".

En temel ayarları ele aldık. Ö ilave fonksiyonlar ve bu eklentiyi kullanmanın mevcut yöntemlerini, doğrudan geliştiricinin sayfasındaki belgeleri inceleyerek öğrenebilirsiniz.

Yapabileceğim tek şey, yeni projeleriniz üzerinde çalışırken size iyi şanslar ve başarılar dilemek.

ücretsiz koleksiyon HTML ve CSS sayfalandırma kod örnekleri: duyarlı, basit, malzeme tasarımı, gezinme noktaları, vesaire. Haziran 2018 koleksiyonunun güncellemesi. 5 yeni ürün.

İlgili Makaleler

kod hakkında

HTML ve CSS'de duyarlı sayfalandırma / çağrı cihazı. İlginç bir etki göstermek için tarayıcınızı yeniden boyutlandırın.

Duyarlı: evet

Bağımlılıklar: bootstrap.css

kod hakkında

Satır takip sayfalandırma

CSS satırı sayfalandırmayı takip eder.

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Sayfalandırma düğmeleri

Saf CSS sayfalandırma düğmeleri.

Uyumlu tarayıcılar: Chrome, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Vurgulu satır sayfalandırma

Vurgulu efektli saf CSS satır sayfalandırma.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Pacman sayfalandırma

HTML, CSS ve JS ile sayfalandırma animasyonu.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Basit CSS.

kod hakkında

Saf CSS Pac-Man sayfalandırma vurgulu animasyon ile.

kod hakkında

Basit duyarlı sayfalama.

kod hakkında

HTML ve CSS sayfalandırma.

kod hakkında

Farklı sayfalar arasında gezinmenizi sağlayan sayfalandırma örneği. Bu örneğin, sayfalandırma gerektiren gerçek bir uygulamayla çalışabilmesi için href niteliklerine sahip olması gerekir.

kod hakkında

CSS özel özellikleriyle sayfalandırma.

sayfalandırma seçenekler ve tasarımlar.
MojoM tarafından yapılmıştır
25 Mayıs 2017

Demo GIF: SVG Sayfa Haznesi

HTML, CSS ve SVG sayfa hunisi.
Chris gannon tarafından yapılmıştır.
14 Mayıs 2017

Demo GIF: Sonsuz Sayfalandırma

HTML ve CSS'de sonsuz sayfalama.
Mariusz Dabrowski tarafından yapılmıştır.
27 Nisan 2017

kod hakkında

CSS Bileşenleri:.

HTML ve CSS ile web sitesi sayfalandırma için 12 fikir.
rosa tarafından yapılmıştır
3 Kasım 2016

Demo GIF: Sayfalandırma

HTML / CSS / JavaScript ile sayfalama.
JP Nothard tarafından yapılmıştır.
9 Ekim 2016

Demo GIF: Sayfalandırma Vurgulu Animasyon

HTML ve CSS sayfalandırma vurgulu animasyon.
Elena Nazarova tarafından yapılmıştır.
12 Eylül 2016

Vurgulu efektli sayfalama.
Andre Wichert tarafından yapılmıştır.
27 Ağustos 2016

HTML, CSS ve JavaScript ile sayfalandırma göstergeleri.
Musa Holmström tarafından yapılmıştır.
19 Ağustos 2016

Brendan Mullins tarafından yapılmıştır.
16 Ağustos 2016

Duyarlı Sihirli Satır Sayfalandırması

Sayfalandırmanız için sihirli bir çizgi oluşturun. Mükemmel görünüyor.
Ryan Yu tarafından yapılmıştır.
18 Şubat 2015

Duyarlı, erişilebilir, alternatif sayfalandırma deneyi.
Simon Goellner tarafından yapılmıştır.
11 Kasım 2014

Demo GIF: Sayfalandırma Okları

Sayfalandırma okları esneme.
Hakim El Hattab tarafından yapılmıştır.
18 Ekim 2013

Siteler genellikle birkaç sayfa içerir. Örneğin, açılış sayfasında 3-5 sayfa ve belki daha fazlasını içerebilirler.

Her iyi site, kullanıcının sitenin sayfaları arasında doğru şekilde gezinmesini ve gezinmesini sağlayacak navigasyon içermelidir. Ne zaman böyle bir sayfalandırma oluşturabilirsiniz: JavaScript yardımı... Bu yazıda, bu tür bir navigasyonun nasıl oluşturulacağından bahsedeceğiz.

Örnekte, normal JavaScript'in yanı sıra Bootstrap 4 kullanılmaktadır. Önyükleme sayfalandırma bileşeni, jQuery kitaplığı, yani özel Buzina Pagination eklentisi ile birleştirilmiştir. Aralarında gezinme oluşturarak tüm bilgileri birkaç sayfaya ayırmanıza olanak tanır.

Gerekli çerçeveleri bağlama

Bootstrap ve JQuery ile çalışmak için onları bağlamanız gerekir. Bu senin içinde yapılabilir HTML belgesi etiketleri kullanma