HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jQuery UI Button(ラジオボタン) ツールバー サンプル

jQuery UI Button ウィジェットのサンプル表示です。
ラジオボタンをボタンセット(buttonset)とするとツールバーのように表示します。

以下のサンプルでは、通常のラジオボタンと jQuery UI Button ウィジェットを使用した場合を表示しています。

通常のラジオボタンで表示



jQuery UI Button ボタンセットで表示

コード


$(function() {
    // div #samplebar をボタンセットにする
    $("#samplebar").buttonset();
});
	

HTMLコード


<h4>通常のラジオボタンで表示</h4>
<div>
    <input type="radio" id="radiobtn1" name="radiobtn" checked="checked"/>
        <label for="radiobtn1">ホーム</label>
    <input type="radio" id="radiobtn2" name="radiobtn"/>
        <label for="radiobtn2">サンプル集</label>
    <input type="radio" id="radiobtn3" name="radiobtn"/>
        <label for="radiobtn3">関連リンク</label>
    <input type="radio" id="radiobtn4" name="radiobtn"/>
        <label for="radiobtn4">ブログ</label>
</div>
<br/>
<br/>
<h4>jQuery UI Button ボタンセットで表示</h4>
<div id="samplebar">
    <input type="radio" id="radio1" name="samplebar" checked="checked"/>
        <label for="radio1">ホーム</label>
    <input type="radio" id="radio2" name="samplebar"/>
        <label for="radio2">サンプル集</label>
    <input type="radio" id="radio3" name="samplebar"/>
        <label for="radio3">関連リンク</label>
    <input type="radio" id="radio4" name="samplebar"/>
        <label for="radio4">ブログ</label>
</div>