/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß * @copyright 2012 - 2015 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "widget_status.html" %} {% block example %}
Examples
You may use this widget to hide or collapse some html or (new in v3.3) show / open it. To bind divs to the widget, use the "data-bind" attribute in the div - tag. In this example the div is bound to the status.collapse and will be controled by it. The additional class="hide" will hide the div at startup.
{% filter trim|escape|nl2br %}{% verbatim %} {{ status.collapse('w1', 'bath.alert.info', '0', 'hide') }}
...
{% endverbatim %}{% endfilter %}
Use it with simple html, to show and hide a div:
{{ basic.flip('f1', 'bath.alert.info') }}
{{ status.collapse('w1', 'bath.alert.info', '', 'hide') }}
Every simple html-code could be collapsed ... with text and icons sample icon ...
Or use it to show and hide a popup:
{% filter trim|escape|nl2br %}{% verbatim %}
.... code for the popup
{{ status.collapse('w2', 'bath.alert.warning') }} {% endverbatim %}{% endfilter %}
{{ basic.flip('f2', 'bath.alert.warning') }}

Popup

... or a popup ...

OK
{{ status.collapse('w2', 'bath.alert.warning') }}
Or use it to show and hide collapsible sections:
{% filter trim|escape|nl2br %}{% verbatim %} {{ status.collapse('w3', 'bath.alert.error') }}

Block

Content

{% endverbatim %}{% endfilter %}
{{ basic.flip('f3', 'bath.alert.error') }}
{{ status.collapse('w3', 'bath.alert.error') }}

Block

Content

New in v3.1: a list of values can be used to make collapsing more flexible
Select a value to show the effects. {{ basic.select('s1', 'bath.multistate', 'mini', [0, 1, '2', 3, 4], '', [0, 1, 2, 3, 4] ) }}
{% filter trim|escape|nl2br %}{% verbatim %} {{ status.collapse('w4', 'bath.multistate', [1, 2, 4]) }} {{ status.collapse('w5', 'bath.multistate', [0, 3]) }}
{{ basic.symbol('', 'bath.multistate', '', ['secur_locked', 'audio_sound'], [0, 3]) }} This section is collapsed if values match 1, 2 or 4
Now you've been choosing 1, 2 or 4. {{ basic.symbol('', 'bath.multistate', '', ['audio_play', 'audio_pause', 'audio_stop'], [1, 2, 4]) }}
{% endverbatim %}{% endfilter %}
{{ status.collapse('w4', 'bath.multistate', [1, 2, 4]) }} {{ status.collapse('w5', 'bath.multistate', [0, 3]) }} Result:
{{ basic.symbol('', 'bath.multistate', '', ['secur_locked', 'audio_sound'], [0, 3]) }} This section is collapsed if values match 1, 2 or 4
Now you've been choosing 1, 2 or 4. {{ basic.symbol('', 'bath.multistate', '', ['audio_play', 'audio_pause', 'audio_stop'], [1, 2, 4]) }}
{% endblock %}