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可以通过两种方式来创建.
o 通过挂载已经存在Module对象,动态删除或者新增DOM中的Module对象:
myModule = new YAHOO.widget.Module("myModule");
o 也可以通过传递一个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, {} );
分享到:
相关推荐
Yahoo! Widget工具是由Yahoo!所推出的一款免费桌面应用程序平台,是一种运用了Javascript技术的开放源码平台,支持Windows和MacOS X...通过这些Widget工具,您可以连接雅虎的网络服务,取得您所需要的各种个性化信息。
yahoo widget for search.
Yahoo.Yui.Compressor.dll文件下载,解决找不到Yahoo.Yui.Compressor.dll的问题 Yahoo.Yui.Compressor.dll控件常规安装方法(仅供参考): 一、如果在运行某软件或编译程序时提示缺少、找不到Yahoo.Yui....
YAHOO.util.Dom 文档,对其UI控件进行了详细说明
YAHOO.util.Dom 操作 比较详细的说明,一个很好的参考手册
制作widget的入门级别书目~可供参考~雅虎widget
Yahoo.Yui.Compressor引擎是目前最稳定的压缩引擎出自于雅虎。 但是雅虎仅提供java版的很是不方便。 由于经常需要压缩JS所以本人开发了这个绿色小工具(单文件)奉献给大家。 如果建议可以留言
雅虎搜索引擎的部分源代码,希望对大家有用!
Yahoo Widget Engine原名是Konfabulator,一个迷你型的... Widget Engine 3.0引擎集成了9个新的、常用的桌面应用程序,主要的应用程序包括:雅虎地图程序、照片显示程序、雅虎搜索程序、雅虎邮件程序、雅虎记事本程序等等.
Learning.the.Yahoo.User.Interface.library
Packt.Yahoo.User.Interface.2.x.Cookbook
Wrox.Yahoo.Maps.Mashups.Feb.2007 pdf 英文版
Konfabulator Reference 4.5
本资源教你如何通过一系列设置后启用outlook 收发来自yahoo.cn 和gmail.com的邮件。
yahoo widget4.5引擎及开发文档 yahoo widget4.5引擎及开发文档 yahoo widget4.5引擎及开发文档 yahoo widget4.5引擎及开发文档
php-面试题之雅虎.pdf
李开复:马云不会真的收购雅虎.docx
雅虎.docx
雅虎天气预报WIDGET代码,可搜索世界各大城市,用于android 手机,整体可以运行,还有问题,高手们多指教指教啊。
yahoo widget class library