Yahoo! UI Libraryとは？

Yahoo! UI Libraryは米国Yahoo!が開発したAjaxライブラリです。Yahoo! UI Libraryは名前が示すように主にUI (ユーザーインタフェース) の機能を多く持っています。UI機能という点では他のAjaxライブラリとは比較にならないほど数が多く高機能です。本稿で紹介する「Panel」は、ブラウザ上にマウスでドラッグ可能な表示領域を作成できるライブラリで、ユーザーがコンテンツを自分の好きな位置に配置させることができます。

「Panel」のサンプル

まず、Yahoo! UI Libraryを入手しましょう(*1)。Yahoo! UI Libraryのダウンロードは以下のURLにある[Download YUI]のボタンをクリックします。

Webサイトにアクセスして、[Download YUI]ボタンでダウンロード

ダウンロードしたファイルはZIP形式になっているので解凍します。解凍するとbuild, docs, examplesフォルダとREADMEファイルがあります。今回必要になるファイルは下図に示すハイライトされたファイルです。

解凍後の状態

これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは下図のフォルダ構成になっています。

本稿での配置

*1ここではYahoo! UI Libraryの最新版であるバージョン2.5.1で説明します。