vertically displayed jquery buttonset

Question

i\'m using the jquery ui button, is it possible to display the radio button vertically?it seems to default to horizontal.

http://jqueryui.com/demos/button/#radio

Answer 1

I wrote a short plugin that implement vertical buttonset for radio buttons and checkboxes with jquery ui.

1. jQuery Plugin

(function( $ ){
//plugin buttonset vertical
$.fn.buttonsetv = function() {
  $(':radio, :checkbox', this).wrap('
');
  $(this).buttonset();
  $('label:first', this).removeClass('ui-corner-left').addClass('ui-corner-top');
  $('label:last', this).removeClass('ui-corner-right').addClass('ui-corner-bottom');
  var maxWidth = 0; // max witdh
  $('label', this).each(function(index){
     var labelWidth = $(this).width();
     if (labelWidth > maxWidth ) maxWidth = labelWidth ; 
  })
  $('label', this).each(function(index){
    $(this).width(maxWidth);
  })
};
})( jQuery );

2. Sample markup

 Radio Buttonset 

  Choice 1
  Choice 2
  Choice 3

 Checkbox Buttonset 

  Choice 1
  Choice 2
  Choice 3

3. Plugin Usage

$(document).ready(function(){
    //call plugin 
    $("#radio").buttonsetv();
    $("#checkbox").buttonsetv();
});

Here the plugin and example code

I hope this can help you :)