iPhone-style Checkboxes for Prototype
Big thanks to Elijah Miller for stepping up and finishing the work on the Prototype version of the iPhone-style checkboxes. Elijah now has write-access to the official repository at GitHub and will be maintaining it alongside my jQuery version.
Examples
| A checkbox defaulting to checked | |
| A checkbox defaulting to unchecked |
Download and implement
As with the jQuery version, 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="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="prototype/iphone-style-checkboxes.js" type="text/javascript"></script>
<link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
<script type="text/javascript">
document.observe("dom:loaded", function() {
new iPhoneStyle('input[type=checkbox]');
});
</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:
new iPhoneStyle('input[type=checkbox]', {
checkedLabel: 'YES',
uncheckedLabel: 'NO'
});
| A checkbox defaulting to checked | |
| A checkbox defaulting to unchecked |
Original version and Contributing
You can read about the original jQuery version here. Both versions are maintained using GitHub: http://github.com/tdreyno/iphone-style-checkboxes