yui的module
yui，顾名思义，yahoo user interface。给我们提供了强大的视觉表现手段。如果你没有尝试过类似的表现层框架，绝对值得一试。module是yui container系列中的根对象。以下是我在使用过程中碰到迷惑，最后寻得答案的内容。
1、module初始化。
有两种方法。
a、先写好html，然后将html片段的id传入构造函数。[code]<div id="myModule">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
var myModule = new YAHOO.widget.Module("myModule");
[/code]b、全部用javascript来写，事先没有对应的html片段。[code]myModule.setHeader("This is my header content");
myModule.setBody("This is my body content");
myModule.setFooter("This is my footer content");
[/code] 每个module都有一个对应的configuration object ，在module构造的时候自动产生。
有两种方法初始化module的configuration属性。[code]YAHOO.util.Event.onDOMReady(function () {
// Set the initial value of the "visible" property to "false"
var oModule = new YAHOO.widget.Module("mymodule", { visible: false });
// Set the initial value of the "visible" property to "true"
oModule.cfg.queueProperty("visible", true);
oModule.setBody("This is the body");
// Render the Module instance, triggering the application of the "visible"
// configuration property
oModule.render(document.body);
});
[/code]一种是直接在module构造函数中传入属性的字面对象。一种是通过queueProperty。
[color=Red][b]注意，不管是那种情况。这些属性都不会直接应用到module对象，而是在render之后才应用。[/b][/color]
所以更加合适的调整显示的方式，是首先将module初始化成visible=false，然后render。render之后，可以通过 getProperty 和 setProperty 进行属性设置。
这种方法可以将两种创建module的差异显得最小。
这是要强调一下的是render。如果是通过html片段产生的module，因为在DOM中间已经存在，可以省略render的参数，如果是通过javascript产生的module，则必须加入参数。比如render(document.body)，因为render的过程是首先将module node插入到DOM，然后再显示。
关于cfg.setProperty context的问题，yui可以将module显示在特定的一个上下文中（也就是相对于某个HTMLElement）。比如，将module的左上角对准目标div的左上角等等。如果你发现用html片段产生的module正常工作，而用javascript产生的没有正常工作，很可能是我前面提到的原因。只要按照下面的顺序就不会出错。
首先将module初始化成visible=false，然后render，然后通过cfg.setProperty来设置context。然后再show()就可以了。
页:
[1]