iOS Checkboxes
Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then I've got something special for you. iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.
Examples
| A checkbox defaulting to checked | |
| A checkbox defaulting to unchecked |
Download and implement
In keeping with the jQuery philosophy, using the iphone-style-checkboxes library is very simple. Download the package, unzip it and place the javascript, images and stylesheet where you please. You'll need to update the stylesheet to point to the new location of your images if they have changed relative to the stylesheet.
Once the files are available to your site, activating the script is very easy:
<head>
<script src="jquery-1.4.js"></script>
<script src="jquery/iphone-style-checkboxes.js"></script>
<link rel="stylesheet" href="path_to/style.css">
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').iphoneStyle();
});
</script>
</head>
The initialization method takes a handful of options.
- checkedLabel sets the text of the "on" state. Defaults to: ON
- uncheckedLabel sets the text of the "off" state. Defaults to: OFF
For example:
$(':checkbox').iphoneStyle({
checkedLabel: 'YES',
uncheckedLabel: 'NO'
});
| A checkbox defaulting to checked | |
| A checkbox defaulting to unchecked |
Commercial Licensing
Commercial use requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money. This includes portfolio sites and premium templates. Commercial licenses may be purchased online. Contact me directly for volume licenses.
Use in non-commercial, educational and personal applications is free.