Container Family: The Module Control
このExampleを見て、Menuの前にやればよかったと思った。
ここには、以下のような重要な事項が書かれている。
Container familyは、YAHOO.widget.Moduleをそのベースクラスとしている。
・・・
YAHOO.widget.Moduleは、UIコントロールの基本モジュール(building block)となっているので、このサブクラスを使う際に、このExampleが役に立つ。
・・・
デフォルトでは、Moduleには、pre-definedなstyleはない。
Menuの祖先であるYAHOO.widget.Overlayのスーパークラスが、このModuleだからである。
また、
- Moduleのヘッダー部のclassはhd。
- Moduleのボディー部のclassはbd。
- Moduleのフッター部のclassはft。
とあり、特に、これまでbdはよく出てきている。
ここでは、markupからModuleインスタンスを生成する方法と、Javascriptで生成する方法の2種類が照会されている。
サンプルの初期画面は以下。module1がmarkupから、module2がjavascriptで生成したModuleとなる。
以下は、module1のボタンを押して、内容を表示させたものである。
以下に、ソースコードの全文を示す。
YUIのExampleでは、module1,2共に、YAHOO.example.containerというNameSpace内においているが、Moduleパターンに書き直して、スペースを分けてみた。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> body { margin:0; padding:0; } </style> <link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="scripts/yui/container/container-min.js"></script> <style type="text/css" id="defaultstyle"> #container { margin: 2px; padding: 3px; width: 400px; height: auto; border:1px dashed #999999; } /* YAHOO.widget.Moduleの基本構成では、YUIのスキンが当たらないので、 設定する。 */ .yui-module { border:1px dotted black;padding:5px;margin:10px; display:none; } .yui-module .hd { border:1px solid red;padding:5px; } .yui-module .bd { border:1px solid green;padding:5px; } .yui-module .ft { border:1px solid blue;padding:5px; } </style> <script type="text/javascript"> // // モジュールパターンで実装する。 // // module1はYAHOO.example.container.ModuleControl内のオブジェクト // module2はYAHOO.example.container内のオブジェクト // とする。 // // YAHOO --- example.container --- ModuleControl --- module1 // | // - module2 YAHOO.namespace("example.container"); // YAHOO.example.containerにModuleControlを追加する。 YAHOO.example.container.ModuleControl = function() { var Event = YAHOO.util.Event; var Dom = YAHOO.util.Dom; var module1; return{ init: function() { // module1は、YAHOO.example.container.ModuleControlのスコープなので // thisが指定できる。 this.module1 = new YAHOO.widget.Module("module1", { visible: false }); this.module1.render(); YAHOO.example.container.module2 = new YAHOO.widget.Module("module2", { visible: false }); YAHOO.example.container.module2.setHeader("Start of Module #2"); YAHOO.example.container.module2.setBody("This is a dynamically generated Module."); YAHOO.example.container.module2.setFooter("End of Module #2"); YAHOO.example.container.module2.render(); Event.addListener("show1", "click", this.module1.show, this.module1,true); Event.addListener("hide1", "click", this.module1.hide, this.module1,true); Event.addListener("show2", "click", YAHOO.example.container.module2.show, YAHOO.example.container.module2, true); Event.addListener("hide2", "click", YAHOO.example.container.module2.hide, YAHOO.example.container.module2, true); } }; }(); //DOMが完全にloadされたら、サンプルを初期化する。 YAHOO.util.Event.onDOMReady( //DomReadyイベントで発火するハンドラ YAHOO.example.container.ModuleControl.init, //ハンドラに渡すオブジェクト(関数) YAHOO.example.container.ModuleControl, //ハンドラは、上記のオブジェクトのスコープをもつ。 true ); </script> </HEAD> <!-- class=" yui-skin-sam"の指定が必要 --> <BODY class="yui-skin-sam"> <div id="container"> <p> YAHOO.widget.Moduleのサンプルです。 </p> <div> <button id="show1">Show module1</button> <button id="hide1">Hide module1</button> </div> <div id="module1"> <!-- moduleのヘッダー部 --> <div class="hd">(hd;header)Module #1 from Markup</div> <!-- moduleのボディー部 --> <div class="bd">(bd;body) これはマークアップから作られたモジュールです。</div> <!-- moduleのフッター部 --> <div class="ft">(ft;fotter) End of Module #1</div> </div> <div id="module2"></div> <div> <button id="show2">Show module2</button> <button id="hide2">Hide module2</button> </div> </form> </div> </BODY> </HTML>