보기에서 더 많은 링크를 클릭 할 때 Ajax로 더 많은 컨텐츠로드

사용자 정의 블록보기가 있습니다. 마지막 5 개의 노드 제목을 표시합니다. 누군가가 더 많은 링크를 클릭하면 현재 5 노드 제목 아래에 다음 5 개의 제목을로드하려고합니다. 페이지 새로 고침이없고 호출기가 아닙니다. 이게 가능해? 어떻게하면 되나요?

드루팔 세계의 여러 사람들이 해결하려고했던 문제 중 하나입니다.

나는 최근에이 똑같은 문제와 드루팔로 그것을 달성하는 방법에 대해 발표했다. 슬프게도 나는 세계 어느 곳에서나 볼 수있는 곳 어디에서나 내 슬라이드를 게시하지 않았습니다.

모듈 분석은 다음과 같습니다.

무한 스크롤보기

• Views Ajax 지원과 함께 작동하지 않습니다-자체 Ajax 요청을 만들기 위해 해킹합니다.
• 전체 페이지 요청을합니다. 이는 Views Ajax 요청을 사용하지 않기 때문입니다.
• Views 3.x 필요-페이저가 3.x에서 플러그 가능하기 때문에 플러스입니다.

무한 페이저보기

• Support Views 2.x-호출기가 플러그 인 가능하지 않기 때문에 이것은 실제로 좋지 않습니다.
• 2.x에서 작동하기 때문에 실제로 페이저 테마, 일반 뷰 아약스 및 전처리 동작을 해킹합니다. 따라서 일부 기능이 중단됩니다.

마지막으로이 질문에 비추어 추가 한 새로운 프로젝트가 있습니다. 프로젝트의 이유는 위에서 언급 한 문제를 제외하고는 더 많은로드를 지원하는 뷰가 필요하다는 것입니다.

조회수 더보기

• Views 3.x 필요-이것은 의도 된 것입니다.
• 오프셋, 페이지 수와 같은 일반 호출기 옵션보기 지원
• 뷰 아약스 기능을 완벽하게 지원
  • 보기에서 Ajax가 사용 가능한 경우로드하면 목록 맨 아래에 컨텐츠가 추가됩니다.
  • ajax가 비활성화되면 페이지가 새로 고쳐지고 이전 내용이 새 내용으로 바뀝니다.
  • Ajax 콜백을 수행 할 때 전체 페이지 요청을 수행하지 않고 뷰가 자연스러운 콜백을 수행하고 추가 된 내용을 바꾸는 대신 볼 수 있습니다.
• 웨이 포인트 모듈을 사용하는 경우 사용자가 페이지 맨 아래로 스크롤 할 때 새 컨텐츠를 자동으로 가져 오도록보기를 구성 할 수 있습니다.
• JQuery 효과를 지원합니다 (현재는 곧 페이드 효과 만 지원됩니다).

이것이 귀하의 질문에 대답하기를 바랍니다. 이것은 모든 견해에 대한 나의 "편견없는";-) 의견으로 더 많은 모듈을로드합니다.

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 단계

테마의 .info 파일에 JavaScript 파일을 추가하십시오.

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 에 설명 된 방법 중 하나를 사용하십시오 .

첫 번째 답변에 의견을 추가 할 수 없습니다. 그러나 새 모듈을 추가해야합니다 : https://www.drupal.org/project/gd_infinite_scroll 이 모듈을 사용하면 모든 내용과 호출기를 무한 스크롤이나 더 많은 호출기로 변환 할 수 있습니다.

모듈 페이지에서 :

호출기를 사용하여 사용자 정의 페이지에서 무한 스크롤 jQuery 플러그인 : 자동 호출기를 사용하도록 관리 기능을 제공하십시오. 스크롤 할 때 자동로드를 사용하거나 추가로드 단추를 사용할 수 있습니다.