

Show HN: Easily Customizable Toggle Buttons - jQuery Plugin - simontabor
http://simontabor.com/toggles/

======
alexyoung
When handling options, I quite like this pattern:

    
    
        var settings = $.extend({
          dragable: true,
          clickable: true,
          ontext: 'ON',
          offtext: 'OFF',
          on: true,
          animtime: 300
        }, opts);
    

The $.extend method still returns a suitable object even if `opts` is
undefined.

You also might want to `return this.each` so calls can be chained.

All of this is covered here: <http://docs.jquery.com/Plugins/Authoring>

~~~
simontabor
Thank you Alex, I'll change it tomorrow!

------
taitems
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.

Check it out here: <http://taitems.github.com/UX-Lab/ToggleSwitch/index.html>

I also investigated achieving something similar using only CSS base on a
:checkbox, but the browser support, even in "modern" browsers was poor:
<http://taitems.github.com/UX-Lab/CSSInputs/index.html>

Thoughts and hacks on the above, here:
[http://taitems.tumblr.com/post/23099016111/css3-input-
stylin...](http://taitems.tumblr.com/post/23099016111/css3-input-styling-a-
state-of-the-union-ux-lab-009)

------
axiak
This looks great! One minor suggestion: make the toggle button non selectable
for dragging. <http://jsfiddle.net/SWqw3/> show's a basic way of doing this.

~~~
simontabor
Done!

------
creativename
These look great! Thanks for sharing.

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.

~~~
simontabor
The default is actually 50x20px which is pretty small, I could possibly add it
so you can specify a size for the toggle in the options.

------
tehwebguy
It's nice to see something like this as a jQuery plugin. It would be amazing
if they could be adjusted by swiping on mobile!

~~~
rane
I don't know about Android but you don't swipe toggle buttons on iOS.

~~~
garand
Most users don't, but they have the ability to be swiped, and I've seen some
iOS users swiping them around.

------
S_A_P
I like these, but how do you get the "value"? Im not a javascript guru, but is
there an attribute or value I need to check?

~~~
wbobeirne
It looks like the primary function of the button is to alter something on the
page via the toggles function, but I guess you could check if it had the
active class or not.

~~~
simontabor
You can either check the class of the .slide div or have it linked to a
checkbox which will be checked or unchecked.

~~~
S_A_P
Ahh, that did it. I ended up checking for $('.slide').hasClass('active');

Thanks for this simon!

------
antihero
Suggestion - theme for Jelly Bean, then have option to automatically select
theme for detected device (Android/iPhone)

------
munkydung
nice work! what license is this released under?

~~~
simontabor
I'm feeling nice so MIT - will update the README tomorrow

