-
Notifications
You must be signed in to change notification settings - Fork 194
Toggle Buttons
NOTE: Toggle Buttons are only supported with BlackBerry 10 styling
Toggle buttons are quite easy to use in bbUI. Simply add a <div> element with the data-bb-type="toggle" attribute and then specify your true/false wording by specifying a data-bb-on="On" and data-bb-off="Off" attribute. You can provide whatever text you like for these captions. If the text is too long it will be truncated in the display.
To set the initial checked state of the control you can provide a data-bb-checked="true" attribute.
<div data-bb-type="toggle" data-bb-checked="true" data-bb-on="Yes" data-bb-off="No" onchange="doSomething(this)"></div>
<div data-bb-type="toggle" data-bb-on="On" data-bb-off="Off" onchange="doSomething(this)"></div>
<div data-bb-type="toggle" data-bb-on="Yes" data-bb-off="No" onchange="doSomething(this)"></div>
Note that any time the checkbox changes (either checked=true/false) the onchange event will be fired.
When BlackBerry 10 styling is applied the highlight color of the toggle button will use the highlightColor provided in the toolkit init() function.
A toggle button can have its value set using the setChecked() function that takes a boolean value for the state of the toggle button.
document.getElementById('mytoggle').setChecked(true);
The checked state can either be retrieved by examining the checked value of the toggle button or by using the getChecked() function
alert(document.getElementById('mytoggle').checked);
alert(document.getElementById('mytoggle').getChecked());