スポンサードリンク

Yahoo! User Interface Library - Panel

YUI Panelとは

Overlayの拡張で、OSのウィンドウみたいなDHTMLを扱うための機能を提供します。

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

Panelを使う前準備

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

<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/animation-min.js"></script>
<script type="text/javascript" src="your install path/dragdrop-min.js"></script>
<script type="text/javascript" src="your install path/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="your install pathcontainer.css" />

Panelを表示する

YAHOO.widget.Panel

デフォルトの状態でPanel を表示してみます。

var panel1 = new YAHOO.widget.Panel("panel1");
panel1.setHeader("ヘッダー");
panel1.setBody("ボディー");
panel1.setFooter("フッター");
panel1.render();

デフォルトの状態で、closeボタンと、ヘッダーの部分をつかんでドラッグを行うことが可能なようです。

オプション

`modal`	透明なマスクが他の要素を操作できなくする
`constraintoviewport`	表示位置を固定します。ドラッグしても現在のウィンドウ以上の場所にドラッグできなくなります。
`close`	ヘッダー部分にパネルを閉じるためのアイコンが表示されます
`draggable`	ヘッダー部分を使ってドラッグできるようになります。
`underlay`	パネルの下に効果をつけます。"shadow", "matte", "none" が選択でき、デフォルト"shadow"

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

var panel2 = new YAHOO.widget.Panel("panel2", {
    visible: false,
    close: true,
    draggable: true,
    constraintoviewport: false,
    underlay:"none",
    modal: true,
    width: "100px",
    height: "100px"
});
panel2.setHeader("&nbsp;");
panel2.setBody("クローズすると元に戻ります");
panel2.render();

YAHOO.util.Event.addListener("show", "click", panel2.show, panel2, true);

show

メールアドレス:
コメント^*: