垂直显示的jquery按钮集
垂直显示的jquery按钮集
提问于 2010-11-04 23:08:35
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-12-31 17:31:47
我写了一个简短的插件，用jquery ui实现了单选按钮和复选框的垂直按钮集。
1. 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
我希望这能帮助你:)
Stack Overflow用户
发布于 2014-04-14 02:14:14
将各个按钮放在它们自己的div标记中。
来自：https://forum.jquery.com/topic/how-to-vertical-radio-button-set的信贷给leacar21
<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>
Stack Overflow用户
发布于 2010-11-04 23:10:07
无论如何，目前还没有一种内置的方法来实现this...not。标记和样式是围绕一个水平集构建的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4098054
复制相关文章
相似问题