Domanda pulsanti jquery visualizzati verticalmente


sto usando il pulsante ui jquery, è possibile visualizzare il pulsante di opzione in verticale? sembra di default in orizzontale.

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

grazie molto


16
2017-11-04 15:08


origine


risposte:


Ho scritto un breve plugin che implementa pulsantiere verticali per pulsanti di opzione e checkbox con jquery ui.

1. Plugin jQuery

(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');
  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. Markup di esempio

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

3. Utilizzo del plugin

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

Qui il plugin e il codice di esempio 

Spero che ciò possa aiutarti :)


31
2017-12-31 09:31



Posiziona i singoli pulsanti nei propri tag div.

Ringraziamo Leacar21 da: https://forum.jquery.com/topic/how-to-vertical-radio-button-set

<div id="someSet"> <div><input type="radio" id="button1"... ></div> <div><input type="radio" id="button2"... ></div> <div><input type="radio" id="button3"... ></div> </div>


4
2018-04-13 18:14



Non c'è un modo integrato per farlo ... non al momento comunque. Il markup e lo styling sono costruiti attorno a un set orizzontale.


2
2017-11-04 15:10