images/slider_center.png
images/slider_left.png
images/slider_right.png
images/off.png
images/on.png
@@ -9,15 +9,38 @@
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
- $(':checkbox').iphoneStyle();
+ $('.on_off :checkbox').iphoneStyle();
+ $('.yes_no :checkbox').iphoneStyle({ checkedLabel: 'Yes', uncheckedLabel: 'No' });
+ $('.enabled_disabled :checkbox').iphoneStyle({ checkedLabel: 'Enabled', uncheckedLabel: 'Disabled' });
+ $('.long_tiny :checkbox').iphoneStyle({ checkedLabel: 'Very Long Text', uncheckedLabel: 'Tiny' });
});
</script>
</head>
<body>
- <h2>Off by default</h2>
- <input type="checkbox" />
+ <h1>On/Off</h1>
- <h2>On by default</h2>
- <input type="checkbox" checked="checked" />
+ <div class="on_off">
+ <h2>Default off</h2>
+ <input type="checkbox" />
+
+ <h2>Default on</h2>
+ <input type="checkbox" checked="checked" />
+ </div>
+
+ <div class="yes_no">
+ <h1>Yes/No</h1>
+ <input type="checkbox" />
+ </div>
+
+ <div class="enabled_disabled">
+ <h1>Enabled/Disabled</h1>
+ <input type="checkbox" />
+ </div>
+
+ <div class="long_tiny">
+ <h1>Very Long Text/Tiny</h1>
+ <input type="checkbox" />
+ </div>
+
</body>
</html>
\ No newline at end of file
jquery-demo.html
@@ -1,6 +1,7 @@
(function($){
$.iphoneStyle = {
defaults: {
+ duration: 200,
checkedLabel: 'ON',
uncheckedLabel: 'OFF',
background: '#fff',
@@ -24,34 +25,36 @@
elem.css({ opacity: 0 });
elem.wrap('<div class="' + options.containerClass + '" />');
- elem.after('<div class="' + options.handleClass + '"><div class="' + options.handleBGClass + '" style="background: ' + options.background + '"/><div class="' + options.handleSliderClass + '" /></div>')
+ elem.after('<div class="' + options.handleClass + '"><div class="' + options.handleSliderClass + '"><div class="right"><div class="center" /></div></div></div>')
.after('<label class="' + options.labelOffClass + '">'+ options.uncheckedLabel + '</label>')
.after('<label class="' + options.labelOnClass + '">' + options.checkedLabel + '</label>');
var handle = elem.siblings('.' + options.handleClass),
- handlebg = handle.children('.' + options.handleBGClass),
offlabel = elem.siblings('.' + options.labelOffClass),
onlabel = elem.siblings('.' + options.labelOnClass),
- container = elem.parent('.' + options.containerClass),
- rightside = container.width() - 39;
+ container = elem.parent('.' + options.containerClass);
+
+ var min = (onlabel.width() < offlabel.width()) ? onlabel.width() : offlabel.width();
+ container.css({width: onlabel.width() + offlabel.width() + 24 });
+ handle.css({width: min});
+ offlabel.css({width: container.width() - 12})
+
+ var rightside = container.width() - handle.width() - 8;
+
+ if (elem.is(':checked')) {
+ handle.css({ left: rightside });
+ onlabel.css({ width: rightside })
+ } else {
+ handle.css({ left: 0 });
+ onlabel.css({ width: 0 })
+ }
container.mouseup(function() {
var is_onstate = (handle.position().left <= 0);
- new_left = (is_onstate) ? rightside : 0,
- bgleft = (is_onstate) ? 34 : 0;
+ new_left = (is_onstate) ? rightside : 0;
- handlebg.hide();
- handle.animate({ left: new_left }, 100, function() {
- handlebg.css({ left: bgleft }).show();
- });
-
- if (is_onstate) {
- offlabel.animate({ opacity: 0 }, 200);
- onlabel.animate({ opacity: 1 }, 200);
- } else {
- offlabel.animate({ opacity: 1 }, 200);
- onlabel.animate({ opacity: 0 }, 200);
- }
+ handle.animate({ left: new_left }, options.duration);
+ onlabel.animate({ width: new_left }, options.duration);
elem.attr('checked', !is_onstate).change();
return false;
@@ -61,14 +64,6 @@
$(container, onlabel, offlabel, handle).mousedown(function() { return false; });
if ($.browser.ie)
$(container, onlabel, offlabel, handle).bind('startselect', function() { return false; });
-
- // initial load
- if (elem.is(':checked')) {
- offlabel.css({ opacity: 0 });
- onlabel.css({ opacity: 1 });
- handle.css({ left: rightside });
- handlebg.css({ left: 34 });
- }
- });
+ });
};
})(jQuery);
\ No newline at end of file
jquery/iphone-style-checkboxes.js
@@ -1,6 +1,5 @@
.iPhoneCheckContainer {
position: relative;
- width: 85px;
height: 27px;
cursor: pointer;
overflow: hidden; }
@@ -11,7 +10,6 @@
.iPhoneCheckHandle {
display: block;
height: 27px;
- width: 39px;
cursor: pointer;
position: absolute;
top: 0;
@@ -28,10 +26,26 @@
top: 0;
left: 0;
height: 27px;
- width: 39px;
- background: url(images/slider.png) no-repeat;
+ width: 100%;
+ padding-left: 4px;
+ background: url(images/slider_left.png) no-repeat;
z-index: 2; }
+
+ .iPhoneCheckHandle .iPhoneCheckHandleSlider .right {
+ height: 100%;
+ width: 100%;
+ padding-right: 4px;
+ background: url(images/slider_right.png) no-repeat top right;
+ z-index: 2; }
+
+ .iPhoneCheckHandle .iPhoneCheckHandleSlider .center {
+ height: 100%;
+ width: 100%;
+ background: url(images/slider_center.png);
+ z-index: 2; }
+
label.iPhoneCheckLabelOn, label.iPhoneCheckLabelOff {
+ white-space: nowrap;
font-size: 17px;
line-height: 17px;
font-weight: bold;
@@ -41,18 +55,22 @@ label.iPhoneCheckLabelOn, label.iPhoneCheckLabelOff {
display: block;
height: 22px;
position: absolute;
- width: 52px;
- top: 0; }
+ width: auto;
+ top: 0;
+ overflow: hidden; }
label.iPhoneCheckLabelOn {
color: #fff;
background: url(images/on.png) no-repeat;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
left: 0;
- padding: 5px 0 0 8px; }
+ padding: 5px 0 0 8px;
+ z-index: 1; }
label.iPhoneCheckLabelOff {
color: #8B8B8B;
background: url(images/off.png) no-repeat right 0;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
text-align: right;
right: 0;
- padding: 5px 8px 0 0; }
\ No newline at end of file
+ padding: 5px 8px 0 0; }
+ }
+
\ No newline at end of file
style.css
images/off-end.png
images/on-end.png
fd7898595b8cb875d6786ffb2c8afe45e026b82d
Elijah Miller
elijah.miller@gmail.com
http://github.com/tdreyno/iphone-style-checkboxes/commit/ef2a0a2299bd5e731a9bced5a30eeea8d9ccb0dd
ef2a0a2299bd5e731a9bced5a30eeea8d9ccb0dd
2009-06-24T19:29:03-07:00
2009-06-24T19:29:03-07:00
Variable size sliders for jQuery.
bd57b9ac021640960f2d5e783eb1f5976e6a2f98
Elijah Miller
elijah.miller@gmail.com