Button Control: Link Buttons

Ajax Javascript YUI Button

先の例「Button Control: Push Buttons」では、ボタンクリックでハンドラーを動かしたが、このExampleでは、ボタンクリックでLink先に飛ばす（Link Buttomとはこの意味）。

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

この場合も、bodyタグ内のmarkupからボタンを形成する方法と、javascript（YUIのモジュールで）で生成して、指定したコンテナに追加していく方法の２種類がしめされている。

サンプルでは、最後の（6番目の)ボタンについて、targetを_blankとして新規Window（Tab Browser使用の場合は新規Tab）を開くようにした。
Buttonのコンフィグパラメータについては、APIドキュメントのConfiguration Attributesを参照。

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

/* 画像だけ表示する場合のスタイル */
#linkbutton2 a,
#linkbutton5 a {
	background: url(http://developer.yahoo.com/yui/examples/button/assets/yahoo.gif) center center no-repeat;
	text-indent: -5em;
	overflow: hidden;
	padding: 0 1em;
	*margin-left: 5em;   /* IE only */
	_padding: 0 2.25em; /* IE 6 and IE 7 (Quirks Mode) */
}

/* 画像＋YAHOO!と表示する場合のスタイル */
#linkbutton3 a, 
#linkbutton6 a {
	padding-left: 2.25em;
	background: url(http://developer.yahoo.com/yui/examples/button/assets/yahoo.gif) 10% 50% no-repeat;
}
</style>

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

YAHOO.EGP.LinkBottum = function() {

	return{
    	init: function() {

	// ---- bottunをinputタグ内の要素から生成する。-----
		
            var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
            var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
            var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");  

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

        	var oLinkButton4 = new YAHOO.widget.Button(
                	{ type: "link", 
                    	id: "linkbutton4", 
                    	label: "Yahoo!", 
                    	href: "http://www.yahoo.com", 
                    	container: "linkbuttonsfromjavascript" }
                    );
            
        	var oLinkButton5 = new YAHOO.widget.Button(
                	{ type: "link", 
                    	id: "linkbutton5", 
                    	label: "Yahoo!", 
                    	href: "http://www.yahoo.com", 
                    	container: "linkbuttonsfromjavascript" }
                	);
            
        	var oLinkButton6 = new YAHOO.widget.Button(
        			{ type: "link", 
                    	id: "linkbutton6", 
                    	label: "Yahoo!", 
                    	href: "http://www.yahoo.com",
                    	target: "_blank", 
                    	container: "linkbuttonsfromjavascript" }
                	);
	}
	};
}();

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

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
LinkButtonの作り方のサンプルです。
</p>
<div id="button-examples">
    <div id="linkbuttonsfrommarkup">
        <h2>From Markup</h2>
        
        <a id="linkbutton1" href="http://www.yahoo.com">Yahoo!</a>
        
        <span id="linkbutton2" class="yui-button yui-link-button">
        	<span class="first-child">
        	<a href="http://www.yahoo.com">Yahoo!</a>
        	</span>
        </span>
        
        <span id="linkbutton3" class="yui-button yui-link-button">
        	<em class="first-child">
        		<a href="http://www.yahoo.com">Yahoo!</a>
        	</em>
        </span>
    </div>
    
    <div id="linkbuttonsfromjavascript">
        <h2>From JavaScript</h2>
    </div>

</div>

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