"ui.checkswitch" is a javascript library and you can implement ios style switching checkbox by using this.
Here is a checkbox, and this is to be base.
<input type="checkbox" id="checkbox" name="checkbox" value="1">
Then, reading "ui.checkswitch.css", "ui.checkswitch.js" and run ChechSwitch func.
<link rel="stylesheet" href="styles/ui.checkswitch.css">
<script src="scripts/ui.checkswitch.js"></script>
<script>
CheckSwitch('#checkbox');
// a 1st argument is set a target checkbox id
</script>
A checkbox targeted is replaced by HTML following. Text labels and classes are custmizable by using options.
<span class="ui_check_switch">
<span class="ui_check_switch_inner">
<span class="ui_check_switch_slider">
<span class="ui_check_on ui_check_text">ON</span>
<span class="ui_check_knob"></span>
<span class="ui_check_off ui_check_text">OFF</span>
</span>
</span>
</span>
Custom text label and classes
| key | default |
|---|---|
| checkOnText | 'ON' |
| checkOffText | 'OFF' |
| uiClass | 'ui_check_switch' |
| uiOnClass | 'ui_check_switch_on' |
| uiOffClass | 'ui_check_switch_off' |
| uiInnerClass | 'ui_check_switch_inner' |
| uiSliderClass | 'ui_check_switch_slider' |
| uiTextClass | 'ui_check_text' |
| uiKnobClass | 'ui_check_knob' |
| uiCheckOffClass | 'ui_check_off' |
| uiCheckOnClass | 'ui_check_on |
CheckSwitch('#checkbox', {
checkOnText: 'ON',
checkOffText: 'OFF'
});
| method | description |
|---|---|
| on | make the checkSwitch state on |
| off | make the checkSwitch state off |
| getState | get checked or not from the checkbox |
| bind | bind events to the checkSwitch |
| destroy | destroy all events and APIs from the checkSwitch |
var chk = CheckSwitch('#checkbox');
chk.on();
| events | description |
|---|---|
| checkSwitch:on | Fire when the checkSwitch is on |
| checkSwitch:off | Fire when the checkSwitch is off |
var chk = CheckSwitch('#checkbox');
chk.bind({
'checkSwitch:on': function(ev) {
var cs = ev.checkSwitch;
console.log(cs.name);
},
'checkSwitch:off': function(ev) {
var cs = ev.checkSwitch;
console.log(cs.name);
}
});
*1) Default styles does not support iOS3 or less, operation check has.
*2) There are ugly border radiuses in default styles.
*3) If you want to use in IEs, you would write new styles.