Creating iPhone-style Checkboxes with jQuery and Prototype
Posted on August 9, 2009, under JavaScript, jQuery,
Bookmark it

iPhone-style Checkboxes is a progressive enhancement for standard HTML checkboxes which transforms them into the beautiful iPhone toggle switches. The change is purely visual as the underlying checkbox is not touched. The usage of the iphone-style-checkboxes library is very simple. Unzip the downloaded package, place the JavaScript, images and stylesheet where you please. Make sure to update the stylesheet to point to the new location of your images, if they have changed relative to the stylesheet.
Once you are done with the files upload, the activation is very easy:
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery/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).ready(function() {
$(':checkbox').iphoneStyle();
});
</script>
</head>
Elijah Miller is sharing the prototype version of this library with some additional features:
- The initial version supported changing the ON/OFF label text; but if you made the text longer than a few characters, it would be hidden under the handle. UPDATE: The handle and label sizes are automatic based on the actual label text.
- Support for dragging the control
- Sliding labels
- iPhone compatibility
- Source & Demo: JQuery Version | Prototype Version
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- August 9, 2009
- article by Gabriel C.
- Share your thoughts!
Related Posts
-
IPhone-like Password Fields: jQuery dPassword Pluginat July 10, 2009
-
Easily Create IPhone-styled Websites with JQTouch jQuery Pluginat September 1, 2009
-
Carousel Examples: YUI Library, jQuery, MooTools & Prototypeat April 11, 2009
-
Creating an Exit Modal Box using the jQuery libraryat April 25, 2009 with 28 comments
-
Style your HTML Input Form Elements using CSS & JavaScriptat April 12, 2009 with 1 comment
