Show HN: Easily Customizable Toggle Buttons - jQuery Plugin

by simontabor • 14 years ago

28 17 14 years ago

tehwebguy• 14 years ago

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• 14 years ago

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

garand• 14 years ago

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

alexyoung• 14 years ago

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

simontabor5• 14 years ago

Thank you Alex, I'll change it tomorrow!

creativename• 14 years ago

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.

simontabor5• 14 years ago

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.

axiak• 14 years ago

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.

simontabor5• 14 years ago

Done!

S_A_P2• 14 years ago

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• 14 years ago

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.

simontabor5• 14 years ago

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

munkydung• 14 years ago

nice work! what license is this released under?

simontabor5• 14 years ago

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

antihero• 14 years ago

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

taitems• 14 years ago

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

Show HN: Easily Customizable Toggle Buttons - jQuery Plugin

Related Stories