Blocks
Here are some examples to show blocks available in
smartVISU
A variable set of blocks which are collapsible. Use 'set-1', 'set-2', 'set-3' to define the number of sections in a block.
Set the attribute 'data-collapsed="false"' for the open section (only one) and omit the attribute for the others.
You can also define the width of the block by adding a width statement to the first div (see last example).
Examples
A static block<div class="block">
<div class="ui-bar-c ui-li-divider ui-corner-top">Block 1</div>
<div class="ui-fixed ui-body-a ui-corner-bottom">
<p>This is a static block</p>
</div>
</div>
This is a static block
A variable set of blocks which are collapsible. Use 'set-1', 'set-2', 'set-3' to define the number of sections in a block.
Set the attribute 'data-collapsed="false"' for the open section (only one) and omit the attribute for the others.
You can also define the width of the block by adding a width statement to the first div (see last example).
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>Set of two collapsible blocks with one being collapsed</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>Collapsed by default if 'data-collapsed="false"' is omitted</p>
</div>
</div>
</div>
Block 2
This is a collapsible block
Section 1
Set of two blocks with one being collapsible
Section 2
Collapsed by default if 'data-collapsed="false" ' is omitted
Section 1
A set of 3 collapsible blocks
The description 'style="width:100%" ' has been added to the <div class="block"> statement
in order to make the block use the whole available width of the screen.
Section 2
Content 2
Section 3
Content 3
