-
-
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 ); |
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/
Thanks a lot!!!! easy to implement.