web-gelistirme-sc.com

Bir görünümde daha fazla bağlantıyı tıklarken ajax ile daha fazla içerik yükleyin

Özel bir blok görünümüm var. Son 5 düğüm başlığını görüntülüyorum. Birisi daha fazla bağlantıyı tıklatırsa, sonraki 5 başlığı geçerli 5 düğüm başlığının altına yüklemek istiyorum. Sayfa yenileme yok ve çağrı cihazı değil. Mümkün mü? Bunu nasıl yapabilirim?

15
Lucy

Bu, drupal dünyasında birden çok insanın çözmeye çalıştığı sorunlardan biridir.

Geçenlerde aynı konuda ve drupal ile nasıl başaracağına dair bir sunum yaptım. Ne yazık ki, dünyanın geri kalanının görebileceği hiçbir yerde slaytlarımı hiç yayınlamadım.

Modüllerin Dağılımı:

Görüntüleme Sonsuz Kaydırma

  • Views Ajax desteği ile çalışmaz - Kendi ajax isteği yapmak için etrafında kesmek
  • Tam sayfa isteği yapar - Bunun nedeni Views Ajax isteğini kullanmamasıdır
  • Görüntüleme 3.x gerektirir - Çağrı cihazı 3.x'te takılabilir olduğundan bu bir artıdır

Sonsuz Çağrı Görüntüleyicisi

  • Destek Görünümleri 2.x - Bu gerçekten iyi bir şey değil, çünkü çağrı cihazı takılabilir değil
  • 2.x ile çalıştığından, çağrı cihazı teması, normal görünümler ajax ve önişleme davranışı etrafında gerçekten hacklenir. Yani bazı işlevleri bozar.

Son olarak, bu sorunun ışığında yeni eklediğim yeni bir proje. Projenin nedeni, yukarıda belirtilen hususlar dışında yükü daha fazla destekleyen görüşlere ihtiyaç duymamdır. Projem için kabul edilemez.

Görüntüleme yükü Daha fazla

  • Görüntüleme gerektirir 3.x - Bu bilerek yapılmıştır.
  • Destek, ofsetler, sayfa sayısı gibi normal çağrı seçeneklerini görüntüler
  • Tam görünümlerini ajax özelliğini destekler
    • Görünümde Ajax etkinse, daha fazla yükleme listenin altına içerik ekler
    • Ajax devre dışı bırakılırsa sayfa yenilenir ve eski içeriği yeni içerikle değiştirir
    • Ajax geri arama yaparken tam sayfa isteği yapmaz, görünümlerin doğal geri arama yapmasına ve ona eklediği içeriği değiştirmesine izin verir.
  • yol noktası modülünü kullanıyorsanız, kullanıcı sayfanın altına geldiğinde görünüm otomatik olarak yeni içerik alacak şekilde yapılandırılabilir.
  • JQuery efektlerini destekler (şu anda sadece solma efekti desteklenmektedir, daha yakında).

Umarım bu soruya cevap verir. Bu tüm görüşler daha fazla modül yük benim "tarafsız" ;-) görüş.

26
ericduran

Başka bir yöntem https://github.com/paulirish/infinite-scroll içinde Drupal herhangi bir Drupal) otomatik çağrı cihazına çağrı cihazı - sonsuz kaydırma çağrı cihazı - daha fazla çağrı cihazı yükleyin .

Aşama 1

https://github.com/paulirish/infinite-scroll adresinden jquery.infinitescroll.min.js dosyasını indirin ve /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min içine koyun. js.

Adım 2

JavaScript dosyasını temanızın .info dosyasına ekleyin.

Aşama 3

Aşağıdaki kodu içeren özel bir JavaScript dosyası /sites/all/themes/YOURTHEME/js/YOURTHEME.js oluşturun.

/**
 * Implementation of autopager @see https://github.com/paulirish/infinite-scroll
 * All views that have the "autopager" class will have an autopager
 */
Drupal.behaviors.viewsInfiniteScroll = function(context) {
  $(function(){
    var $container = $('div.autopager div.view-content');    
    $container.imagesLoaded( function(){
      $container.infinitescroll({
        navSelector  : 'div.autopager .pager',    // selector for the paged navigation
        nextSelector : 'div.autopager .pager-next a',  // selector for the NEXT link (to page 2)
        itemSelector : 'div.autopager .views-row',     // selector for all items you'll retrieve
        loading: {
          finishedMsg: 'No more pages to load.',
          img: '/sites/all/themes/YOURTHEME/images/loading.gif'
        }
      })
    })
  });
}

4. Adım

Sonsuz kaydırma yükleyicinin CSS'sini ekleyin

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 300px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Adım 5

Jquery sürümünün 1.7.1'den daha yeni olduğundan emin olun. Drupal'a jQuery'nin daha yeni bir sürümünü yüklemek için http://drupal.org/node/1058168 bölümünde açıklanan yöntemlerden birini kullanın.

2
Hans Rossel

İlk cevaba yorum ekleyemiyorum. Ancak yeni modülü eklemelisiniz: https://www.drupal.org/project/Gd_infinite_scroll Bu modül, herhangi bir içeriği ve çağrı cihazını sonsuz bir kaydırmaya veya daha fazla çağrı cihazına dönüştürmenize izin verir.

Modül sayfasından:

Sınırlayıcı kaydırma jQuery eklentisini kullanmak için bir yönetim sağlayın: çağrı cihazı kullanarak özel sayfalarda otomatik çağrı cihazı. Kaydırma sırasında otomatik yükleme veya daha fazla yükleme düğmesi kullanabilirsiniz.

1
vincent