Uyarlanabilir sayfalama. Bootstrap - Sayfalandırma (sayfalandırma için gezinme bloğu). Gezinme bloğunu yeniden boyutlandırma

Sayfalandırma veya popprost ise sayfa navigasyonu, az çok eksiksiz bir web sitesinin önemli bir unsurudur. Çeşitli içerik yönetim sistemlerinin çoğu, sayfalandırmayı uygulamaya yönelik yerleşik araçlara sahiptir. Bu yararlı görev için yazılmış birçok ayrı eklenti de vardır; çoğu durumda bunlar . Tüm bu eklentiler hem yürütme stili hem de uygulama açısından farklıdır. işlevsellik, ancak asıl önemli olan, sitelerin hacimli içeriğini sayfalara bölmenin sunucu tarafı uygulamasına mükemmel bir alternatif olmalarıdır.

Bence en kolaylarından birini değerlendirmeye teklif ediyorum jQuery eklentileri, oluşturmak için sayfada gezinme, düzenlemenize, çekici ve hızlı sayfalandırmanıza yardımcı olacaktır.

Hem ağırlık hem de bağlantı ve ayarlar açısından her bakımdan çok hafif, sayfalandırma oluşturmada hızlı, üç tasarım stiliyle donatılmış ve destekle dolu.

Bu arada eğer memnun değilseniz standart stiller eklentinin .css dosyasına eklenmesi zor olmayacak olan eklentiyi kullanabilirsiniz.

Şimdi eklentinin kendisini ve stil dosyasını belgeye nasıl doğru şekilde bağlayacağımıza, yani doğrudan sitenin sayfalarına nasıl uygulayacağımıza ve eklentinin mevcut ayarlarından nasıl geçeceğimize daha yakından bakalım.

Başlamak için elbette, jquery javascript'in kendisinin ve css stil dosyasının dikkatlice paketlendiği kaynaklara sahip bir eklentiye ihtiyacınız var.

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

Sayfanın gövdesindeki ... bölümünde, jQuery çerçevesini, tercihen 1.7.2 sürümünü veya daha yenisini bağlamanız gerekir; bu, özel bir Google deposu kullanılarak yapılabilir:

Eğer web sitenizde jQuery zaten açık ve tam hızda çalışıyorsa, yukarıda açıklanan tüm hareketleri güvenle atlayabilirsiniz, asıl önemli olan jQuery sürümünün çok yoğun olmadığından emin olmaktır. Bu arada, WordPress'te bu sorun değil.
Daha sonra bağlantımızı yapıyoruz beygir- jquery.simplePagination.js eklentisi:

Bu konuda endişelenmenize gerek yok, sadece ihtiyacınız olan stili (açık, koyu veya kompakt) seçin ve şablonunuzun stilleri.css dosyasına bir dizi kural yapıştırın. Kendinizinkini kaydedin kendi stilleri veya yine bir seçenek olan Bootstrap'i kullanmak, özgünlük ve web sitesi oluşturma becerilerinin geliştirilmesi açısından daha da tercih edilir.

Sayfa gezinme panelini, yerleştirmeyi planladığınız site sayfalarında daha mantıklı ve çoğunlukla ana içeriğin alt kısmında görüntülemek için aşağıdakileri yazmalısınız:
Açık renkli bir arka plan için:

Kompakt tema:

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

Örnekte, açık renk temasının sayfalandırılması için başlatmayı kullandım #light-pagination, seçiciyi bir başkasına değiştirebilirsiniz, kompakt için #compact-pagination veya koyu stil için #dark-pagination. Bu durumda cssStyle fonksiyonundaki sınıfı değiştirmeyi unutmayın.
Yukarıda yazdığım gibi eklentinin ayarları oldukça esnektir, aşağıdaki seçenekler değiştirilebilir:

• öğeler — Sayfaları hesaplamak için kullanılacak toplam öğe sayısı. Varsayılan: 1.
• itemsOnPage — Her sayfada görüntülenecek öğe sayısı. Varsayılan: 1.
• sayfalar — İsteğe bağlı. Bir değer belirtilirse öğeler ve itemsOnPage seçenekleri yoksayılır. Listedeki sayfa sayısını ayarlar.
• displayPages — Gezinme sırasında kaç sayfa numarasının görünmesi gerektiği. İzin verilen minimum değer: 3, varsayılan: 5.
• kenarlar — Numaralandırmanın başında ve sonunda kaç sayfa numarasının görüneceği. Varsayılan değer: 2.
• currentPage — Başlatmanın hemen ardından hangi sayfanın seçileceği. Mantıksal, varsayılan değer: 1.
• hrefTextPrefix - HREF özelliğinde kullanılan dize, sayfa numarasının önüne eklenir. Varsayılan sayfa- " .
• hrefTextSuffix — HREF özelliğinde kullanılan dize, sayfa numarasından sonra eklenir. Varsayılan boş dizedir.
• prevText — Önceki sayfaya giden düğmenin metni. Varsayılan: "Önceki".
• nextText — Sonraki sayfaya giden düğmenin metni. Varsayılan: "Sonraki"
• cssStyle - CSS stilini tanımlar. Varsayılan: "ışık teması"
• selectOnClick - Tıkladıktan sonra bir sayfa seçiyorum, varsayılan olarak etkindir (doğru), neden devre dışı bırakılması gerektiğini hala anlamıyorum, ancak böyle bir seçenek, değer var: "yanlış".

