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 → alexyoung]

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

[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 → axiak]

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 → creativename]

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 → tehwebguy]

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

[garand → rane]

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 → S_A_P]

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 → wbobeirne]

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 → simontabor]

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 → munkydung]

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