Yahoo! User Interface Library - Overlay

YUI Overlayとは

Moduleの拡張で、位置決めのための機能が追加されています。

詳しくはhttp://developer.yahoo.com/yui/container/overlay/のオリジナルを読まれるのがよいと思います。

Overlayを使う前準備

必要なのは5つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/container_core-min.js"></script>
<!-- アニメーションを使わなければこれは不要 -->
<script type="text/javascript" src="your install path/animation-min.js"></script>

Overlayで位置を定義

Overlay#center, fixedcenter

center() で画面の真ん中に描画します。さらにfixedcenter: trueでスクロールしてもずーと真ん中にあるようにします。

さらに下の例では表示領域をクリックしたらfixedcenter プロパティーを反転させるようにEventを追加しています。

<div id="overlay1" style="border: 1px solid gray; padding: 3px;"></div>

<script type="text/javascript">
var overlay1 = new YAHOO.widget.Overlay("overlay1");
overlay1.center();
overlay1.cfg.queueProperty("fixedcenter", true); 
overlay1.setBody("真ん中で表示されていると思います");
overlay1.setFooter("ここをクリックすると固定を解除、また固定することができます");
overlay1.render();
var toggle = function () {
    this.cfg.setProperty("fixedcenter", !this.cfg.getProperty("fixedcenter"));
}
YAHOO.util.Event.addListener("overlay1", "click", toggle, overlay1, true);
</script>

hide()  show()  ←をクリックするとサンプルが見られます

YAHOO.util.EventについてはEventを参考にしてください。

X, Y で位置の指定、context による位置の指定

X, Y で位置を指定することも可能です。X は"left" style property, Yは"top" style propertyを指定するのと同じです。

また、他のモジュールにコーナーを合わせるといったこともcontextを指定することで可能です。指定方法は、cfg.setProperty("context", [Element, tl|tr|bl|br, tl|tr|bl|br])で、第2,3引数の意味は tl (top left), tr (top right), bl (bottom left), br (bottom, right)です。

下の例では、overlay2を現在地+10 の場所に表示し、overlay2の右下角にoverlay3の左上角を合わせるように表示しています。

<div id="overlay2" style="border:1px solid black; padding: 3px;"></div>
<div id="overlay3" style="border:1px solid black; padding: 3px;"></div>

<script type="text/javascript">
var overlay2 = new YAHOO.widget.Overlay("overlay2", {
    x: YAHOO.util.Dom.getX("overlay2") + 10,
    y: YAHOO.util.Dom.getY("overlay2") + 10
});
overlay2.setBody("位置の指定をX, Y で行っています");
overlay2.render();

var overlay3 = new YAHOO.widget.Overlay("overlay3");
overlay3.cfg.setProperty("context", ["overlay2", "tl", "br"]);
overlay3.setBody("contextでコーナーを合わせる");
overlay3.render();
</script>