本文和大家重點學習一下如何在WRT Widget開發(fā)應用中使用折疊控件（Accordion），折疊控件（Accordion），這里是指一種web控件，它提供多個格子，每個格子可以顯示一些內容，但一次僅顯示一個格子。

如何在WRT Widget開發(fā)應用中使用折疊控件（Accordion）

什么是折疊控件（Accordion）

折疊控件（Accordion），這里是指一種web控件，它提供多個格子，每個格子可以顯示一些內容，但一次僅顯示一個格子。一般每個格子有一個標題和容器。當某個格子被打開時其它的格子將合閉或被折疊起來。

在其它許多領域，比如 Windows XP Explorer的左邊面板及一些Web頁面，我們已經(jīng)看到過這樣的折疊控件?，F(xiàn)在該是在WRT Widget開發(fā)中使用它的時候了。
在本文中，我將介紹一個基于Prototype庫的折疊控件Accrodion實現(xiàn)，并學習如何在我們的WRT Widget中使用它。下面介紹如何安裝這個庫及如何使用。

屏幕截圖

安裝Accordion庫及其依賴項

Accordion.js 依賴于Prototype.js庫及Scriptaculous.js庫（準確的講是effect.js）。 下載上面提到的所有庫（見后面的“參考”部分），然后在你的WRT Widget應用的主頁面文件中寫入下面的代碼塊：
復制到剪貼板  C/C++代碼<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。如下：
我們也添加其它兩個只用于本例的文件： demo.js和demo.css。如下：

復制到剪貼板  C/C++代碼<link rel="stylesheet" type="text/css" href="demo.css" /> 
<script type="text/javascript" src="demo.js"></script> 

這兩個文件用于定義折疊控件的風格，和動態(tài)行為。你可以在本例的源代碼中找到它們。
注意： 本例中的Prototype.js庫是1.5版，而不是***的1.6版。

在WRT Widget開發(fā)中使用折疊控件（Accordion）

本例介紹一個垂直的折疊控件，這也是常見形式。你可以在其中定義嵌套的水平折疊控件或垂直折疊控件。

使用垂直的折疊布局

在主頁面中，定義一個垂直的折疊容器，其布局大致如下：
復制到剪貼板  C/C++代碼

<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用于定義該格子的內容。根據(jù)需要，你可以增加多個格子。

在垂直格子中使用水平的折疊控件（水平嵌套）

在垂直格子中使用水平的折疊控件，即嵌套水平的折疊控件。使用下面的代碼塊：
復制到剪貼板  C/C++代碼

<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用于定義水平折疊控件的格子的內容。 當然你可以定義多個水平格子。

在垂直格子中再使用垂直的折疊控件（垂直嵌套）

在垂直格子中再次使用垂直控件，即嵌套垂直的折疊控件。使用下面的代碼塊：
復制到剪貼板  C/C++代碼

<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的作者所寫的文章：
復制到剪貼板  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開發(fā)系列解讀
2. AndroidWidget開發(fā)詳解
3. 全面認識WebWidget開發(fā)
4. DashBoard的Widget開發(fā)指南
5. 解析AndroidWidget開發(fā)中如何構建Activity類