垂直显示的jQuery按钮集 [英] vertically displayed jquery buttonset
本文介绍了垂直显示的jQuery按钮集的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用jQuery用户界面按钮,是否可以垂直显示单选按钮?它似乎默认为水平显示.
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
非常感谢
推荐答案
我写了一个简短的插件,为带有jQuery ui的单选按钮和复选框实现了垂直按钮集.
I wrote a short plugin that implement vertical buttonset for radio buttons and checkboxes with jquery ui.
(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();
});
我希望这可以为您提供帮助:)
I hope this can help you :)
这篇关于垂直显示的jQuery按钮集的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文