「Yahoo! User Interface Library」を、ちょっといじってみました。
2007年9月28日 18:20 | Comment (0) | TrackBack (0)
ご存じの方も結構いらっしゃるかと思いますが、遅ればせながら「Yahoo! User Interface Library」（以下「YUI」）をダウンロードしてみました。
YUIとは、DHTMLやAJAXを使ったライブラリー集のようなもので、その種類は膨大。
ダウンロード時に付属するサンプル集をちょっと見た感じでは、「タブ」や「階層メニュー」などのWEBサイトでよく見る基本的なものから、「カレンダー」、「カラーピッカー」、「リッチテキストエディタ」、「ソート機能を持つテーブル」といったアプリケーション的な要素の高いものまで、多彩に用意されています。
早速付属しているサンプルを元に、さらにサンプルを作ってみました（笑）。第一印象としては、使い方も比較的簡単そうな感じです。
基本的には、headタグ内に外部スクリプト指定をして、body内にid要素を配置→さらにConfigのような役割を持つスクリプトを記述してあげれば、とりあえず動く（？）ようです。後は「見た目」の部分をCSSで割り当ててあげればokでしょうか？（Webアプリ的なものを作る場合は、この後の中の動作部分では苦労しそうですが・・・）
とりあえず、使用用途のありそうな（？）「ソート機能を持つテーブル」の超基本的な設定＆解説をご紹介（もちろんサンプルを元にして・・・）。
まずは、テーブル内の値を収納するjsファイルをひとつ作ります。
ここでは、サンプル通りにファイル名を「data.js」として話を進めます。
「data.js」は、以下のようなルールで作成します。
記述する順番が、そのままデフォルトの行順となります。
次に表示用のHTMLの設定についてですが、まず使用するスクリプト・CSSなどをコピーします。
build/fonts/fonts-min.css
build/datatable/assets/skins/sam/datatable.css
build/utilities/utilities.js
build/datasource/datasource-beta.js
build/datatable/datatable-beta.js
上記5つはhead内に外部スクリプト・CSSとして設置します。
bodyには表示させたい場所に
を設置し、その下に外部スクリプトとして、先ほど作成した「data.js」を置きます。
さらにその下には、config的な役割をもつ設定スクリプトを置きます。
以上で設置完了です！
これを元に作成したサンプルはこちらでご覧になれますので、参考までに（というかほとんどYUIのサンプル通りですが...）
→「Yahoo! User Interface Library」
YUIとは、DHTMLやAJAXを使ったライブラリー集のようなもので、その種類は膨大。
ダウンロード時に付属するサンプル集をちょっと見た感じでは、「タブ」や「階層メニュー」などのWEBサイトでよく見る基本的なものから、「カレンダー」、「カラーピッカー」、「リッチテキストエディタ」、「ソート機能を持つテーブル」といったアプリケーション的な要素の高いものまで、多彩に用意されています。
早速付属しているサンプルを元に、さらにサンプルを作ってみました（笑）。第一印象としては、使い方も比較的簡単そうな感じです。
基本的には、headタグ内に外部スクリプト指定をして、body内にid要素を配置→さらにConfigのような役割を持つスクリプトを記述してあげれば、とりあえず動く（？）ようです。後は「見た目」の部分をCSSで割り当ててあげればokでしょうか？（Webアプリ的なものを作る場合は、この後の中の動作部分では苦労しそうですが・・・）
とりあえず、使用用途のありそうな（？）「ソート機能を持つテーブル」の超基本的な設定＆解説をご紹介（もちろんサンプルを元にして・・・）。
まずは、テーブル内の値を収納するjsファイルをひとつ作ります。
ここでは、サンプル通りにファイル名を「data.js」として話を進めます。
「data.js」は、以下のようなルールで作成します。
YAHOO.example.Data = {
テーブル名: [
{項目1:"値1", 項目2:"値1-2"}, // 必要な分だけ、カンマ区切りで追加します。
{項目1:"値2", 項目2:Null} // 値が無いものは「Null」と記述します。
]
}
記述する順番が、そのままデフォルトの行順となります。
次に表示用のHTMLの設定についてですが、まず使用するスクリプト・CSSなどをコピーします。
build/fonts/fonts-min.css
build/datatable/assets/skins/sam/datatable.css
build/utilities/utilities.js
build/datasource/datasource-beta.js
build/datatable/datatable-beta.js
上記5つはhead内に外部スクリプト・CSSとして設置します。
<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="build/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="build/utilities/utilities.js"></script> <script type="text/javascript" src="build/datasource/datasource-beta.js"></script> <script type="text/javascript" src="build/datatable/datatable-beta.js"></script>
bodyには表示させたい場所に
<div id="basic"></div>
を設置し、その下に外部スクリプトとして、先ほど作成した「data.js」を置きます。
<script type="text/javascript" src="data.js"></script>
さらにその下には、config的な役割をもつ設定スクリプトを置きます。
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = new function() {
var myColumnDefs = [
{key:"項目1", sortable:true, resizeable:true}, // 各項目を順番に入れていきます。
{key:"項目2", sortable:true, resizeable:true}
// sortableはこの列からソートを行うかを指定できます。
// resizeableはセルを左右に伸縮させるかを指定できます。
// 両項目ともに、「させる」場合はtrue、「させない」場合はfalseを記述します。
];
this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.テーブル名);
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
this.myDataSource.responseSchema = {
fields: ["項目1","項目2"] // ここでも各項目を順番に入れていきます。
};
this.myDataTable = new YAHOO.widget.DataTable("basic",
myColumnDefs, this.myDataSource, {caption:"tableタグのcaption的な要素を持ちます。"});
};
});
</script>
以上で設置完了です！
これを元に作成したサンプルはこちらでご覧になれますので、参考までに（というかほとんどYUIのサンプル通りですが...）
→「Yahoo! User Interface Library」
