×
Namespaces

Variants
Actions

如何在WRT widget应用中使用折叠控件(Accordion)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
文章
dougcn 在 06 Apr 2008 创建
最后由 hamishwillee 在 09 May 2012 编辑

Needs-update.png本文需要更新: 如果您发现这篇文章有用,请修复下面的问题,然后从文章中删除 {{ArticleNeedsUpdate}} 模板,以消除此警告。

原因: hamishwillee (20 Oct 2011)
Duplicate of Web Runtime WidgetでAccordionを使用する方法. Articles should be merged.

如何在WRT widget应用中使用折叠控件(Accordion)

Contents

什么是折叠控件(Accordion)

折叠控件(Accordion),这里是指一种Web控件,它提供多个格子,每个格子可以显示一些内容,但一次仅显示一个格子。一般每个格子有一个标题和容器。当某个格子被打开时其它的格子将合闭或被折叠起来。

在其它许多领域,比如 Windows XP Explorer的左边面板及一些Web页面,我们已经看到过这样的折叠控件。现在该是在WRT widget中使用它的时候了。

在本文中,我将介绍一个基于Prototype库的折叠控件Accrodion实现,并学习如何在我们的WRT widget中使用它。下面介绍如何安装这个库及如何使用。

屏幕截图

Accordiondemo screenshot1.jpgAccordiondemo screenshot2.jpg

安装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的作者所写的文章:

的“How to use”部分。

下载样例

下载样例widget: File:AccordionDemo.zip. 安装时,需要将.zip后缀更改为.wgz。

对于最新版,请到这里下载:

 http://code.google.com/p/prototypewrt/downloads/list

参考

  • Prototype JavaScript HomePage [1]
  • Scriptaculous JavaScript HomePage [2]
  • Accordion JavaScript HomePage [3]
  • 下载WRT例子应用程序 [4]
This page was last modified on 9 May 2012, at 08:05.
56 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×