En temel ayarlara baktık. HAKKINDA Ek fonksyonlar Ve mevcut yöntemler Bu eklentiyi nasıl kullanacağınızı doğrudan geliştiricinin sayfasındaki belgeleri inceleyerek öğrenebilirsiniz.

Yapabileceğim tek şey, yeni projelerinizde size iyi şanslar ve başarılar dilemek.

Web siteleri genellikle birkaç sayfadan oluşur. Örneğin bir açılış sayfasında 3-5 sayfa veya belki daha fazlasını, çok daha fazlasını içerebilirler.

Her iyi web sitesi, kullanıcının sitenin sayfaları arasında doğru bir şekilde gezinmesine ve hareket etmesine olanak sağlayacak bir navigasyon içermelidir. JavaScript kullanarak böyle bir sayfalandırma oluşturabilirsiniz. Bu yazıda böyle bir navigasyonun nasıl oluşturulacağından bahsedeceğiz.

Bir şey daha, normal JavaScript'e ek olarak örnekte Bootstrap 4 kullanılıyor. Önyükleme sayfalandırma bileşeni, JQuery kitaplığıyla, yani özel Buzina Sayfalandırma eklentisiyle birleştirildi. Tüm bilgileri, aralarında gezinme olacak şekilde birkaç sayfaya bölmenize olanak tanır.

Bootstrap ve JQuery ile çalışmak için bunları bağlamanız gerekir. Bu sizin yerinizde yapılabilir HTML belgesi, etiketleri kullanarak. 3 eşleştirilmiş etiket oluşturun; Ajax.js, bootstrap 4 ve JQuery eklentisinin kendisini bağlayacağız.

Bootstrap'i doğru bir şekilde bağlamak için etiketi de kullanmanız gerekir; href özelliğinde çerçevemize bir bağlantı belirtiyoruz. Eklentinin içerdiği stillere bir bağlantı içerecektir.

Böylece iş için gerekli olan her şeyi birbirine bağladık. Geriye kalan tek şey sayfalama oluşturmak için eklentiyi bağlamaktır - Buzina Pagination. Bunu oluşturmak için ayrıca oluşturup etiketliyoruz. "href" ve "src" niteliklerinde aynı bağlantıyı giriyoruz.

Buzina Sayfalandırma ve Bootstrap eklentileri, komut dosyalarının yanı sıra gerekli stilleri de içerir. Bunları ; etiketiyle bağlarız. Şimdi unutmayın - CSS'yi iyi anlasanız bile eklenti ayarlarını değiştirmenizi önermiyoruz. Sırf eğlence olsun diye bunları bir kod düzenleyicide açıp görüntüleyebilirsiniz, ancak önce kodun orijinal sürümünü kaydettiğinizden emin olun.

HTML belgeniz aşağıdaki kodu içermelidir:

Tüm yazılarımızda 1'in yaratılışına baktık. HTML sayfaları, aynı örnekte tek bir belge aracılığıyla aynı anda birden fazla belge oluşturacağız. Aynı zamanda bunları farklı bağlantılara yerleştirmeyeceğiz, düğmeye tıklanarak erişilebilecek. Her sayfa için ayrı blok oluşturacağız.

Örneğimizde toplam 5 sayfa oluşturuyoruz. Her biri için ayrı bir div oluşturun. Görsel gösterim için içine bir miktar metin yazabilirsiniz. İsterseniz 10, 20 ve 30 sayfalık oluşturabilirsiniz.

Onlarla çalışmak için sınıflara veya tanımlayıcılara ihtiyacınız yoktur. Önemli olan tüm bu sayfaların örnek sınıfın bulunduğu ana bloğun içinde yer almasıdır.

Birkaç işlevi bağlamanız gerekir:

Sayfalandırmayı oluşturmayı tamamladık. Sonunda ne elde ettik? Web sitenize mükemmel şekilde uyacak, iyi tasarlanmış bir navigasyona sahibiz. Birkaç öğe ekleyin ve bunu sahip olduğunuz sayfalara uyarlayabilirsiniz.

