`
shake863
  • 浏览: 673636 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

YAHOO.widget 示例解析

    博客分类:
  • JS
阅读更多

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, {} );



分享到:
评论

相关推荐

    Widget3.1中文技术手册

    XML是一种标记语言,具备良好的结构化特性,易于解析和理解。 - 每个对象(如`&lt;text&gt;`)都有对应的结束标签(如`&lt;/text&gt;`)。 - 属性如位置、对齐方式等均在这些对象的结构中定义。 - **对象命名规则**:对象名称...

    用YUI做了个标签浏览效果

    下面对示例代码进行逐行解析: 1. **HTML结构定义**: ```html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;title&gt;TabView Test ...

    SR-widget-chart

    9. **文档和示例**:一个完整的项目通常会包含详细的文档,解释如何使用和配置Widget,以及一些示例代码帮助快速入门。 以上就是"SR-widget-chart"项目可能涉及的关键技术点和知识领域,每个点都可以深入学习,提升...

    新版Android开发教程.rar

    MSN 、雅虎通和 GTALK ;与谷歌日历同步;与 Android Market 联机;支持谷歌 “ 街景 ” 服务;包装盒内附 数据工具包。 更多信息 https://sites.google.com/a/android.com/opensource/release-features Android ...

    extjs-ajax

    - **技术背景**: 该框架最初基于 Yahoo! UI Library (YUI) 开发,后由 Jack Slocum 进一步改进和完善,形成了独立且功能更为全面的 ExtJS。 - **跨平台性**: 由于其与服务器端技术无关的设计理念,使得 ExtJS 可以...

    YUI 3 Cookbook

    ### YUI 3 Cookbook 关键知识点解析 #### 一、YUI 3 概述与书籍价值 **YUI 3** 是一个由雅虎开发的JavaScript库,它提供了丰富的功能来帮助开发者创建高质量的Web应用程序。这本书《YUI 3 Cookbook》由Evan Goer...

    面向 Java 开发人员的 Ajax 探索 Google Web Toolkit

    ### 面向Java开发人员探索Google Web Toolkit:深度解析与应用 Google Web Toolkit(GWT)是一款由Google推出的开源框架,专为Java开发者设计,旨在简化和加速Web应用程序的开发过程。它允许开发者使用Java语言编写...

Global site tag (gtag.js) - Google Analytics