02
24
Yahoo! UI Library（YUI Library）を使ったリンクボタン
2008-02-24設置は非常に簡単。まずは外部ファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/button/assets/skins/sam/button.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/button/button-min.js"></script>body部分は下記のようになります。
<script type="text/javascript">
YAHOO.example.init = function () {
var oLinkButton1 = new YAHOO.widget.Button({ type: "link", id: "linkbutton1", label: "レッツFC2ブログ！", href: "http://weboook.blog22.fc2.com/", container: "linkbuttonsfromjavascript" });
} ();
</script>
<div id="linkbuttonsfromjavascript" class=" yui-skin-sam"></div>
各パラメータを簡単に解説してみます。詳しくはYahoo! UI Library: Button（英語ページ）をご覧ください。
ボタンの種類を指定。今回はリンクボタン
type: "link"
リンク先を指定
href: "http://weboook.blog22.fc2.com/"
各ボタンごとにidを指定
id: "linkbutton1",
ボタンのタイトル
label: "レッツFC2ブログ！"
表示するdivのidを指定
container: "linkbuttonsfromjavascript"
type: "link"
リンク先を指定
href: "http://weboook.blog22.fc2.com/"
各ボタンごとにidを指定
id: "linkbutton1",
ボタンのタイトル
label: "レッツFC2ブログ！"
表示するdivのidを指定
container: "linkbuttonsfromjavascript"
