Search within TutorialsPark

jQuery Mobile : Flip Switches Widget


Learn how to use jQuery Mobile Flip Switch Widget


jQuery Mobile : Flip Switches Widget

Just like a Checkbox, a Flip switch has two states, and it can be used as an alternative to checkbox.Values can be assigned by either clicking or a simple swipe.

A Flip switch can be created using the attribute data-role="flipswitch" on any checkbox or a select with option values.

Example: jQuery Mobile - Flip Switches

Give it a TRY! » Note: The Values are updated automatically as the Switches are Flipped


jQuery Mobile : Flip Switches without Rounded Corners

A Default standard Flip Switch created either using Checkbox or Select input has rounded corners, however the users have an option to change this using the attribute data-corners="false"

Syntax: jQuery Mobile - Flip Switches without Rounded Corners

Give it a TRY! » Note: The switch edges are no longer round, its now a sharp square edge.


jQuery Mobile : FlipSwitches with Various Sizes

The Width of the Switch to Accomodate large Labels can be increased by using CSS rules to set the width of the container of the Switch Element.

A Minified version of the switch can be created using attribute data-mini="true", it just creates a smaller version of the flipswitch.

Syntax: jQuery Mobile FlipSwitches with Various Sizes

Give it a TRY! » Note:The default value of data-highlight="true", i,e the selected range is highlighted.


jQuery Mobile : Switches Themes and Selected States

Just like all other jQuery Mobile Widgets, the switches can also be themed using attribute data-theme, the default theme is a, users can set theme b or any other custom theme.

The Initial selected state of the switches can be set using the attribute selected, upon the option to be selected initially

Syntax: jQuery Mobile Switches Themes and Selected States

Give it a TRY! » Note:You can create custom themed switches using Themeroller application