WRT widget开发应用中使用折叠控件指南

移动开发
Widget开发的概念你是否听说过,本文向大家介绍一下如何在WRT widget开发应用中使用折叠控件(Accordion),希望本文介绍对你有所帮助。

本文和大家重点学习一下如何在WRT Widget开发应用中使用折叠控件(Accordion),折叠控件(Accordion),这里是指一种web控件,它提供多个格子,每个格子可以显示一些内容,但一次仅显示一个格子。

如何在WRT Widget开发应用中使用折叠控件(Accordion)

什么是折叠控件(Accordion)

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

在其它许多领域,比如 Windows XP Explorer的左边面板及一些Web页面,我们已经看到过这样的折叠控件。现在该是在WRT Widget开发中使用它的时候了。
在本文中,我将介绍一个基于Prototype库的折叠控件Accrodion实现,并学习如何在我们的WRT Widget中使用它。下面介绍如何安装这个库及如何使用。

屏幕截图

 

 

 

安装Accordion库及其依赖项

Accordion.js 依赖于Prototype.js库及Scriptaculous.js库(准确的讲是effect.js)。 下载上面提到的所有库(见后面的“参考”部分),然后在你的WRT Widget应用的主页面文件中写入下面的代码块:
复制到剪贴板  C/C++代码<script type="text/javascript" src="javascript/prototype.js"></script> 
 

  1. <script type="text/javascript" src="javascript/effects.js"></script>    
  2. <script type="text/javascript" src="javascript/accordion.js"></script>    

 

我们也添加其它两个只用于本例的文件: demo.js和demo.css。如下:
我们也添加其它两个只用于本例的文件: demo.js和demo.css。如下:

复制到剪贴板  C/C++代码<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)

本例介绍一个垂直的折叠控件,这也是常见形式。你可以在其中定义嵌套的水平折叠控件或垂直折叠控件。


使用垂直的折叠布局

在主页面中,定义一个垂直的折叠容器,其布局大致如下:
复制到剪贴板  C/C++代码

  1. <div id="vertical_container">    
  2.      
  3.    <h1 class="accordion_toggle">title for pane 1</h>    
  4.    <div class="accordion_content">    
  5.       content for pane 1     
  6.    </div>    
  7.    <h1 class="accordion_toggle">title for pane 2</h>    
  8.    <div class="accordion_content">    
  9.       content for pane 2    
  10.    </div>    
  11.    //    
  12.    // more accordion panes.    
  13.    // ...     
  14. </div>    
  15.  

 


其中,vertical_container是容器,用于存放所有的格子,accordion_toggle用于定义折叠控件的格子标题,accordion_content用于定义该格子的内容。根据需要,你可以增加多个格子。


在垂直格子中使用水平的折叠控件(水平嵌套)

在垂直格子中使用水平的折叠控件,即嵌套水平的折叠控件。使用下面的代码块:
复制到剪贴板  C/C++代码

  1. <div id="vertical_container">    
  2.   <h1 class="accordion_toggle">Use Prototype.js(Horizontal Nested)</h1>    
  3.   <div class="accordion_content">    
  4.      
  5.     <h2>使用水平折叠控件</h2>    
  6.     <div id="horizontal_container" >                
  7.       <h3 class="horizontal_accordion_toggle">title for innner pane1</h3>    
  8.       <div class="horizontal_accordion_content">    
  9.          content for inner pane 1    
  10.       </div>    
  11.       // other panes here    
  12.       // ...    
  13.     </div>    
  14.      
  15.   </div>    
  16.  

 


上例中,horizontal_container用于定义水平折叠控件,它包含于于外部的垂直折叠控件的某个格子中。 horizontal_accordion_toggle用于定义水平折叠控件的格子的标题。horizontal_accordion_content用于定义水平折叠控件的格子的内容。 当然你可以定义多个水平格子。


在垂直格子中再使用垂直的折叠控件(垂直嵌套)

在垂直格子中再次使用垂直控件,即嵌套垂直的折叠控件。使用下面的代码块:
复制到剪贴板  C/C++代码

  1. <h1 class="accordion_toggle">Use Prototype.js(Vertical Nested)</h1>    
  2.   <div class="accordion_content">    
  3.      
  4.     <div id="vertical_nested_container" >    
  5.       <h3 class="vertical_accordion_toggle">title for inner pane 1</h3>    
  6.       <div class="vertical_accordion_content">    
  7.          content for inner pane 1    
  8.       </div>    
  9.     </div>    
  10.     // other panes here     
  11.     // ...    
  12.   </div>    
  13.  

 

上例中,vertical_nested_container用于定义垂直嵌套的折叠控件。它包含于外部的垂直折叠控件的某个格子中。vertical_accordion_toggle用于定义嵌套的垂直格子的标题及风格。 vertical_accordion_content用于定义嵌套的垂直格子的内容及风格。当然你可以定义多个嵌套的垂直格子。


更多信息

请参考Accordion.js的作者所写的文章:
复制到剪贴板  C/C++代码http://www.stickmanlabs.com/accordion/.  的“How to use”部分。

下载样例

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

对于***版,请到这里下载:
复制到剪贴板  C/C++代码http://code.google.com/p/prototypewrt/downloads/list 

参考

◆ Prototype JavaScript HomePage

◆Scriptaculous JavaScript HomePage

◆Accordion JavaScript HomePage

◆下载WRT例子应用程序

【编辑推荐】

  1. AndroidWidget开发系列解读
  2. AndroidWidget开发详解
  3. 全面认识WebWidget开发
  4. DashBoard的Widget开发指南
  5. 解析AndroidWidget开发中如何构建Activity类

 

责任编辑:佚名 来源: dev.10086.cn
相关推荐

2010-04-03 11:30:15

Widget开发

2011-09-08 17:48:33

Web Widget

2010-06-13 09:27:56

Widget开发

2011-09-08 13:11:07

Android Wid实例

2011-03-14 09:55:25

AndroidWidget

2023-12-22 09:11:45

AndroidNFC移动开发

2020-04-23 09:33:32

Android 协程开发

2011-04-18 11:00:34

使用音频BlackBerry

2009-02-25 10:55:29

FCKeditor控件JSP

2012-02-13 14:22:22

MonoTouchiOS应用Visual Stud

2010-05-13 10:19:09

Widget开发

2011-07-18 10:21:04

iOS Visual Stu iphone

2010-05-23 11:13:53

Widget开发

2009-09-16 10:56:22

C#开发ActiveX

2011-04-15 15:16:28

使用图像对象画图BlackBerry

2011-04-02 13:44:08

2011-09-09 17:59:26

QT Widget

2009-05-05 14:02:14

PlaceHolder控件ASP.NET

2011-09-09 11:05:56

Widget

2022-03-15 08:00:00

Flutter开发工具
点赞
收藏

51CTO技术栈公众号