sgalinski/df-contentslide

动态或静态加载的内容元素的折叠和展开。

安装: 36

依赖项: 0

建议者: 0

安全: 0

类型:typo3-cms-extension

7.1.1 2021-08-19 08:39 UTC

This package is auto-updated.

Last update: 2024-09-19 18:42:20 UTC


README

许可证:GNU GPL,版本2

仓库:https://gitlab.sgalinski.de/typo3/df_contentslide

请在此处报告错误:https://gitlab.sgalinski.de/typo3/df_contentslide

TYPO3版本:>7.6

关于

此扩展允许您通过在后台的每个内容元素中添加新的配置选项来使内容可折叠。

安装

  1. 使用扩展管理器安装扩展

  2. 在您的根模板中包含df_contentslide的TypoScript

使用方法

现在您可以通过编辑内容元素来在TYPO3后端启用新的内容滑动选项

  • 外观选项卡中的展开/折叠内容部分启用复选框
  • 现在您有额外的内容滑动选项可供使用

    使用AJAX(只加载文本)

    如果元素本身产生大量流量,例如很多图像,或者您只想隐藏搜索机器人可见的文本,则此选项可能很有用。

    初始展开

    如果选中,内容将默认可见,否则将折叠。

    选择布局

    默认情况下,只实现了一个布局,但此选项允许用户创建自己的自定义布局。

    选择动画

    允许用户更改滑动动画(向下、向上或淡入淡出)

开发者指南

创建自定义动画

此扩展提供了一个小的API,您可以在自己的脚本中使用它来折叠和展开所有或特定的元素。因此,以下函数可以通过名为ContentSlideManager.instance的JavaScript对象调用:

addSlides(_slides)

将幻灯片添加到ContentSlideManager。

collapseAll()

折叠所有管理的幻灯片。

expandAll()

展开所有管理的幻灯片。

getAllSlides()

获取所有可用的幻灯片对象。

getSlide(_hash)

获取与_hash相关联的内容滑动对象。每个折叠链接都分配了一个唯一的hash

<div class="dfcontentslide-toggle">
		<h2 class="h2">
			<a href="/page/HASH">Expand/Collapse</a>
		</h2>
</div>

创建自定义布局和样式

您可以通过在TCA 配置/TCA/Overrides/tt_content.php中的tx_df_contentslide_layout元素中添加项目来添加新的布局。

'items' => array(
	...
	array(
		'LLL:EXT:df_contentslide/Resources/Private/Languages/locallang_db.xlf:tt_content.tx_df_contentslide_layout.newLayout',
		'newLayout'
	),
	

现在您可以通过创建一个名为dfcontentslide-newLayout的新类,在Resources/Public/Stylesheets/df_contentslide.css中为新布局添加样式。该类应用于内容的包装div元素

<div class="dfcontentslide-wrap dfcontentslide-newLayout default-content-element" data-dfcontentslide-animation="slideDownwards">
	<div class="dfcontentslide-toggle">
			<h2 class="h2">
				<a href="/page/hash">Expand/Collapse</a>
			</h2>
	</div>
	<div class="dfcontentslide-content dfcontentslide-transition-slide-downwards">
		<div class="dfcontentslide-contentSub">
			<div id="c1517" class="default-content-element">
				<!-- Here is the wrapped content element -->
			</div>
		</div>
	</div>
</div>