Button Control: Split Buttons

Ajax Javascript YUI Menu

Split Button（分かれたボタン）というのは、聞きなれない呼称なので、現物を見た方が早い。
（YUIのExampleのページへのリンクはこちら）

以下がサンプルの画面であるが、青の4角で囲んだ部分をクリックするとMenuが展開され、ボタン内の以外の場所をクリックしてもMenuは現れない。
これをして、Split（分かれた）と呼んでいる。

このようなSplit Buttonは、先の「Menu Button」を作るのとほぼ同じ要領で作ることができる。

以下にJavaScriptを含むhtmlの全文を示すが、これは、「Menu Button」のhtmlにある「Menu(もしくは、menu）」を「Split（もしくは、split）」で置き換えただけのものである。

<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" />
<link rel="stylesheet" type="text/css" href="scripts/yui/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="scripts/yui/menu/menu-min.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: 500px;
	height: auto;
	border:1px dashed #999999;
}

/*
    Set the "zoom" property to "normal" since it is set to "1" by the 
   ".example-container .bd" rule in yui.css and this causes a Menu
    instance's width to expand to 100% of the browser viewport.
*/
    
div.yuimenu .bd {
	zoom: normal;
}

#button-example-form fieldset {
	border: 2px groove #ccc;
	margin: .5em;
	padding: .5em;
}

#splitbutton3menu,
#splitbutton5menu {
	position: absolute;
	visibility: hidden;
	border: solid 1px #000;
	padding: .5em;
	background-color: #ccc;
}

#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.SplitButton = function() {

	var Dom = YAHOO.util.Dom;

    // SplitButton1は（input type="submit"から生成されるので）submitイベントを出す
    var onExampleSubmit = function (p_oEvent) {
        var bSubmit = window.confirm("Are you sure you want to submit this form?");
        if(!bSubmit) {
            YAHOO.util.Event.preventDefault(p_oEvent);
        }
    };
	
	return{
    	init: function() {

	// ---- buttonをタグから生成する。-----
		
            // Create a Button using an existing <input> element as a data source

        	// ----------- split　button1の処理 --------------------
		    // SplitButton1は（input type="submit"から生成されるので）submitイベントを出す
            var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", 
                    { 	type: "split", 
                		menu: "splitbutton1select" });

        	// ----------- split　button2の処理 --------------------
            var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", 
                    { 	type: "split", 
                		menu: "splitbutton2select" });

        	// ----------- split　button3の処理 --------------------
            var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", 
                    { 	type: "split", 
                		menu: "splitbutton3menu" });

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

        	// ----------- split　button4の処理 --------------------
			// SplitButton4のためのオブジェクトリテラル（Menuを定義するときと同じ）

			// SplitButton4のためのイベントハンドラ
		    function onSplitItemClick(p_sType, p_aArgs, p_oItem) {
		        oSplitButton4.set("label", p_oItem.cfg.getProperty("text"));
		    };

		    var aSplitButton4Menu = [
				{ text: "one", value: 1, onclick: { fn: onSplitItemClick } },
				{ text: "two", value: 2, onclick: { fn: onSplitItemClick } },
				{ text: "three", value: 3, onclick: { fn: onSplitItemClick } }
                ];

	        var oSplitButton4 = new YAHOO.widget.Button(
                { 	type: "split", 
                    label: "one", 
                    name: "mysplitbutton", 
                    menu: aSplitButton4Menu, 
                    container: "splitbuttonsfromjavascript" 
                }
        	);

        	// ----------- menu　button5の処理 --------------------
        	// 4の処理が終わったら動くようにする。
        	// 待たないと、4より前に表示されてしまう。
	        YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", 
	    	        function () {
		        
				// Instantiate an Overlay instance
    	        var oOverlay = new YAHOO.widget.Overlay("splitbutton5menu", 
        	            { visible: false }
            	);
            	// Split Menuの中身をセット（カレンダーやカラーピッカーなど入れられる）
            	oOverlay.setBody("Split Button 5 Menu");
        
            	// Instantiate a Menu Button
            	var oSplitButton5 = new YAHOO.widget.Button(
                    { 	type: "split", 
                        label: "Split Button 5", 
                        menu: oOverlay 
                    }
            	);
            
            	/*
                 Append the Menu Button and Overlay to the element with the id 
                 of "menubuttonsfromjavascript"
            	*/
				var el = Dom.get('splitbuttonsfromjavascript');
            	oSplitButton5.appendTo(el);
            	oOverlay.render(el);

	    	});
        	// ----------- menu　button5の処理 (end)--------------------
	    	
            // SplitButton1は（input type="submit"から生成されるので）submitイベントを出す
            // (そのハンドラを仕込む)。
            YAHOO.util.Event.on("button-example-form", 
                    "submit", onExampleSubmit);
		}
	};
}();

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

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
Split Buttonの作り方のサンプルです。
</p>
<form id="button-example-form" name="button-example-form" method="post">

    <fieldset id="splitbuttons">
        <legend>Split Buttons</legend>

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

            <!-- Menu1 -->
            <input type="submit" id="splitbutton1" name="splitbutton1_button" value="Split Button 1">
            <select id="splitbutton1select" name="splitbutton1select" multiple>
                <option value="0">One</option>
                <option value="1">Two</option>
                <option value="2">Three</option>                
            </select>

            <!-- Menu2 -->
            <input type="button" id="splitbutton2" name="splitbutton2_button" value="Split Button 2">
            <select id="splitbutton2select" name="splitbutton2select">
                <option value="0">One</option>
                <option value="1">Two</option>
                <option value="2">Three</option>                
            </select>

            <!-- Menu3 -->
            <input type="button" id="splitbutton3" name="splitbutton3_button" value="Split Button 3">
            <div id="splitbutton3menu" class="yui-overlay">
                <div class="bd">Split Button 3 Menu</div>
            </div>
        </fieldset>

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

    </fieldset> 
</form>
</div>
</BODY>		
</HTML>