Show HN: Easily Customizable Toggle Buttons - jQuery Plugin(simontabor.com)

28 pointsby simontabor14 anni fa17 comments

Show HN: Easily Customizable Toggle Buttons - jQuery Plugin

http://simontabor.com/toggles/

17 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

simontabor14 anni fa

Thank you Alex, I'll change it tomorrow!

taitems14 anni fa

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

axiak14 anni fa

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.

simontabor14 anni fa

Done!

creativename14 anni fa

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.

simontabor14 anni fa

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.

tehwebguy14 anni fa

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!

rane14 anni fa

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

garand14 anni fa

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

S_A_P14 anni fa

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?

wbobeirne14 anni fa

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.

simontabor14 anni fa

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_P14 anni fa

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

Thanks for this simon!

antihero14 anni fa

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

munkydung14 anni fa

nice work! what license is this released under?

simontabor14 anni fa

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