スポンサードリンク

Yahoo! User Interface Library - Module

YUI Moduleとは

Container Family(Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog)の基本クラスです。Module単体ではあまり使わないかもしれいですが、Tooltip, Panel, Dialog, SimpleDialogを使う上で知っておいたほうがよいです。

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

Moduleを使う前準備

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

<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>

Moduleを使う

基本構成

これがModuleの基本構成です。Moduleを使うとヘッダー(hd)，ボディー(bd)，フッター(ft)を持ったdivが描かれます。これは、Moduleを親クラスに持つ他のContainer Familyで共通です。

<div id="id">
  <div class="hd"></div>
  <div class="bd"></div>
  <div class="ft"></div>
</div>

Moduleの初期化

Moduleを使って描画してみます。

<div id="module1">これをModuleにする</div>

<script type="text/javascript">
var module1 = new YAHOO.widget.Module("module1");
module1.setHeader("headerを設定");
module1.setBody("bodyを設定");
module1.setFooter("footerを設定");
module1.render();
</script>

上のように書いておくと、したのようなHTMLが描画されます。

<div style="display: block;" class="module" id="module1">
  <div class="hd">headerを設定</div>
  これをModuleにする
  <div class="bd">bodyを設定</div>
  <div class="ft">footerを設定</div>
</div>

↓実例

これをModuleにする

Module#hide(), show(), destroy()

Moduleには表示にかかわる便利なmethod が定義されています。

<div id="module2" style="border:1px solid black;">
destroyを押すと完全に表示できなくなります。
</div>
<a href="javascript:;" id="module2_hide">hide()</a> 
<a href="javascript:;" id="module2_show">show()</a> 
<a href="javascript:;" id="module2_destroy">destroy()</a> 

<script type="text/javascript">
var module2 = new YAHOO.widget.Module("module2", { visible:false });
// コンストラクタでもcfgで設定してもよい
module2.cfg.queueProperty("visible", false);
module2.render();

YAHOO.util.Event.addListener("module2_hide", "click", module2.hide, module2, true);
YAHOO.util.Event.addListener("module2_show", "click", module2.show, module2, true);
YAHOO.util.Event.addListener("module2_destroy", "click", module2.destroy, module2, true);
</script>

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

destroyを押すと完全に表示できなくなります。

hide() show() destroy()

なんとなくdisplay='none', display='block' をやっているだけであまり意味なさそうに見えますが、これはあくまでも既定クラスですので、こういうもんだと思ってください。サブクラスはこれに色々な機能がついてきます。

注意点

このページを作成してから動作確認を行っているとfirefox2.0では動作してたのに、IE6では表示できないという問題が発生しました。色々試した結果、初めはページの途中に<script>タグを埋め込んでいたのを、<head>タグに持っていき、なおかつonLoadで呼び出してやることによって、IE6, firefox2.0 で動作するようになりました。(yui.0.12)での出来事

このページでは↓のようにしてjavascriptを書いている

<head>
<script type="text/javascript">
var init = function() {
    var module1 = new YAHOO.widget.Module("module1");
    module1.render();
    ...
    var module2 = new YAHOO.widget.Module("module2", { visible:false });
    module2.render();
    ...
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>

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