Button Control: Push Buttons

Ajax Javascript YUI Button

ボタンの生成の方法をいろいろと例示しているExample（YUIのExampleページへのリンクはこちら）。

YAHOOボタンも、

  • button.js
  • button.css

という、JavascriptライブラリとCSSの2本立てで形成されている。(実際には、element-beta-min.jsも読み込む)

初期画面は以下。

同じMarkupから生成されるといっても、最初の6つのボタンは、微妙に異なったmarkupから作成されている（これについては、添付するhtmlファイルを参照）。
以下は、ボタンを押したときの画面。YAHOOのExampleではloggerで書き出すようになっているが、alertでidを表示するようにした。全てのボタンで、同じようにidが取得できる。

以下にJavascriptを含むhtmlファイルの全文を示す。
styleがhtml内に記載されているが、これらは、ボタンを囲む枠とregendの設定、ボタンの画像と表示位置の調整のためのものである。
Javascriptで作成されるBottumは、指定したコンテナにappendされていく。

Scriptはmodule patternに書き直した。

<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: 400px;
	height: auto;
	border:1px dashed #999999;
}

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

/* 画像だけ表示する場合のスタイル */
.yui-button#pushbutton2 button,
.yui-button#pushbutton5 button, 
.yui-button#pushbutton8 button {
        background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 
        			center center no-repeat;
        text-indent: -4em;
        overflow: hidden;
        padding: 0 .75em;
        width: 2em;
        *margin-left: 4em;   /* IE only */
        *padding: 0 1.75em;  /* IE only */
}
    
/* ADD+画像と表示する場合のスタイル */
.yui-button#pushbutton3 button,
.yui-button#pushbutton6 button, 
.yui-button#pushbutton9 button {
        padding-left: 2em;
        background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 
        			10% 50% no-repeat;
}

</style>

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

YAHOO.EGP.PushBottum = function() {

	var onButtonClick = function (p_oEvent) {

        alert("あなたの押したボタンのidは: " + this.get("id"));
    
    }

	return{
    	init: function() {

	// ---- bottunをinputタグ内の要素から生成する。-----
		
		// 1.bottumタグから生成。「ADD」はタグで記入
		var oPushButton1 
        	= new YAHOO.widget.Button("pushbutton1");
    	// clickハンドラを仕掛ける。
        oPushButton1.on("click", onButtonClick);
        
		// 2.inputタグのtype=bottunから生成。
		// 画像は上のstyleで設定
		// clickのハンドラは、Buttomのコンフィグとして、コンストラクタで指定
		var oPushButton2 
        	= new YAHOO.widget.Button("pushbutton2", 
                	{ onclick: { fn: onButtonClick } }
        	);

		// 3.inputタグのtype=bottunから生成。「ADD」はタグ内。
		//   画像の位置は上のstyleで設定
        var oPushButton3 
        	= new YAHOO.widget.Button("pushbutton3", 
                	{ onclick: { fn: onButtonClick } }
        	);

   	// ---- bottunをinputタグ外の要素で生成する。-----

		// 3.spanタグのinputタグから生成。
        var oPushButton4 
        	= new YAHOO.widget.Button("pushbutton4");
    	// clickハンドラを仕掛ける。
        oPushButton4.on("click", onButtonClick);

		// 5.spanタグのbottumタグから生成。
		// 画像は上のstyleで設定
        var oPushButton5 
        	= new YAHOO.widget.Button("pushbutton5", 
                	{ onclick: { fn: onButtonClick } }
        	);

		// 6.spanタグのbottumタグから生成。
		//   画像の位置は上のstyleで設定
		var oPushButton6 
        	= new YAHOO.widget.Button("pushbutton6", 
                	{ onclick: { fn: onButtonClick } }
        	);        


       	// ---- bottunをmarkupなしで生成する。-----
        
		// 7.クリックイベントのハンドラを外で定義。
        var oPushButton7 
        	= new YAHOO.widget.Button(
                	{ label:"Add", 
                    	id:"pushbutton7", 
                    	container:"pushbuttonsfromjavascript" 
					}
			);
        oPushButton7.on("click", onButtonClick);

		// 8,9.クリックイベントのハンドラをBottunのコンストラクタで定義
		// 画像は上のstyleで設定
        var oPushButton8 
        	= new YAHOO.widget.Button(
                	{ label:"Add", 
                    	id:"pushbutton8", 
                    	container:"pushbuttonsfromjavascript", 
                    	onclick: 
                        	{ fn: onButtonClick } 
                	}
			);
		
		// 9.画像の位置は上のstyleで設定
        var oPushButton9 
        	= new YAHOO.widget.Button(
                	{ label:"Add", 
                    	id:"pushbutton9", 
                    	container:"pushbuttonsfromjavascript", 
                    	onclick: 
                        	{ fn: onButtonClick } 
                	}
		);

    	
		}
	};
}();

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

</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class="yui-skin-sam">
<div id="container">
<p>
buttonの作り方のサンプルです。
</p>

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

    <fieldset id="pushbuttons">
        <legend>Push Buttons</legend>
        <fieldset id="pushbuttonsfrommarkup">
            <legend>From Markup</legend>
            <div>
                <button type="button" id="pushbutton1" 
                			name="button1" value="Add">Add</button>
                <input type="button" id="pushbutton2" 
                			name="button2" value="Add">
                <input type="button" id="pushbutton3" 
                			name="button3" value="Add">
            </div>

            <div>
                <span id="pushbutton4" 
                			class="yui-button yui-push-button">
                	<span class="first-child">
                		<input type="button" name="button4" value="Add">
                	</span>
                </span>
                <span id="pushbutton5" class="yui-button yui-push-button">
                	<em class="first-child">
                		<button type="button" name="button5">Add</button>
                	</em>
                </span>
                <span id="pushbutton6" class="yui-button yui-push-button">
                	<strong class="first-child">
                		<button type="button" name="button6">Add</button>
                	</strong>
                </span>
            </div>
        </fieldset>
        
        <fieldset id="pushbuttonsfromjavascript">
            <legend>From JavaScript</legend>
        </fieldset>

    </fieldset>

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