スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Yahoo! UI Library(YUI Library)を使ったリンクボタン

 Yahooというだけで避けていたYahoo! UI Library(YUI Library)ですが調べてみると結構便利そう。ということで少しずつ試してみようと思います。YUIとはJavaScriptのライブラリのひとつです。prototypeとかdojoみたいなものですね。 今回は簡単なリンクボタンを設置してみます。

 設置は非常に簡単。まずは外部ファイルを読み込みます。

<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"
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。