web-dev-qa-db-ja.com

ビューでさらにリンクをクリックすると、ajaxでより多くのコンテンツをロードします

カスタムブロックビューがあります。最後の5つのノードタイトルを表示します。他のリンクをクリックした場合、現在の5ノードのタイトルの下にある次の5タイトルをロードします。ページを更新せず、ポケットベルを使用しません。これは可能ですか？これを行うにはどうすればよいですか？

views6ajax
15
Lucy

したがって、これはdrupal世界の複数の人々が解決しようとした問題の1つです。

私は最近、これとまったく同じ問題とdrupalでそれを達成する方法についてプレゼンテーションを行いました。悲しいことに、私は自分のスライドを他の世界の見える場所に投稿したことはありません。

モジュールの内訳は次のとおりです。

無限スクロールを表示

  • Views Ajaxサポートでは機能しません-ハックして、独自のajaxリクエストを作成します
  • 全ページリクエストを行う-これは、Views Ajaxリクエストを使用しないためです
  • ビュー3.xが必要-ページャーは3.xでプラグイン可能であるため、これはプラスです。

Views Infinite Pager

  • Views 2.xのサポート-ページャーはプラグインできないため、これは実際には良いことではありません。
  • 2.xで動作するため、ページャーのテーマ、通常のビューのajax、および前処理の動作を実際にハッキングします。そのため、一部の機能が損なわれます。

そして最後に重要なのは、この質問に照らして追加したばかりの新しいプロジェクトです。プロジェクトの理由は、上記の問題を除いて、負荷をより多くサポートするビューも必要とするためです。このプロジェクトでは受け入れられません。

ビューはさらに読み込む

  • ビュー3.xが必要-これは意図的なものです。
  • オフセット、ページ数などのビューの通常のページャーオプションをサポート
  • ビューのajax機能を完全にサポートします
    • ビューでAjaxが有効になっている場合、さらに読み込むとリストの下部にコンテンツが追加されます
    • Ajaxが無効になっている場合、ページは更新され、古いコンテンツが新しいコンテンツに置き換えられます
    • Ajaxコールバックの実行時にページ全体のリクエストを行うのではなく、ビューが自然なコールバックを行い、追加するコンテンツを置き換えるのではなく、.
  • waypoint モジュールを使用している場合、ユーザーがページの一番下までスクロールしたときに新しいコンテンツを自動的に取得するようにビューを構成できます。
  • JQuery効果をサポートします（現在、フェード効果のみがサポートされています。

これがあなたの質問に答えることを願っています。これは私の「公平な」意見です;-)すべてのビューについての意見は、より多くのモジュールをロードします。

26
ericduran

Drupalで https://github.com/paulirish/infinite-scroll を使用する別の方法は ですDrupalページャをオートページャに変換します-無限スクロールページャ-さらにページャをロードします 。

ステップ1

https://github.com/paulirish/infinite-scroll からjquery.infinitescroll.min.jsをダウンロードして、/ sites/all/themesに配置します/YOURTHEME/js/jquery.infinitescroll.min.js。

ステップ2

JavaScriptファイルをテーマの.infoファイルに追加します。

ステップ3

次のコードを含むカスタムJavaScriptファイル/sites/all/themes/YOURTHEME/js/YOURTHEME.jsを作成します。

/**
 * 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

無限スクロールローダーのCSSを追加する

#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;
}

手順5

Jqueryのバージョンが1.7.1より新しいことを確認してください。 DrupalにjQueryの新しいバージョンをインストールするには、 http://drupal.org/node/1058168 で説明されている方法のいずれかを使用します。

2
Hans Rossel

最初の回答にはコメントを追加できません。ただし、新しいモジュールを追加する必要があります。 https://www.drupal.org/project/Gd_infinite_scroll このモジュールを使用すると、コンテンツとページャーを無限スクロールまたはページャーにロードできます。

モジュールのページから：

無限スクロールjQueryプラグインを使用するための管理を提供する：ページャーを使用するカスタムページでの自動ページャー。スクロール時にオートロードを使用するか、[もっと読み込む]ボタンを使用できます。

1
vincent