Widgets usable in articles

Columns

/---div .[row]
/---div .[col-md-6]
Column 1
\---

/---div .[col-md-6]
Column 2
\---
\---

Result

Tabcontrols

<div data-control="tab-control" class="sjs sjs-tab-control">
    <ul>
        <li title="Java" class="active">
Java
        </li>
        <li title="C#">
C#
        </li>
    </ul>
</div>

Result

Parameters

data-auto-height="1" (for both carousel & tab control)
data-auto-scroll="1" (timer for switching carousel slides - only for carousel)
-----
ul (both carousel & tab control)
- title (set as title of tab bar - if shown & as a title on mouse hover - "null" is shown if not specified)
- data-icon (FA icon - defined as "fa-{data-icon}")
- data-tab-id (for buttons so the switching would work)
- data-no-event (to disable the default on click event)

Carousels

<div data-control="carousel" class="sjs sjs-carousel sjs-tab-control">
    <ul>
        <li class="active"><img src="images/5/meetings/carousel/objektove_programovani_csharp_net_php_java_mysleni.jpg" alt="Školení objektově-orientovaného programování - Atributy a metody v C# .NET" />
        <li><img src="images/5/meetings/carousel/objektove_programovani_csharp_net_php_java_ukol.jpg" alt="Úkol na objektově-orientovaném programování" />
        <li><img src="images/5/meetings/carousel/skoleni_programovani_obed.jpg" alt="Oběd zdarma na kurzech objektově orientovaného programování v C# .NET" />
        <li><img src="images/5/meetings/carousel/certifikat_skoleni_objektove_orientovaneho_programovani.jpg" alt="Certifikát ke školení objektově orientovaného programování v C# .NET" />
    </ul>
</div>

Collapsibles

<input id="show-details" class="sjs-collapsible" type="checkbox">
<label for="show-details" class="sjs-collapsible">Show details</label>
<div class="sjs-collapsible-wrapper">
    Details
</div>

Result

Sorting tables

.[sorting-table-high]
| *3*   | **5** | 2 | 8 | 9 | 1 |

Result

Accordions