Question

相当简单的概念。我有一个分页数据源，它以15块为单位将内容提供给砌体墙。我想坚持一个“加载更多”的内容。那边的按钮。

我是否需要加载整个DS并消除分页，然后用jQ掩盖它？听起来好像会变得迟钝？

如何连接此功能？如果要求，只提供XML输出？我曾尝试过简单地从砌体文档中获取一个现有的附加按钮，但我的代码使它成为页面链接＆＃34; NaN＆＃34; ...我并没有真正混淆XSL和jQuery太多。不知道从哪里开始..下面是我的按钮代码。

            <a href="{$root}/?page={/homepage-aritcles/pagination/@current-page + 1}">  <button id="append-button">++++ LOAD MORE POSTS ++++</button>   </a>

这里是相对的js：

function getItemElement() {
  var elem = document.createElement('div');

  elem.className = 'item ' ;
    return elem;
}

$(function(){

      var $container = $('.post.content'),
          $boxes = $container.find('.item'),
          firstTime = true;

      $(window).smartresize(function(){

        var containerWidth = $container.width(),
            colWidth = Math.floor( containerWidth / 3 ),
            applyStyleFnName = firstTime ? 'css' : 'animate';


        $boxes.each(function(){
          var $this = $(this),
              cols = $this.data('cols'),
              boxWidth = Math.floor( colWidth * cols );

          $this[ 'css' ]({ width: boxWidth }, { queue: false });
        });


  $('#append-button').on( 'click', function() {
    var elems = [ getItemElement() ];
    $container.append( elems ).masonry( 'appended', elems );
  });

Answer 1

您可以通过设置＆＃34;开始于页面＆＃34;来请求数据源的第二页结果。参数变量。

所以，正如你已经写过＆＃34; /？page =＆＃34;对于您的锚点，您可以设置数据源＆＃34;从页面开始＆＃34;到＆＃34; {$ url-page}＆＃34;。这可以在Symphony UI中完成，也可以通过编辑数据源PHP文件来完成。

然后，您可以使用jQuery的ajax请求加载此页面。

所有GET参数都可以在Symphony页面中作为以＆＃34; url - ＆＃34;开头的变量访问。

这是一个基本示例，您希望针对诸如加载状态和检测是否没有要加载的页面等内容进行扩展。

按钮XSL（确保它在ajax页面容器之外）：

<a class="js-loadmore" data-current-page="{pagination/@current-page}" href="/?page={pagination/@current-page + 1}">Load More</a>

第1页加价：

<div class="ajax-page">
  <p>I'm on page 1<p>
</div>

第2页加价：

<div class="ajax-page">
  <p>I'm on page 2</p>
</div>

JS：

$('.js-loadmore').click(function(e) {
  e.preventDefault();
  var $btn = $(this),
      page = $btn.data('current-page') + 1,
      $dest = $('.ajax-page');

  $.ajax({
    url: '/?page=' + page,
    success: function(data) {

      // Find elements inside the container on the 2nd page and put them in the first page
      $(data).find('.ajax-page').children().appendTo($dest);

      // Update counter so subsequent clicks loads the next page
      $btn.data('current-page', page);

    }
  });

});

点击后......

<div class="ajax-page">
  <p>I'm on page 1<p>
  <p>I'm on page 2<p>
</div>

使用XSLT加载更多内容？

1 个答案: