jquery-ui – 垂直显示的jquery按钮

前端之家收集整理的这篇文章主要介绍了jquery-ui – 垂直显示的jquery按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用jquery ui按钮,是否可以垂直显示单选按钮?它似乎默认为水平。

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

非常感谢

解决方法

我写了一个简单的插件,它使用jquery ui实现单选按钮和复选框的垂直按钮。

jQuery插件

  1. (function( $ ){
  2. //plugin buttonset vertical
  3. $.fn.buttonsetv = function() {
  4. $(':radio,:checkBox',this).wrap('<div style="margin: 1px"/>');
  5. $(this).buttonset();
  6. $('label:first',this).removeClass('ui-corner-left').addClass('ui-corner-top');
  7. $('label:last',this).removeClass('ui-corner-right').addClass('ui-corner-bottom');
  8. var maxWidth = 0; // max witdh
  9. $('label',this).each(function(index){
  10. var labelWidth = $(this).width();
  11. if (labelWidth > maxWidth ) maxWidth = labelWidth ;
  12. })
  13. $('label',this).each(function(index){
  14. $(this).width(maxWidth);
  15. })
  16. };
  17. })( jQuery );

2.样品加标

  1. <h2> Radio Buttonset </h2>
  2. <div id="radio">
  3. <input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">Choice 1</label>
  4. <input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Choice 2</label>
  5. <input type="radio" id="radio3" name="radio" value="3"/><label for="radio3">Choice 3</label>
  6. </div>
  7. <h2> CheckBox Buttonset </h2>
  8. <div id="checkBox">
  9. <input type="checkBox" id="check1" name="check" value="1"/><label for="check1">Choice 1</label>
  10. <input type="checkBox" id="check2" name="check" value="2"/><label for="check2">Choice 2</label>
  11. <input type="checkBox" id="check3" name="check" value="3"/><label for="check3">Choice 3</label>
  12. </div>

3.插件使用

  1. $(document).ready(function(){
  2. //call plugin
  3. $("#radio").buttonsetv();
  4. $("#checkBox").buttonsetv();
  5. });

Here the plugin and example code

我希望这可以帮助你:)

猜你在找的jQuery相关文章