4 ms·
Show HN: Easily Customizable Toggle Buttons - jQuery Plugin
- tehwebguy 14y agoIt's nice to see something like this as a jQuery plugin. It would be amazing if they could be adjusted by swiping on mobile!
- alexyoung 14y agoWhen 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 http://docs.jquery.com/Plugins/Authoring
- simontabor 14y agoThank you Alex, I'll change it tomorrow!
- creativename 14y agoThese 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 14y agoThe 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 14y agoThis looks great! One minor suggestion: make the toggle button non selectable for dragging. http://jsfiddle.net/SWqw3/ http://jsfiddle.net/SWqw3/ show's a basic way of doing this.
- simontabor 14y agoDone!
- S_A_P 14y agoI 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 agoIt 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 14y agoYou 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 agoAhh, that did it. I ended up checking for $('.slide').hasClass('active'); Thanks for this simon!
- munkydung 14y agonice work! what license is this released under?
- simontabor 14y agoI'm feeling nice so MIT - will update the README tomorrow
- antihero 14y agoSuggestion - theme for Jelly Bean, then have option to automatically select theme for detected device (Android/iPhone)
- taitems 14y agoHey 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 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 http://taitems.github.com/UX-Lab/CSSInputs/index.html Thoughts and hacks on the above, here: http://taitems.tumblr.com/post/23099016111/css3-input-styling-a-state-of-the-union-ux-lab-009 http://taitems.tumblr.com/post/23099016111/css3-input-stylin...