解决方法@H_502_8@
我写了一个简单的插件,它使用jquery ui实现单选按钮和复选框的垂直按钮。
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.样品加标
<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.插件使用
$(document).ready(function(){
//call plugin
$("#radio").buttonsetv();
$("#checkBox").buttonsetv();
});
Here the plugin and example code
我希望这可以帮助你:)
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.样品加标
<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.插件使用
$(document).ready(function(){ //call plugin $("#radio").buttonsetv(); $("#checkBox").buttonsetv(); });
Here the plugin and example code
我希望这可以帮助你:)