fl8 Wiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 03_jQuery UIでradioをbuttonへ ======

===== HTML =====
<code>
<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>
</code>

===== Jquery =====
通常（横にボタンが並ぶ）
<code>
$("#type").buttonset();
</code>

下記のようにすると、ボタンを縦に並べる事ができる。
<code>
$("#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');
});
</code>

fl8 Wiki

ユーザ用ツール

サイト用ツール

ページ用ツール