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

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

什么是折疊控件（Accordion）

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

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

屏幕截圖

安裝Accordion庫(kù)及其依賴項(xiàng)

Accordion.js 依賴于Prototype.js庫(kù)及Scriptaculous.js庫(kù)（準(zhǔn)確的講是effect.js）。 下載上面提到的所有庫(kù)（見后面的“參考”部分），然后在你的WRT Widget應(yīng)用的主頁(yè)面文件中寫入下面的代碼塊：
復(fù)制到剪貼板  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>    

我們也添加其它兩個(gè)只用于本例的文件： demo.js和demo.css。如下：
我們也添加其它兩個(gè)只用于本例的文件： demo.js和demo.css。如下：

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

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

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

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

使用垂直的折疊布局

在主頁(yè)面中，定義一個(gè)垂直的折疊容器，其布局大致如下：
復(fù)制到剪貼板  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用于定義折疊控件的格子標(biāo)題，accordion_content用于定義該格子的內(nèi)容。根據(jù)需要，你可以增加多個(gè)格子。

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

在垂直格子中使用水平的折疊控件，即嵌套水平的折疊控件。使用下面的代碼塊：
復(fù)制到剪貼板  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用于定義水平折疊控件，它包含于于外部的垂直折疊控件的某個(gè)格子中。 horizontal_accordion_toggle用于定義水平折疊控件的格子的標(biāo)題。horizontal_accordion_content用于定義水平折疊控件的格子的內(nèi)容。 當(dāng)然你可以定義多個(gè)水平格子。

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

在垂直格子中再次使用垂直控件，即嵌套垂直的折疊控件。使用下面的代碼塊：
復(fù)制到剪貼板  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用于定義垂直嵌套的折疊控件。它包含于外部的垂直折疊控件的某個(gè)格子中。vertical_accordion_toggle用于定義嵌套的垂直格子的標(biāo)題及風(fēng)格。 vertical_accordion_content用于定義嵌套的垂直格子的內(nèi)容及風(fēng)格。當(dāng)然你可以定義多個(gè)嵌套的垂直格子。

更多信息

請(qǐng)參考Accordion.js的作者所寫的文章：
復(fù)制到剪貼板  C/C++代碼http://www.stickmanlabs.com/accordion/.  的“How to use”部分。

下載樣例

下載樣例Widget: File:AccordionDemo.zip. 安裝時(shí)，需要將.zip后綴更改為.wgz。

對(duì)于***版，請(qǐng)到這里下載：
復(fù)制到剪貼板  C/C++代碼http://code.google.com/p/prototypewrt/downloads/list 

參考

◆ Prototype JavaScript HomePage

◆Scriptaculous JavaScript HomePage

◆Accordion JavaScript HomePage

◆下載WRT例子應(yīng)用程序

【編輯推薦】

1. AndroidWidget開發(fā)系列解讀
2. AndroidWidget開發(fā)詳解
3. 全面認(rèn)識(shí)WebWidget開發(fā)
4. DashBoard的Widget開發(fā)指南
5. 解析AndroidWidget開發(fā)中如何構(gòu)建Activity類