YUI3入門

javascript YUI3

YUI3とは

Yahoo User Interface Library3の略称。
yahoo謹製のjavascriptのライブラリ群。

参考サイト

公式サイト
http://developer.yahoo.com/yui/3/
サンプル
http://developer.yahoo.com/yui/3/examples/
APIリファレンス
http://developer.yahoo.com/yui/3/api/
使い方とか機能紹介とか
http://codezine.jp/article/detail/4539
http://codezine.jp/article/detail/4832
http://codezine.jp/article/detail/5005

ダウンロードとインストール

公式サイトのトップにダウンロードリンクが出ているので、そこからダウンロードする。
3つのパッケージの中から選べるので、真ん中のFull Developer Kitを選択する。
ダウンロードしたファイルを展開するとyuiというフォルダがあるので、
それをwebアプリケーションのjavascriptファイルとかを置いてある場所にそのまま置けばインストール完了。

とりあえず動かす

アラートウィンドウを出してみる。
最初に書いた機能紹介のページなどに詳細な解説が載っているので、ここでは省略。


ここでのフォルダ構成は以下のようにする。
webアプリドキュメントルート

--yui
--index.html

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>YUI3サンプル1</title>

<!-- YUI3のライブラリ取り込み -->
<script src="yui/build/yui/yui.js"></script>
<!-- YUI3の処理記述 -->
<script type="text/javascript">
YUI().use('node', 'event', function(Y){
	// 画面のロード完了イベントハンドラでアラートウィンドウを出す
	Y.on('load', function(){
		alert('onLoadイベントハンドら');
	});
});
</script>
</head>

<body>
</body>
</html>