Button Control: Radio Buttons

Ajax Javascript YUI Button

チェックボックスと同様、ラジオボタンも、その形状をボタン様にすることができる。
このExample（Exampleのページへのリンクはこちら）は、その方法を示している。

下はサンプルの初期画面。

見た目は先のチェックボックスとかわらないが、ラジオボタンであるので、１つのグループの中で１つしか選択ができない。

YUIでは、このグループをボタングループという。
サンプルは、markupからこのボタングループとradioボタンを生成する方法と、javascriptで（つまり、YUIモジュールで）形成する方法を説明するもの。
YUIには、このために、YAHOO.widget.ButtonGroupというオブジェクトが存在する。
markupが存在する場合には、radioボタン（input type=radioなど）が、上図のようなボタンに変換されるのだが、これらをdivタグで括り、そのidをButtonGroupのコンストラクタで指定すればボタングループができあがる。マークアップで書いておいたradioボタンは、自動的にYUIのボタンに変換される。

Javascriptで作成する場合には、ButtonGroupのインスタンスを作成し、それにボタンを追加するという方法をとる（詳細は添付のhtmlと、ButtonGroupのAPIドキュメントを参照）。

以下は、サンプルでラジオボタン11を押したときの画面。ラジオボタン11は、ラジオボタン9（初期値）と同じボタングループに属している。
alertで、変更前のラベルと、変更後のラベルを表示するようにした。
このalert表示は、ボタンのイベントハンドラとして起動する。

以下に、Javascriptを含むhtmlファイルの全文を表示する。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="scripts/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/element/element-beta-min.js"></script>
<script type="text/javascript" src="scripts/yui/button/button-min.js"></script>

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 450px;
	height: auto;
	border:1px dashed #999999;
}

#button-example-form fieldset, 
#button-example-form fieldset div {
	border: 2px groove #ccc;
	margin: .5em;
	padding: .5em;
}
    
#button-example-form-postdata {
	border: dashed 1px #666;
	background-color: #ccc;
	padding: 1em;
}

#button-example-form-postdata h2 {
	margin: 0 0 .5em 0;
	padding: 0;
	border: none;
}
</style>

<script type="text/javascript">
//モジュールパターンで実装する。
YAHOO.namespace("EGP");

YAHOO.EGP.RadioBottum = function() {

	var ButtonGroup = YAHOO.widget.ButtonGroup;

	var onCheckedButtonChange = function (p_oEvent) {
		alert('prev : '+p_oEvent.prevValue.get("value")+
				 ' new : '+p_oEvent.newValue.get("value"));
	};
/*
	var onCheckedButtonChange = function (p_oEvent) {

        if(p_oEvent.prevValue) {
            YAHOO.log(p_oEvent.prevValue.get("name"), "info", "example4");
        }
        
        if(p_oEvent.newValue) {
            YAHOO.log(p_oEvent.newValue.get("name"), "info", "example4");
        }
    
    };
*/

	return{
    	init: function() {

	// ---- buttonをinputタグのtype=checkboxから生成する。-----
		
            var oButtonGroup1 = new ButtonGroup("buttongroup1");
            oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);

            var oButtonGroup2 = new ButtonGroup("buttongroup2");
            oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);

	// ---- buttonをmarkupなしで生成する。-----

            var oButtonGroup3 = new ButtonGroup(
                    { 	id:  "buttongroup3", 
                        name:  "radiofield3", 
                        container:  "radiobuttonsfromjavascript", 
                        usearia: true 
                    });

            oButtonGroup3.addButtons([
                { label: "Radio 9", value: "Radio 9", checked: true },
                { label: "Radio 10", value: "Radio 10" }, 
                { label: "Radio 11", value: "Radio 11" }, 
                { label: "Radio 12", value: "Radio 12" }
            ]);
            
            oButtonGroup3.on("checkedButtonChange", onCheckedButtonChange);

		}
	};
}();

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.EGP.RadioBottum.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.RadioBottum,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
Radio Buttonの作り方のサンプルです。
</p>

<form id="button-example-form" name="button-example-form" method="post">

    <fieldset id="radiobuttons">

        <legend>Radio Buttons</legend>

        <fieldset id="radiobuttonsfrommarkup">
            <legend>From Markup</legend>

            <div id="buttongroup1" class="yui-buttongroup">
                <input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked>
                <input id="radio2" type="radio" name="radiofield1" value="Radio 2">
                <input id="radio3" type="radio" name="radiofield1" value="Radio 3">

                <input id="radio4" type="radio" name="radiofield1" value="Radio 4">
            </div>

            <div id="buttongroup2" class="yui-buttongroup">
                <span id="radio5" class="yui-button yui-radio-button yui-button-checked">
                	<span class="first-child">
                		<button type="button" name="radiofield2" value="Radio 5">Radio 5</button>
                	</span>
                </span>
                <span id="radio6" class="yui-button yui-radio-button">
                	<span class="first-child">
                		<button type="button" name="radiofield2" value="Radio 6">Radio 6</button>
                	</span>
                </span>
                <span id="radio7" class="yui-button yui-radio-button">
                	<span class="first-child">
                		<button type="button" name="radiofield2" value="Radio 7">Radio 7</button>
                	</span>
                </span>
                <span id="radio8" class="yui-button yui-radio-button">
                	<span class="first-child">
                		<button type="button" name="radiofield2" value="Radio 8">Radio 8</button>
                	</span>
                </span>

            </div>

        </fieldset>

        <fieldset id="radiobuttonsfromjavascript">
            <legend>From JavaScript</legend>
        </fieldset>

    </fieldset>

    <div>
        <input type="reset" name="resetbutton" value="Reset Form">
        <input type="submit" name="submitbutton" value="Submit Form">
    </div>

</form>


</div>
</BODY>		
</HTML>