.png)
はじめに
今回は、プログラム作成に、グラフィカルなユーザインタフェースを提供するウィジェット（Widgets）について説明して行きたいと思います。ウイジェットには、表などをページにポップアップさせるモジュールOverlay、スライダーを表示するモジュールSlider、タブパネルを可能にするインターフェースを提供するモジュールTabviewがあります。
対象読者
Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。
必要な環境
HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。
ポップアップ
ページ作成時、一時的に表などをポップアップさせたいときがあると思います。このような時便利な、ポップアップをサポートするモジュールOverlayの説明を行ないます。
ポップアップで表示した表をボタンで表示／非表示にする例題を示します。以下が例題起動時の画面です。
以下のリスト1を見てください。
YUI().use("overlay", function(Y) { //（1）
var xy = Y.one("#canvas").getXY();
var overlay = new Y.Overlay({ //（2）
srcNode:"#overlay",
width:"15em",
xy:[xy[0] + 50, xy[1] + 80]
});
overlay.render(); //（3）
Y.on("click", function(e) {
overlay.show(); //（4）
}, "#show");
Y.on("click", function(e) {
overlay.hide(); //（5）
}, "#hide");
});
</script>
</head>
<body>
<h4>overlay</h4><br>
<div id="canvas">
<br>
<button type="button" id="show">表示</button>
<button type="button" id="hide">消す</button>
<br><br>
YUI3はYahoo!が提供する、<br>
JavaScriptとCSSのライブラリーです。<br>
現在バージョンは3.11です。<br>
ライブラリーをダウンロードして使うことも、<br>
直接URLを指定してつかうことも出来ます。<br>
<div id="overlay">
<div id="hyou">YUI3について</div>
<div id="hyou">
（1）モジュールの形で提供されています。<br>
（2）コアモジュール／ユーティリティモジュールがあります。<br>
</div>
</div>
</div>
</body>
（1）でモジュールoverlayを指定しています。（2）でoverlayの表示の指定を行っています。srcNodeで表示する対象を指定して、widthで幅を15文字に指定しています。xyは位置指定です。（3）render()でメモリー上に作成し表示します。（4）show()は、render()で作成／表示された内容が非表示の時、表示させます。（5）hide()で非表示になります。他に表示場所を指定するset()、表示場所を移動するmove()などがあります。書き方をリスト2に示します。
overlay.set("x",150);
overlay.set("y",250);
overlay.set("xy",[150,250]);
overray.move(150,250);
overray.move([150,250]);
.set()はx,y,xyを指定して、値を指定します。.move()は、(150,250)か([150,250])のいずれかで位置を指定します。
