README

轻量级 Yii2 手风琴小部件

动机

在我看来，标准的 Yii2 JUI 手风琴小部件 存在一些问题。

• 必须将部分标题和内容作为选项提供给小部件，这很繁琐。
• 它生成具有固定类引用的 HTML，引入了新的并且可能是不期望的样式。
• 它过于强大，依赖于完整的 jQuery UI 库。

Bandoneon 是 JUI 手风琴的轻量级、多功能的替代小部件。JavaScript 尺寸小于 1400 字节。它没有任何依赖，因此可以在没有 jQuery 的页面上使用。

在此 处 可以看到 Bandoneon 小部件的一些演示。

安装

安装 Bandoneon 的首选方式是通过 Composer。可以将以下内容添加到您的 composer.json 文件的 require 部分

"sjaakp/yii2-bandoneon": "*"

或者运行

composer require sjaakp/yii2-bandoneon "*"

您可以通过 下载 ZIP 格式的源代码 来手动安装 Bandoneon。

用法

使用 Bandoneon，将部分包含在 Bandoneon::begin() 和 Bandoneon::end() 调用之间的直通 HTML 中，如下所示

<?php use sjaakp\bandoneon\Bandoneon; ?>

<?php Bandoneon::begin() ?>

    <h4>Heading 1</h4>
    <div>Lorem ipsum ... felis ultricies.</div>

    <h4>Heading 2</h4>
    <div>Pellentesque aliquet ... placerat tincidunt.</div>

		...
    
    <h4>Heading n</h4>
    <div>Curabitur sit ... gravida nec turpis.</div>

<?php Bandoneon::end() ?>

您可以使用任何合理的 HTML 标签作为标题和部分。例如，这也同样有效

<?php use sjaakp\bandoneon\Bandoneon; ?>

<?php Bandoneon::begin() ?>

    <p>Heading 1</p>
    <p>Lorem ipsum ... felis ultricies.</p>

    <p>Heading 2</p>
    <p>Pellentesque aliquet ... placerat tincidunt.</p>

		...
    
    <p>Heading n</p>
    <p>Curabitur sit ... gravida nec turpis.</p>

<?php Bandoneon::end() ?>

Bandoneon 对标题和部分的 HTML 不做任何假设。它使用 CSS 选择器来区分奇数和偶数元素。部分和标题中的 HTML 可以尽可能复杂。

初始打开

如果您想使部分最初是打开的，只需将其标题添加到 "open" 类中即可，如下所示

    ...
	<h4 class="open">Heading 2</h4>
    <div>This section will be initially open...</div>
	...

周围元素

默认情况下，Bandoneon 创建一个 <div> 作为周围元素。您可以通过设置 Bandoneon::begin() 中的 'tag' 选项来修改此选项。

如果要根据 HTML 定义列表 <dl> 创建 Bandoneon，这可能很有用

<?php use sjaakp\bandoneon\Bandoneon; ?>

<?php Bandoneon::begin([
		'tag' => 'dl'
	]) ?>

    <dt>Heading 1</dt>
    <dd>Lorem ipsum ... felis ultricies.</dd>

    <dt>Heading 2</dt>
    <dd>Pellentesque aliquet ... placerat tincidunt.</dd>

		...
    
    <dt>Heading n</dt>
    <dd>Curabitur sit ... gravida nec turpis.</dd>

<?php Bandoneon::end() ?>

选项

Bandoneon 有两个客户端选项

• speed：部分打开和关闭的速度，以每秒像素为单位。默认值：200。
• timing：动画的计时函数。有关 Mozilla 开发者网络 的更多信息。默认值：ease-in-out。

一个非常缓慢的 Bandoneon 可能会被编码如下

<?php use sjaakp\bandoneon\Bandoneon; ?>

<?php Bandoneon::begin([
		'clientOptions' => [
	        'speed' => 12,
		]
	]) ?>

    <h4>Heading 1</h4>
    <div>Lorem ipsum ... felis ultricies.</div>

	...

构建 bandoneon.js

请确保已安装 npm 。

运行 npm install。

运行 rollup -c。