This page was last modified 07:04, 6 April 2008.
如何在WRT widget应用中使用折叠控件（Accordion）
From Forum Nokia Wiki
如何在WRT widget应用中使用折叠控件（Accordion）
Contents |
什么是折叠控件（Accordion）
折叠控件（Accordion），这里是指一种Web控件，它提供多个格子，每个格子可以显示一些内容，但一次仅显示一个格子。一般每个格子有一个标题和容器。当某个格子被打开时其它的格子将合闭或被折叠起来。
在其它许多领域，比如 Windows XP Explorer的左边面板及一些Web页面，我们已经看到过这样的折叠控件。现在该是在WRT widget中使用它的时候了。
在本文中，我将介绍一个基于Prototype库的折叠控件Accrodion实现，并学习如何在我们的WRT widget中使用它。下面介绍如何安装这个库及如何使用。
屏幕截图
安装Accordion库及其依赖项
Accordion.js 依赖于Prototype.js库及Scriptaculous.js库（准确的讲是effect.js）。 下载上面提到的所有库（见后面的“参考”部分），然后在你的WRT widget应用的主页面文件中写入下面的代码块：
<script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/accordion.js"></script>
我们也添加其它两个只用于本例的文件： demo.js和demo.css。如下：
<link rel="stylesheet" type="text/css" href="demo.css" /> <script type="text/javascript" src="demo.js"></script>
这两个文件用于定义折叠控件的风格，和动态行为。你可以在本例的源代码中找到它们。
注意： 本例中的Prototype.js库是1.5版，而不是最新的1.6版。
在WRT widget中使用折叠控件（Accordion）
本例介绍一个垂直的折叠控件，这也是常见形式。你可以在其中定义嵌套的水平折叠控件或垂直折叠控件。
使用垂直的折叠布局
在主页面中，定义一个垂直的折叠容器，其布局大致如下：
<div id="vertical_container"> <h1 class="accordion_toggle">title for pane 1</h> <div class="accordion_content"> content for pane 1 </div> <h1 class="accordion_toggle">title for pane 2</h> <div class="accordion_content"> content for pane 2 </div> // // more accordion panes. // ... </div>
其中，vertical_container是容器，用于存放所有的格子，accordion_toggle用于定义折叠控件的格子标题，accordion_content用于定义该格子的内容。根据需要，你可以增加多个格子。
在垂直格子中使用水平的折叠控件（水平嵌套）
在垂直格子中使用水平的折叠控件，即嵌套水平的折叠控件。使用下面的代码块：
<div id="vertical_container"> <h1 class="accordion_toggle">Use Prototype.js(Horizontal Nested)</h1> <div class="accordion_content"> <h2>使用水平折叠控件</h2> <div id="horizontal_container" > <h3 class="horizontal_accordion_toggle">title for innner pane1</h3> <div class="horizontal_accordion_content"> content for inner pane 1 </div> // other panes here // ... </div> </div>
上例中，horizontal_container用于定义水平折叠控件，它包含于于外部的垂直折叠控件的某个格子中。 horizontal_accordion_toggle用于定义水平折叠控件的格子的标题。horizontal_accordion_content用于定义水平折叠控件的格子的内容。 当然你可以定义多个水平格子。
在垂直格子中再使用垂直的折叠控件（垂直嵌套）
在垂直格子中再次使用垂直控件，即嵌套垂直的折叠控件。使用下面的代码块：
<h1 class="accordion_toggle">Use Prototype.js(Vertical Nested)</h1> <div class="accordion_content"> <div id="vertical_nested_container" > <h3 class="vertical_accordion_toggle">title for inner pane 1</h3> <div class="vertical_accordion_content"> content for inner pane 1 </div> </div> // other panes here // ... </div>
上例中，vertical_nested_container用于定义垂直嵌套的折叠控件。它包含于外部的垂直折叠控件的某个格子中。vertical_accordion_toggle用于定义嵌套的垂直格子的标题及风格。 vertical_accordion_content用于定义嵌套的垂直格子的内容及风格。当然你可以定义多个嵌套的垂直格子。
更多信息
请参考Accordion.js的作者所写的文章：
http://www.stickmanlabs.com/accordion/.
的“How to use”部分。
下载样例
下载样例widget: Image:AccordionDemo.zip. 安装时，需要将.zip后缀更改为.wgz。
对于最新版，请到这里下载：
http://code.google.com/p/prototypewrt/downloads/list
