When handling options, I quite like this pattern:<p><pre><code> var settings = $.extend({
dragable: true,
clickable: true,
ontext: 'ON',
offtext: 'OFF',
on: true,
animtime: 300
}, opts);
</code></pre>
The $.extend method still returns a suitable object even if `opts` is undefined.<p>You also might want to `return this.each` so calls can be chained.<p>All of this is covered here: <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow">http://docs.jquery.com/Plugins/Authoring</a>
Hey guys, I did something similar but based off the styles of the jQuery UI slider plugin. I found while these types of standalone plugins looked okay, they were frustrating to customise or even to make them look PERFECT.<p>Check it out here: <a href="http://taitems.github.com/UX-Lab/ToggleSwitch/index.html" rel="nofollow">http://taitems.github.com/UX-Lab/ToggleSwitch/index.html</a><p>I also investigated achieving something similar using only CSS base on a :checkbox, but the browser support, even in "modern" browsers was poor:
<a href="http://taitems.github.com/UX-Lab/CSSInputs/index.html" rel="nofollow">http://taitems.github.com/UX-Lab/CSSInputs/index.html</a><p>Thoughts and hacks on the above, here: <a href="http://taitems.tumblr.com/post/23099016111/css3-input-styling-a-state-of-the-union-ux-lab-009" rel="nofollow">http://taitems.tumblr.com/post/23099016111/css3-input-stylin...</a>
This looks great! One minor suggestion: make the toggle button non selectable for dragging. <a href="http://jsfiddle.net/SWqw3/" rel="nofollow">http://jsfiddle.net/SWqw3/</a> show's a basic way of doing this.
These look great! Thanks for sharing.<p>One thing - I know the intent is that they can be easily customized, but it might be nice to have smaller options out of the box. I think I've been spoiled by Twitter Bootstrap, though, where they have a few preset sizes. My first thought was that they looked a little large.