Toggle
Design
The toggle is used to choose between two exclusive options like on and off. The standard configuration uses icons to represent each option, however options must always have readable label text whether visibly revealed or not.
Toggles should be enclosed in a fieldset and legend, to provide context for generic states. In general, this is handled within the Forms component.
| Examples | Good | Bad |
|---|---|---|
| Label for radio | Yes/No | 1/0 |
| Label for radio | On/Off | True/false |
| Legend | Send Notification | Notification_Send |
Code
To set the on or off state you need to add the checked attribute to the radio input element for that state.
Ensure the label FOR attribute matches the ID attribute in the input.
When using a Toggle inside a Form, use a Multi Input Group - see Forms page for details.
<div class="ace-toggle ace-toggle-icon" id="enabledOff">
<input checked="checked" id="enabledOffoff" type="radio" name="enabledOff" value="Off">
<label for="enabledOffoff"><span class="ace-icon ace-icon-control-off"></span><span class="ace-text">Off</span>
</label>
<input id="enabledOffon" type="radio" name="enabledOff" value="On">
<label for="enabledOffon"><span class="ace-icon ace-icon-control-on"></span><span class="ace-text">On</span>
</label>
</div>
<% ace.Toggle(Array(_
"onstatetext", "on",_
"offstatetext", "off",_
"name", "enabledOnASP",_
"checkedstate", "on"_
)) %>
<div class="ace-toggle ace-toggle-icon" id="enabledOn">
<input id="enabledOnoff" type="radio" name="enabledOn" value="Off">
<label for="enabledOnoff"><span class="ace-icon ace-icon-control-off"></span><span class="ace-text">Off</span>
</label>
<input checked="checked" id="enabledOnon" type="radio" name="enabledOn" value="On">
<label for="enabledOnon"><span class="ace-icon ace-icon-control-on"></span><span class="ace-text">On</span>
</label>
</div>
<% ace.Toggle(Array(_
"onstatetext", "on",_
"offstatetext", "off",_
"name", "enabledOffASP",_
"checkedstate", "off"_
)) %>
Disabled Toggles
Toggles will appear disabled when set to aria-disabled="true"; or they appear within disabled fieldsets. Note this is style only and you must also set each input to disabled="disabled" to actually prevent activation.
<div class="ace-toggle ace-toggle-icon" id="disabledIconOff" aria-disabled="true">
<input disabled="disabled" checked="checked" id="disabledIconOffoff" type="radio" name="disabledIconOff" value="Off">
<label for="disabledIconOffoff"><span class="ace-icon ace-icon-control-off"></span><span class="ace-text">Off</span>
</label>
<input disabled="disabled" id="disabledIconOffon" type="radio" name="disabledIconOff" value="On">
<label for="disabledIconOffon"><span class="ace-icon ace-icon-control-on"></span><span class="ace-text">On</span>
</label>
</div>
<% ace.Toggle(Array(_
"type", "icon",_
"onstatetext", "on",_
"offstatetext", "off",_
"name", "disabledIconOffASP",_
"checkedstate", "off",_
"disabled", "true"_
)) %>
Text Toggles
To display Text Toggles, set the class ace-toggle-text instead of ace-toggle-icon
<div class="ace-toggle ace-toggle-text" id="TextOff">
<input checked="checked" id="TextOffoff" type="radio" name="TextOff" value="Off">
<label for="TextOffoff"><span class="ace-text">Off</span>
</label>
<input id="TextOffon" type="radio" name="TextOff" value="On">
<label for="TextOffon"><span class="ace-text">On</span>
</label>
</div>
<% ace.Toggle(Array(_
"type", "text",_
"onstatetext", "on",_
"offstatetext", "off",_
"name", "TextOffASP",_
"checkedstate", "off"_
)) %>
ASP Attributes
| Name | Description |
|---|---|
| name | Sets ID of the toggle |
| customclass | Adds a custom class |
| type | Sets type of toggle, defaults to "icon" |
| disabled | Disables the toggle |
| checkedstate | Sets the initial checked state - that is, whether the toggle is on or off. |
| onstatetext | Sets the on state text |
| offstatetext | Sets the off state text |
| onstatevalue | Sets the value parameter of the on state |
| offstatevalue | Sets the value parameter of the off state |
Dependencies
- jQuery 1.10.2 http://jquery.com/
- Swipe support: Hammer JS http://hammerjs.github.io/
Javascript
Events
| Event | Description | Example |
|---|---|---|
| change | When a Toggle''s state is changed, a change event is triggered on the radio button set within the toggle control. Remember to listen for events on the radio buttons and not the Toggle''s wrapper element. | $('#toggleID input[type=radio]').on('change', function(){ //Do something }); |
Optional Methods
| Function | Arguments | Description | Example |
|---|---|---|---|
| init | elementSelector | Bind all the events to toggle. | ACE.ToggleControl.init('.ace-toggle'); |
| destroy | elementSelector | Removes the event bindings. | ACE.ToggleControl.destroy('.ace-toggle'); |