Examples

List of examples

Loading page part delayed

Have parts of the page loaded by separate Ajax requests, after the main page is loaded.

Loading page part by click

Have parts of the page loaded or updated as result of clicking a link or button.

Loading page part by submit

Loading / replacing a page part as the result of submitting a form.

Href on any element

The href attribute transforms an anchor (A element) into a hyperlink. With Sircl, the href can be used on any element. In this example, we'll make hyperlinks of table rows.

Request confirmation on link

Shows how to request for confirmation before navigating a link.

Checkbox adds class

This example shows how to add/remove classes dynamically. In this case by using checkboxes.

Radio button adds class

This example shows how to add/remove classes dynamically. In this case by using radio buttons.

Triggering animation

This example demonstrates how animations can be triggered using the add/remove/toggle class actions in Sircl.

List management

Adding and removing items in a list within a form.

Dependent checkboxes

Creating interdependent checkbox controls.

Dependent selects

Creating interdependent select controls.

Autocomplete

Implementing a text field with autocomplete.

Allow saving forms on change

Enable the save/submit button only when the form contains changes.

Autosave forms on change

Build a form that automatically submits on change, for instance to perform a calculation and return results.

Form with a Dialog

Build a form that relies on HTML dialogs for parts of its input.

A Settings page

Example of a settings page using change actions instead of a form.

Data table with paging

Present a data table with paging.

Data table with paging and selection

Present a data table with paging and selection checkboxes.

Infinite scroll

Loading additional content on the page when scrolling down.

Barcode Scanner Demo

Demonstration of building a barcode scanner application using the Sircl media library.

Lazy loaded Bootstrap tabs

Lazy loading Bootstrap tab pages.

Lazy loaded Bootstrap collapse

Lazy loading Bootstrap expandable/collapsible collapse regions.

Lazy loaded Bootstrap modals

Lazy loading Bootstrap modal windows.

Submitting from Bootstrap modals

Submitting a form from a Bootstrap modal window.

Lane based tasks with drag & drop

A lane based task manager supporting drag & drop.