Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

gallery-slidecheckbox (gallery-slidecheckbox) on cdn

Last Updated: 03/24/12

+ 0 -

Marc

YUI Contributor

See 7 more by this user.

Created: 10/10/11
Last CDN Push: 11/7/12
Build Tag: gallery-2012.11.07-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0pr4
Free for use.

Gallery-slidecheckbox is an iphone style slidable checkbox.

Right now, this is not working on 3.5.0pr4. I will investigate and update the component.

configuration attributes are:
srcNode: the checkbox that will be replaced by the slider
duration: how long the animation takes
strings {labelOn: 'text', labelOff: 'text'} - sets the labels

The component supports clicking, dragging and key events when focused.

The checkbox will remain completely as is (but hidden). All interaction on the slider will result in the source checbox to be modified.

Key events are:
Arrow right: turn on
Arrow left: turn off
Space: change value

There are 4 skins:
1. sam (ios 4 blue)
2. green (ios 4 green)
3. ios5 (ios 5 blue)
4. ios5-green (ios 5 green)

This component was inspired by but not ported from Thomas Reynolds Slide Checkboxes http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

Thanks to Adi Hezral http://twitter.com/#!/hezral for creating the ios5 design files.

Tags:
mschipperheyn

Code Sample

<script src="http://yui.yahooapis.com/3.5.0pr4/build/yui/yui-min.js"></script>

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-debug.js"></script>
<script>
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.11.07-21-32'
}).use('gallery-slidecheckbox',function(Y){
	var slide = new Y.SlideCheckbox({srcNode:'#c1'}),
	slide3 = new Y.SlideCheckbox({srcNode:'#c3',strings:{labelOn: 'Yes',labelOff:'No'}}),
	slide.render();
	slide3.render();
})
</script>
<style>
.yui3-slidecheckbox-wrapper > .edge{background-color:#F5F5F5 !important;}
</style>
</head>
<body style="background-color:#F5F5F5">
<form>
<div class="yui3-skin-ios5">
<input type="checkbox" name="myCheck1" class="yesno" id="c1" class="slidecheck"><br/>
<input type="checkbox" name="myCheck5" class="yesno" DISABLED id="c3" class="slidecheck">
</div>
</form>
<div>
</body>
</html>
[/code]