学步园

 

 

[yui]YAHOO.widget 示例解析

                                －Written by 浪子@cnblogs.com  (06-08-21)

YAHOO.widget.Module:

Module是Yahoo！标准模块的对象描述方式。

一个Module可以包含3个元素（至少包含一个）：表头，内容，表尾，他们对应的CSS类名分别为“hd,“bd”和“ft”.

例如一个空的Module可以如下表示：

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

一个Module可以通过两种方式来创建.

• 通过挂载已经存在Module对象，动态删除或者新增DOM中的Module对象:

  myModule = new YAHOO.widget.Module("myModule");

• 也可以通过传递一个Module的唯一ID给构造函数，然后设置内容，最后使用render方法描绘Module：

  myDynamicModule = new YAHOO.widget.Module("myDynamicModule");
          myDynamicModule.setBody("Here's some body content.");
          myDynamicModule.render(document.getElementById("dynamic"));
          

四个完整的演示示例：

• 简单挂载已经存在的Module对象：

     Html已经预定义了此Module：

      <div id="mPredefined" class="module">
<div class="hd">Predefined Module Header</div>
<div class="bd">I was created using simple predefined markup.</div>
<div class="ft">Predefined Module Footer</div>
     </div>

     使用yui将此Module和yui创建的Module对象挂接起来：  

      YAHOO.example.module.mPredefined = new YAHOO.widget.Module("mPredefined", {visible:true} );
YAHOO.example.module.mPredefined.render();

• 通过ID动态修改已经存在Module的属性：

          Html已经预定义了此Module： 

     <div id="mChangedAtRuntime" class="module">
<div class="hd">Placeholder Header</div>
<div class="bd">This is only placeholder text in the markup.</div>
<div class="ft">Placeholder Footer</div>
     </div>

     通过ID动态修改内容：

      YAHOO.example.module.mChangedAtRuntime = new YAHOO.widget.Module("mChangedAtRuntime", {visible:true} );
YAHOO.example.module.mChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.module.mChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
YAHOO.example.module.mChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.module.mChangedAtRuntime.render();

• 动态创建Module：

            通过ID动态修改内容：

               YAHOO.example.module.mDynamic = new YAHOO.widget.Module("mDynamic", {visible:true} );               YAHOO.example.module.mDynamic.setHeader("Completely dynamic overlay");
              YAHOO.example.module.mDynamic.setBody("I was created completely at runtime!");
              YAHOO.example.module.mDynamic.render(document.getElementById("mainBody"));//create a new module must specify a container tag

注：Module构造函数：

• Module(id);
• Module(id, {} )；