HTML5 Static Text Toggle Button

 

The Static Text Toggle Button UI component is like a Static Text Button widget except that after it is pressed it remains active until it is pressed again. It has four states: enabled, pressed, active, and disabled. The Static Text Toggle Button looks like this:

 

Configuration

 

Unselected Text Toggle Button

 

<a href="#" data-inline="true" data-role="button" class="ui-btn-toggle">Unselected</a>

 

Selected Text Toggle Button

You need to add the ui-btn-toggle-down-b class style to the button anchor.

<a href="#" data-inline="true" data-role="button" class="ui-btn-toggle ui-btn-toggle-down-b">Selected</a>

 

Disabled Text Toggle Button

Just add the ui-disabled and ui-btn-disabled class styles to the anchor.

<a href="#" data-inline="true" data-role="button" class="ui-btn-toggle ui-disabled ui-btn-disabled-b">Disabled</a>