Tải thêm nội dung với ajax khi nhấp vào liên kết nhiều hơn trong chế độ xem

Tôi có một chế độ xem khối tùy chỉnh. Tôi hiển thị 5 tiêu đề nút cuối cùng. Nếu ai đó nhấp vào liên kết nhiều hơn, tôi muốn tải 5 tiêu đề tiếp theo bên dưới 5 tiêu đề nút hiện tại. Không làm mới trang và không nhắn tin. Điều này có thể không? Tôi sẽ đi đâu để tới đó?

Vì vậy, đây là một trong những vấn đề mà nhiều người trong thế giới drupal đã cố gắng giải quyết.

Gần đây tôi đã trình bày về vấn đề chính xác này và làm thế nào để thực hiện nó với drupal. Đáng buồn thay, tôi không bao giờ đăng bất kỳ slide nào của tôi lên bất cứ nơi nào mà phần còn lại của thế giới có thể nhìn thấy.

Dưới đây là phân tích mô-đun:

Lượt xem cuộn vô hạn

• Không hoạt động với hỗ trợ Lượt xem Ajax - Việc hack xung quanh nó để thực hiện là yêu cầu ajax của riêng
• Tạo một yêu cầu toàn trang - Điều này là do nó không sử dụng yêu cầu Lượt xem Ajax
• Yêu cầu Lượt xem 3.x - Đây là một điểm cộng, vì máy nhắn tin có khả năng cắm trong 3.x

Lượt xem máy nhắn tin vô hạn

• Hỗ trợ lượt xem 2.x - Đây thực sự không phải là một điều tốt, bởi vì máy nhắn tin không có khả năng cắm
• Bởi vì nó hoạt động với 2.x, nó thực sự hack xung quanh chủ đề máy nhắn tin, chế độ xem thường xuyên ajax và hành vi tiền xử lý. Vì vậy, nó phá vỡ một số chức năng.

Và cuối cùng nhưng không kém phần quan trọng là một dự án mới mà tôi vừa thêm vào câu hỏi này. Lý do cho dự án là nhu cầu của tôi cũng cần các khung nhìn hỗ trợ tải nhiều hơn ngoại trừ các vấn đề được đề cập ở trên chúng tôi không chấp nhận được đối với dự án của tôi.

Lượt xem tải thêm

• Yêu cầu Lượt xem 3.x - Đây là mục đích.
• Hỗ trợ xem các tùy chọn máy nhắn tin thông thường, chẳng hạn như offset, số trang
• Hỗ trợ đầy đủ tính năng xem ajax
  • Nếu Ajax được bật trên khung nhìn, tải thêm sẽ thêm nội dung vào cuối danh sách
  • Nếu ajax bị vô hiệu hóa, trang sẽ làm mới và thay thế nội dung cũ bằng nội dung mới
  • Nó không thực hiện một yêu cầu toàn trang khi thực hiện gọi lại ajax, nó cho phép các lượt xem thực hiện là gọi lại tự nhiên và thay vì thay thế nội dung mà nó gắn vào nó.
• Nếu bạn đang sử dụng mô-đun điểm , chế độ xem có thể được định cấu hình để tự động nhận nội dung mới khi người dùng cuộn xuống cuối trang.
• Hỗ trợ các hiệu ứng JQuery (ngay bây giờ chỉ hỗ trợ hiệu ứng mờ dần, sẽ sớm ra mắt).

Hy vọng điều này trả lời câu hỏi của bạn. Đây là ý kiến ​​"không thiên vị" ;-) của tôi về tất cả các chế độ xem tải thêm mô-đun.

Một phương pháp khác sử dụng https://github.com/paulirish/infinite-scroll trong Drupal là Chuyển đổi bất kỳ máy nhắn tin Drupal nào thành máy nhắn tin tự động - máy nhắn tin cuộn vô hạn - tải thêm máy nhắn tin .

Bước 1

Tải xuống jquery.infinitescroll.min.js từ https://github.com/paulirish/infinite-scroll và đặt nó vào /sites/all/theme/YOURTHEME/js/jquery.infinitescroll.min.js.

Bước 2

Thêm tệp JavaScript vào tệp .info của chủ đề của bạn.

Bước 3

Tạo một tệp JavaScript tùy chỉnh /sites/all/theme/YOURTHEME/js/YOURTHEME.js chứa mã sau đây.

/**
 * 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'
        }
      })
    })
  });
}

Bước 4

Thêm CSS của trình tải cuộn vô hạn

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

Bước 5

Đảm bảo phiên bản jquery mới hơn 1.7.1. Sử dụng một trong các phương thức được mô tả trong http://drupal.org/node/1058168 để cài đặt phiên bản jQuery mới hơn trong Drupal.

Tôi không thể thêm một bình luận về câu trả lời đầu tiên. Nhưng bạn nên thêm mô-đun mới: https://www.drupal.org/project/gd_infinite_scroll Mô-đun này cho phép bạn chuyển đổi bất kỳ nội dung và máy nhắn tin nào thành cuộn vô hạn hoặc tải thêm máy nhắn tin.

Từ trang của mô-đun:

Cung cấp quản trị để sử dụng plugin jQuery cuộn vô hạn: tự động nhắn tin trên các trang tùy chỉnh bằng cách sử dụng máy nhắn tin. Bạn có thể sử dụng tự động tải khi cuộn hoặc nút tải thêm.