README

Das Ajaxpagination Bundle bietet ihnen die Möglichkeit die Paginierung ihrer Seite via Ajax-Request zu implementieren. Dafür müssen Sie die entsprechenden Templates mit einem Hilfscontainer versehen. Die Erweiterung kommt bereits mit einer Anzahl an Templates, die direkt verwendet werden können.

The Ajaxpagination Bundle offers you the possibility to implement the pagination of your page via Ajax-Request. To do this, you have to provide the appropriate templates with an auxiliary container. The extension already comes with a number of templates which can be used directly.

模板结构

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <div data-pagination="page_x<?= $this->id ?>">
    <?= $this->data ?>
    <?= $this->pagination ?>
  </div>

<?php $this->endblock(); ?>

带有辅助容器的模板 / 模板与辅助容器

包含的模板

(覆盖相应的核心模板)

cal_default
cal_mini
ce_comments
ce_gallery
mod_eventlist
mod_newslist
mod_search

为 Ajaxpagination 添加自定义/新扩展

分页链接必须位于具有 (部分) 类 pagination 的 NAV 容器中。
要分页的内容以及分页本身必须位于一个辅助容器中。

<div data-pagination="...">
    ...
</div>

该辅助容器需要一个唯一的标识符。这里建议使用前缀的元素 ID，例如 page_xyz<?php echo $this->id; ?>（在组件中，使用从分页链接中提取的参数名模式）。

安装

通过 composer 安装扩展: trilobit-gmbh/contao-ajaxpagination-bundle。
为了完成安装，请进入 主题 > 页面布局 下的 jQuery 加载，并激活选项 j_ajax-pagination。

配置

工作模式

在模板中，可以在周围容器中额外切换工作模式（从 "替换" 到 "附加"）。

<div data-pagination="..." data-pagination-type="add">
    ...
</div>

没有 data-pagination-type="add" 属性，分页将像以前一样工作。

不透明度

在模板中，可以在周围容器中额外定义透明度（在重新加载时设置）。

<div data-pagination="..." data-pagination-opacity=".25">
    ...
</div>

没有 data-pagination-opacity=".25" 属性，分页将像以前一样工作。

自动滚动

此外，现在可以在周围容器中额外定义标准分页设置的自动滚动到分页容器开头。

通过 data-pagination-scroll="slow" 属性激活自动滚动并设置滚动速度。

通过 data-pagination-scroll-offset="-25" 属性可以定义偏移量。

<div data-pagination="..." data-pagination-scroll="slow" data-pagination-scroll-offset="-25">
    ...
</div>

没有相应的 data-pagination-scroll="slow" 或 data-pagination-scroll-offset="-25" 属性，分页将像以前一样工作。

事件

在翻页时将触发以下事件

hide.pagination.container
show.pagination.container

例如，可以使用这些事件进行自定义自动滚动（与实现的自定义滚动不同）。

Bspl.

jQuery('[data-pagination]')
    .on('hide.pagination.container', function (event) {
        let $target = jQuery(event.relatedTarget[0]);

        $target.addClass('in-progress');
    })
    .on('show.pagination.container', function (event) {
        let $target = jQuery(event.relatedTarget[0]);
        let offsetStatic = 10;
        let offsetDynamic = jQuery('#header').outerHeight();

        jQuery('html, body')
            .animate({
                scrollTop: $target.offset().top - offsetStatic - offsetDynamic
            }, 'slow');

        $target.removeClass('in-progress');
    });

兼容性

Contao 版本 ~4.9
Contao 版本 ~4.13

trilobit-gmbh / contao-ajaxpagination-bundle

维护者

详细信息