Komut dosyalarını istediğiniz gibi değiştirebilirsiniz, ancak yalnızca JavaScript konusunda iyi bilginiz varsa. Önemli olan komut dosyalarının ve eklenti stillerinin değerlerini değiştirmemek.

Bu sayfalamanın büyük bir avantajı var: kullanım kolaylığı. Kullanıcının sayfalar arasında gezinmek için ek bağlantılar yüklemesine gerek kalmayacaktır.

Üstelik kullanılan script sayısının az olması nedeniyle optimizasyon çok fazla azalmayacaktır.

Bu yazıda sayfalandırma için gezinme bloğu gibi bir web arayüzü öğesi oluşturma sürecine bakacağız. Bootstrap 3 ve 4'te bu kullanıcı arayüzü öğesi Sayfalandırma bileşeni kullanılarak uygulanır.

Sayfalandırma, verilerin sayfa sayfa görüntülenmesidir. Onlar. Bu, verilerin bir kerede değil, küçük parçalar (sayfalar) halinde çıktılandığı türde bir çıktıdır.

Bu parçalar (sayfalar) arasında gezinmek için bir gezinme bloğu kullanılır.

Bootstrap çerçevesinin Sayfalandırma bileşeni tam olarak bu arayüz öğesini oluşturmak için tasarlanmıştır; gezinme bloğu.

Bootstrap 3'te gezinme çubuğu aşağıdaki yapıya sahiptir:

• Öncesi
• 1
• 2
• 3
• Sonraki

Bu parçadaki nav öğesi bir sarmalayıcı kap görevi görür. Bu yapıda buna ancak yardımcı teknolojilerin bu HTML kodu parçasını gezinme olarak algılaması için ihtiyaç duyulur.

Ayrıca yardımcı teknolojilerin bunun ne tür bir gezinme bloğu olduğunu da açıklaması tavsiye edilir. Bu eylem aria-label özelliği kullanılarak gerçekleştirilir.

Bootstrap'te sayfalandırma için gezinme bloğu işaretlemesi kullanılarak yapılır maddeli liste. Bu bloktaki her gezinme bağlantısı, li içine sarılmış ve ul içine yerleştirilmiş bir a öğesidir.

Bootstrap'teki gezinme bloğunun görsel tasarımı, ul'a eklenmesi gereken sayfalama sınıfı kullanılarak yapılır.

Bootstrap 4'teki gezinme bloğu yapısı:

• Öncesi
• 1
• 2
• 3
• Sonraki

Bootstrap 4'te li ve a öğelerine sınıflar eklemeniz gerektiğini unutmayın. K li, sayfa öğesi sınıfıdır ve ka, sayfa bağlantısıdır. Bu sınıflar, öğeler için CSS stillerini belirler ve gezinme bloğunun doğru görüntülenmesi için gereklidir.

Örnek gezinti çubuğu bazı bağlantıların içeriği olarak simgeler kullanan sayfalandırma için:

• Birinci
• " Öncesi
• 1
• 2
• 3
• " Sonraki
• Son

Gezinti çubuğundaki bağlantıların durumunu değiştirmek, devre dışı bırakılmış ve etkin sınıflar kullanılarak yapılır. Birinci sınıf (devre dışı), etkin olmayan (tıklanamayan) bir bağlantı oluşturmak için kullanılır. Geçerli sayfayı vurgulamak (belirtmek) için ikinci sınıf ( active ) gereklidir. Aktif ve devre dışı sınıfları bağlantının kendisine değil li öğesine eklemeniz gerekir.

• Öncesi
• 1
• 2
• 3
• Sonraki

• Öncesi
• 1
• 2
• 3
• Sonraki

Engelli sınıf setleri CSS bağlantıları bildirim işaretçisi olayları: yok . Bu duyuru, bağlantının işlevselliğini devre dışı bırakmayı amaçlamaktadır. Ancak klavyeyi kullanarak buna geçişi devre dışı bırakmaz. Bu nedenle, projenizdeki bu tür bağlantıların işlevselliğini tamamen devre dışı bırakmak istiyorsanız, bunları ek olarak JavaScript kullanarak izlemeniz ve bunlara tabindex = "-1" niteliğini eklemeniz gerekir.

Bağlantı işlevini devre dışı bırakmanın başka bir yolu da a öğesini kullanmamaktır.

• Öncesi
• 1
• 2
• 3
• Sonraki

Bootstrap 3 ve 4'te, pagination-lg ve pagination-sm sınıflarını kullanarak gezinme bloğunu yeniden boyutlandırabilirsiniz. Bu, bu sınıflardan birinin sayfalama sınıfına eklenmesiyle yapılır.

Gezinmenin boyutunu artırmak gerektiğinde birinci sınıf (sayfalandırma-lg), azaltmak gerektiğinde ikinci sınıf (sayfalandırma-sm) kullanılır.

• Öncesi
• 1
• 2
• 3
• Sonraki

• Öncesi
• 1
• 2
• 3
• Sonraki

Bootstrap 3'te, sayfalandırma için gezinme çubuğu hizalaması, metin hizalama sınıfları kullanılarak yapılır.

Bootstrap 4'te, sayfalandırma için gezinme çubuğu hizalaması esnek sınıflar kullanılarak yapılır.

Çağrı Cihazı, sayfalar veya diğer site içeriği arasında basit gezinme oluşturmak için tasarlanmış bir Bootstrap 3 bileşenidir. Bu bileşen 2 düğmeden (bağlantılardan) oluşur.

Bu gezinmenin en yaygın kullanımlarından biri, ilk düğmenin sizi daha fazlasına götürmesidir. Yeni giriş sitede ve ikincisi - eskisine.

Çağrı cihazı bileşeni sözdizimi:

• Öncesi
• Sonraki

Varsayılan olarak Çağrı cihazı bileşeni düğmeleri ortalanmıştır. Ancak Bootstrap 3, bu seçeneğin yanı sıra bunları farklı kenarlara hizalamanıza da olanak tanır. Bu, birinci düğmenin önüne ve ikincinin yanına sınıf eklenerek yapılır. Önceki sınıf bağlantıyı sola, sonraki sınıf ise sağa hizalar.

• Öncesi
• Sonraki

Bir düğmenin devre dışı durumuna ayarlanması, devre dışı sınıfın buna eklenmesiyle yapılır.

• ← Önceki
• Sonraki →

Sayfada gezinme de dahil olmak üzere sayfalandırma oldukça basit bir şeydir, ancak yeni başlayanlar genellikle bunu oluşturmada ve en önemlisi nasıl çalıştığını anlamada sorun yaşarlar...

Sayfalandırmanın görevlerinden biri, tüm öğelerin değil, sınırlı sayıda örneğin $pp öğelerinden daha fazlasının eşzamanlı çıktısının alınmasıdır ve hangi belirli öğe grubunun çıktısı $pn giriş parametresine bağlıdır - bunların sayısı bu grup. Bu sayı aslında sayfa numarasıdır. Burada şöyle bir sorguya ihtiyacınız var:

`tablo` LIMIT'DEN * SEÇİN (($pn-1)*$pp),($pp)

$pn değeri 1 azaltılır, böylece örneğin $pp değeri 10'a eşit olan listenin ilk sayfası için 10'dan 19'a değil 0'dan 9'a kadar olan öğeler seçilir. sayfalar sıfırdan numaralandırılmıştır, $ değerinin 1 pn azaltılmasına istekte gerek yoktur.

Bir sonraki sorunu, yani sayfada gezinmeyi oluşturmak için, öncelikle listedeki toplam sayfa sayısını bilmeniz gerekir. Bunu yapmak için öncelikle toplam eleman sayısını sorgulayabilirsiniz. Veya doğrudan sorguda, toplam öğe sayısına göre toplam sayfa sayısını hesaplayın:

'Tablo'DAN KAT SEÇİN((COUNT(*)+($pp-1))/($pp))

Toplam sayfa sayısını $pc elde etmek için burada oldukça iyi bilinen $pc=(count+per_page-1) div per_page formülü kullanıldı, ancak tamsayı bölümü (div) yerine FLOOR işlevini kullanacak şekilde ayarlandı. MySQL'de uzun süredir desteklenen DIV operatörünü de kullanabilirsiniz.

Sayfa başına yalnızca bir öğe görüntülemeniz gerekiyorsa yukarıdaki sorgular basitleştirilebilir.

Toplam sayfa sayısı $pc elde edildikten sonra, 1 ila $pc aralığında bir sayaca sahip bir döngü kullanarak listenin tüm sayfalarına olan bağlantıları hemen görüntüleyebilirsiniz, ancak genellikle bağlantıların olduğu daha karmaşık bir gezinme kullanılır. tüm sayfalar aynı anda görüntülenmez, yalnızca geçerli sayfa numarasına bağlı olarak sınırlı bir aralıktaki sayıların bulunduğu sayfalar görüntülenir. Örneğin, banka navigasyonu olarak adlandırılan $first ve $last'ın aralık sınırlayıcı değerlerini elde etmek için formüller şunlardır:

$ilk=$pn-1-($pn-2)%$aralık; $son=$ilk+$aralık$pc) hatası(404); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $aralık=6; $ilk=$ pn-1-($pn-2)%$aralık; $son=$ilk+$aralık>