Show HN: Easily Customizable Toggle Buttons - jQuery Plugin

28 pointssimontabor14 years ago17 comments

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

simontaborOP14y

Thank you Alex, I'll change it tomorrow!

taitems 14y

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 14y

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.

simontaborOP14y

Done!

creativename 14y

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.

simontaborOP14y

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 14y

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 14y

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

garand 14y

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 14y

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 14y

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.

simontaborOP14y

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 14y

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

Thanks for this simon!

antihero 14y

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

munkydung 14y

nice work! what license is this released under?

simontaborOP14y

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

Comments