Yii2-Bandoneon (Accardion Widget)

Yii2-Bandoneon (Accardion Widget)


Installieren Demo

Bandoneon ist ein leichtes, vielseitiges JUI-Akkordeonersatz-Widget. Javascript ist weniger als 700 Bytes. Dies hängt nur von dem jQuery-Kern ab, den Sie auf Ihrer Seite trotzdem heruntergeladen haben.

Veröffentlichungszeit: Freitag, 3. Juli 2015 (vor 4 Jahren)

Erstellt von: Семенов Александр Сергеевич

Kategorie: Andere

Aktuelle Version: 1.0.2
01.03.2018 17:00:51 (vor einem Jahr)

Packagist: sjaakp/yii2-bandoneon

: https://github.com/sjaakp/yii2-bandoneon

: 587 (Pro Monat: 12)

Typ: Компонент

Bandoneon ist ein leichtes, vielseitiges JUI-Akkordeonersatz-Widget. Javascript ist weniger als 700 Bytes. W Avis nur JQuery Kern , die Sie auf jeden Fall auf der Seite heruntergeladen werden .

Bandoneon 2.0

Lightweight accordion widget for Yii2


In my opinion, there are some issues with the standard Yii2 JUI Accordion widget.

  • The heading and the content of the sections must be provided as options to the widget, which is cumbersome.
  • It generates HTML with hard wired class references, introducing new and probably unintended styling.
  • It is overkill, being dependant on the complete jQuery UI library.

Bandoneon is a lightweight, versatile replacement widget for the JUI Accordion. The Javascript is less than 1400 bytes. It has no dependencies at all, so it could be used on jQuery-less pages.

Here are some demo’s of the Bandoneon widget.


The preferred way to install Bandoneon is through Composer. Either add the following to the require section of your composer.json file:

"sjaakp/yii2-bandoneon": "*"

Or run:

composer require sjaakp/yii2-bandoneon "*"

You can manually install Bandoneon by downloading the source in ZIP-format.


Use Bandoneon by enclosing the sections in straight HTML between calls to Bandoneon::begin() and Bandoneon::end(), like so:

<?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() ?>

You can use any sensible HTML tags for the headings and the sections. For instance, this works just as well:

<?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 makes no assumptions about the HTML of the headings and the sections. It uses the CSS selectors for odd and even elements to differentiate between them. The HTML in the sections, and in the headings as well, can be as convoluted as you like.

Initially open

If you want a section to be initially open, just add the class "open" to its heading, like so:

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

Surrounding element

By default, Bandoneon creates a <div> as surrounding element. You can modify this by setting the 'tag' option in Bandoneon::begin().

This may come in handy if you want to create a Bandoneon, based on a HTML definition list <dl>:

<?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 has two client options:

  • speed: The speed of the opening and closing of a section, in pixels per second. Default: 200.
  • timing: The timing function of the animation. More information on Mozilla developers network. Default: ease-in-out.

A very slow Bandoneon might be coded like this:

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

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

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


Building bandoneon.js

Be sure that npm is installed.

Run npm install.

Run rollup -c.

Не очень понятна полезность этого решения.

Удобная реализация

Не очень полезное решение

Zeige 1-1 von 1 Eintrag.

Alle Kommentare (0)
Keine Kommentare

dev-master — 19.12.2018 18:40:49 (vor einem Jahr)

1.0.2 — 01.03.2018 17:00:51 (vor einem Jahr)

v1.0.1 — 02.08.2015 15:22:55 (vor 4 Jahren)

Стандартная установка:

Добавьте composer.json файл вашего проекта:

"sjaakp/yii2-bandoneon": "*"

Запустите обновление зависимостей

Читать про обнолвение SkeekS CMS