ユーザ用ツール

サイト用ツール


サイドバー

このページの翻訳:



最近の更新



Tag Cloud

13_javascript:01_jquery:03_jquery-ui_radio_to_button

03_jQuery UIでradioをbuttonへ

HTML

<div class="span1" align="left" id="type">
<label class="control-label required" id="color" for="form_type_0">main</label>
<input type="radio" id="form_type_0" name="form[type]" required="required"    class="span3 inline" placeholder="type" value="1" checked="checked" />
<label class="control-label required" id="color" for="form_type_1">volumes</label>
<input type="radio" id="form_type_1" name="form[type]" required="required"    class="span3 inline" placeholder="type" value="2" />
<label class="control-label required" id="color" for="form_type_2">session</label>
<input type="radio" id="form_type_2" name="form[type]" required="required"    class="span3 inline" placeholder="type" value="3" />
</div>

Jquery

通常(横にボタンが並ぶ)

$("#type").buttonset();

下記のようにすると、ボタンを縦に並べる事ができる。

$("#type").buttonset();
$("#type label:first").removeClass('ui-corner-left').addClass('ui-corner-top');
$("#type label:last").removeClass('ui-corner-right').addClass('ui-corner-bottom');
$("#type label").each(function(){
	$(this).width('100%');
});
$("#type span").each(function(){
		$(this).removeClass('ui-button-text');
});
13_javascript/01_jquery/03_jquery-ui_radio_to_button.txt · 最終更新: 2014/07/03 11:09 by matsui