-
-
Save edersohe/760885 to your computer and use it in GitHub Desktop.
| <html> | |
| <head> | |
| <title>Test</title> | |
| <link rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/start/jquery-ui.css"></link> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script> | |
| <script src="jquery.myplugin.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| //call plugin | |
| $("#radio").buttonsetv(); | |
| $("#checkbox").buttonsetv(); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| body{ font: 70% "Trebuchet MS", sans-serif; margin: 50px;} | |
| </style> | |
| <body> | |
| <h2> Radio Buttonset </h2> | |
| <div id="radio"> | |
| <input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">Choice 1</label> | |
| <input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Choice 2</label> | |
| <input type="radio" id="radio3" name="radio" value="3"/><label for="radio3">Choice 3</label> | |
| </div> | |
| <h2> Checkbox Buttonset </h2> | |
| <div id="checkbox"> | |
| <input type="checkbox" id="check1" name="check" value="1"/><label for="check1">Choice 1</label> | |
| <input type="checkbox" id="check2" name="check" value="2"/><label for="check2">Choice 2</label> | |
| <input type="checkbox" id="check3" name="check" value="3"/><label for="check3">Choice 3</label> | |
| </div> | |
| </body> | |
| </head> | |
| </html> |
| (function( $ ){ | |
| //plugin buttonset vertical | |
| $.fn.buttonsetv = function() { | |
| $(':radio, :checkbox', this).wrap('<div style="margin: 1px"/>'); | |
| $(this).buttonset(); | |
| $('label:first', this).removeClass('ui-corner-left').addClass('ui-corner-top'); | |
| $('label:last', this).removeClass('ui-corner-right').addClass('ui-corner-bottom'); | |
| mw = 0; // max witdh | |
| $('label', this).each(function(index){ | |
| w = $(this).width(); | |
| if (w > mw) mw = w; | |
| }) | |
| $('label', this).each(function(index){ | |
| $(this).width(mw); | |
| }) | |
| }; | |
| })( jQuery ); |
nice, thanks!
Thanks a lot!!!! easy to implement.
Instead of putting a div between each .ui-button, you can set the style for each .ui-button to float:left, clear:left. You run into problems with animations when you have it your way. You could use js to change this as you do with adding the div's or just remove $(':radio, :checkbox', this).wrap('<div style="margin: 1px"/>'); and add this css:
#buttonset .ui-button { float: left; clear: left; }
Regardless, good solution. Thanks!
That's brilliant, just what I needed - thanks!
Maybe you could put a credit comment at the top? I feel bad just copy/pasting code :)
Also, not sure, but maybe a 'return this;' at the end so you can chain calls? (I often do: $(X).buttonsetv().change(...);
Great stuff - thanks very much. Good solution.
Good Solution!
Awesome. Perfect for needs.
Great thank you!!
Awesome. Thanks!!
for anyone wanting multiple columns of buttons http://jsfiddle.net/3wueyp9w/3/
Was looking for this exactly. Clean and simple code. Saved me the trouble.
Thanks!!