iCheckbox - Inspired Checkbox v0.1

• iphoneSwitch Author: Daniel LaBare 2/4/2008
• iCheckbox Author: Bryn P. Mosher 2/26/2010-2/27/2010
• Thanks to Kari Waldrep for the design inspiration that prompted me to create the plugin

Convert a checkbox or multiple checkboxes into iphone style switches. This is based on the jQuery iphoneSwitch plugin by Daniel LaBare.

Example:

Here's a sample checkbox slider control using the default CSS classes and Daniel LaBare's original images: . This one actually controls the display of the "debug" messages used for our examples on this page (Firebug console messages and, failing that, alert() boxes).

Here's another slider control using CSS classes assigned at creation with a custom look and the corresponding checkbox still visible: . This slider does nothing more than send "debug" messages.

Features:

• Because checkboxes are used, this is compatable with having javascript off for form submission.
• Affects only checkboxes.
• Synchronizes the actual state of the checkbox for on or off status.
• Completely self-contained for each checkbox.
• Changes fire the onchange event of your checkbox.
• Relies purely on css for styling... no passing anything but your slider image.
• Because functionality is decoupled from CSS, you can assign custom CSS classes if you wish making it possible for multiple version per page.
• Completely inline like a normal checkbox. No sliding-door-float madness.
• Can show or hide the original checkbox depending on settings.

To aceive this, a <span> tag is created around the checkbox. An <img> is then appended inside of this <span>. Finally, the checkbox <input> is optionally hidden. The <span> tag can be styled any way you wish. It is simply a container for the rest. The actual sliding image is assigned to the created <img> via the "background-image" CSS property and its animation is controlled programatically via the "background-position" CSS property.

Syntax

iCheckbox has the following syntax:

var options = {
	switch_container_src: 'images/bpm-frame.gif',
	class_container: 'iCheckbox_two_container',
	class_switch: 'iCheckbox_two_switch',
	class_checkbox: 'iCheckbox_two_checkbox',
	switch_speed: 450,
	switch_swing: -18,
	checkbox_hide: false
	};
var initial_state = "off";
$('.some_checkbox').iCheckbox( initial_state, options );

Option List

• switch_container_src "switch_container_src" is the outer frame image of the slider. This should be a GIF (if you want IE6 support) or a PNG with a cutout center in the shape of your choice. The image used for the second example above can be seen here. A "magic pink" square has been drawn around it so that you can visualize how little the image actually covers. It is merely the white corners and the grey inner border.
  
  The "switch_container_src" should never be excluded. If anything, you should assign a fully transparent image to it that fits your desired dimensions. The default value of "switch_container_src" is "images/iphone_switch_container.gif".
• switch_height "switch_height" is the height of your slider construct including the outer frame in pixels. This usually matches the height dimension of your "switch_container_src" image. The default value is "27".
• switch_width "switch_width" is the width of your slider construct including the outer frame in pixels. This usually matches the width dimension of your "switch_container_src" image. The default value is "94".
• switch_speed "switch_speed" is the amount of time in miliseconds that the animation should run. You should note that the onchange() event for the given checkbox will not fire until the animation ends. Thus, giving this a large value will delay the onchange() event just as much. The default value is "150".
• switch_swing "switch_swing" is the amount that your actual slider element image should travel to arrive at the "off" state in pixels. This correlates directly to the CSS background-position property. The "switch_swing" amount is usually a negative number relative to the amount of "peek-a-boo" space required by your image. For example, the image below is 54 pixels wide. We allow for 18 pixels of our state showing, so the "switch_swing" is "-18".
  
  The "on" state assumes this image to have CSS "background-position: 0px 0px;". The default value of "switch_swing" is "-53".
• class_container "class_container" is the CSS class name that will be applied to the <span> container. This name need not match any particular pattern for this plugin to work. The default value is "iCheckbox_container".
• class_switch "class_switch" is the CSS class name that will be applied to the <img> sliding switch. This name need not match any particular pattern for this plugin to work, however the "background-image" CSS property must be set to your desired sliding image. The default value is "iCheckbox_switch".
• class_checkbox "class_checkbox" is the CSS class name that will be applied to the checkbox <input>. This name need not match any particular pattern for this plugin to work. Assigning this should only be used if you wish the checkbox to remain visible or you need to override how it is hidden. The default value is "iCheckbox_checkbox".
• checkbox_hide "checkbox_hide" controls whether or not the original checkbox <input> is hidden after the slider control is created. Setting "checkbox_hide" to boolean "true" will cause the checkbox to be hidden automatically. The default value is boolean "true".