当前位置: 首页>>技术教程>>正文


在视图中单击更多链接时,使用ajax加载更多内容

webfans 技术教程 , , , 去评论

问题描述

我有一个自定义块视图。我显示最后5个节点标题。如果有人点击了我想要加载当前5个节点标题下的下5个标题的更多链接。没有页面刷新而不是寻呼机。这可能吗?我该怎么做呢?

最佳解决办法

所以这是drupal世界中多个人试图解决的问题之一。

我最近就这个完全相同的问题进行了演示,以及如何使用drupal完成它。可悲的是,我从未在世界其他地方可以看到的任何地方张贴任何幻灯片。

这是模块的细分:

Views Infinite Scroll

  • 不能使用视图Ajax支持 – 它围绕它来制作自己的ajax请求

  • 发出完整页面请求 – 这是因为它不使用Views Ajax请求

  • 需要视图3.x – 这是一个加号,因为寻呼机是3.x中的plug-able

Views Infinite Pager

  • 支持视图2.x – 这真的不是一件好事,因为寻呼机不是plug-able

  • 因为它与2.x一起工作,所以它真正地破解了寻呼机主题,常规视图ajax和预处理行为。所以它打破了一些功能。

最后但并非最不重要的是我刚刚根据这个问题添加的新项目。该项目的原因是我需要除了上面提到的问题之外还需要支持更多负载的视图,我们的项目是不可接受的。

Views load More

  • 需要视图3.x – 这是故意的。

  • 支持查看常规寻呼机选项,例如偏移,页数

  • 完全支持视图ajax功能

    • 如果在视图上启用了Ajax,则加载更多内容会将内容添加到列表的底部

    • 如果禁用ajax,页面将刷新并用新内容替换旧内容

    • 它在执行ajax回调时不执行完整页面请求,它允许视图执行自然回调,而不是替换它附加到它的内容。

  • 如果您正在使用waypoint模块,则可以将视图配置为在用户滚动到页面底部时自动获取新内容。

  • 支持JQuery效果(现在只支持淡入淡出效果,很快就会出现)。

希望这能回答你的问题。这是我的”unbiased” ;-)对所有视图加载更多模块的意见。

次佳解决办法

在Drupal中使用https://github.com/paulirish/infinite-scroll的另一种方法是Transform any Drupal pager into an autopager – infinite scroll pager – load more pager

Step 1

Download jquery.infinitescroll.min.js from https://github.com/paulirish/infinite-scroll and put it in /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Step 2

Add the JavaScript file to the .info file of your theme.

Step 3

Make a custom JavaScript file /sites/all/themes/YOURTHEME/js/YOURTHEME.js containing the following code.

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

Step 4

Add the CSS of the infinite scroll loader

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

Step 5

Make sure jquery version is newer than 1.7.1. Use one of the methods described in http://drupal.org/node/1058168 for installing a newer version of jQuery in Drupal.

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2022.html,转载请务必附带本地址声明。