liteAccordion 實際執行畫面

liteAccordion 是一個用來快速創建吸引人的水平折疊效果的 jQuery 套件。套件的大小只有 1.4 KB 左右，可以展示任何的 HTML 元素包括：圖片、段落、視訊和 Flash 等等。可以設置無限個分層檢視，並且可在初始化中選中其中一個分層頁面中。另外還可設置包括：自動撥放、暫停播放、轉換速度等等。liteAccordion 還支援自定義外觀，內建有五種外觀可以選擇。

使用方法：
第一步 先載入程式所需要的檔案
//liteAccordion 的 CSS 樣式表設計
<link rel="stylesheet" href="liteAccordion.css">
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//liteAccordion 的主程式碼
<script src="liteaccordion.jquery.js"></script>


第二步 做出你要顯示折疊式選單的位置
<div id="yourdiv">
  <ol>
    <li>
 <h2><span>顯示文字</span></h2>
      <div>內容</div>
    </li>
    <li>
      <h2><span>顯示文字</span></h2>
      <div>內容</div>
    </li>
    <li>
      <h2><span>顯示文字</span></h2>
      <div>內容</div>
    </li>
    <li>
      <h2><span>顯示文字</span></h2>
      <div>內容</div>
    </li>
    <li>
      <h2><span>顯示文字</span></h2>
      <div>內容</div>
    </li>
  </ol>
  <noscript>
    <p>沒有 JavaScript 的時候顯示</p>
  </noscript>
</div>

第三步 加入啟動程式的 JavaScript
$(function(){//檔案載入完成時執行
    $('#yourdiv').liteAccordion();
});

liteAccordion 範例完成圖

最後附上程式可修改的參數

參數	預設	說明
containerWidth	960	容器的寬度 (px)
containerHeight	320	容器的高度 (px)
headerWidth	48	選單的寬度 (px)
responsive	false	是否覆蓋上面三個設定.填滿容器
autoScaleImages	false	是否自動調整圖片大小
minContainerWidth	300	最小的內容寬度
maxContainerWidth	960	最大的內容寬度
activateOn	'click'	觸發轉換的動作 click,mouseover
firstSlide	1	初始化完成停留在第幾個
slideSpeed	800	動畫的速度.以毫秒為單位
onTriggerSlide	function() {}	動畫開始前觸發本函式
onSlideAnimComplete	function() {}	動畫完成後觸發本函式
autoPlay	false	是否自動輪播
pauseOnHover	false	滑鼠滑過是否暫停
cycleSpeed	6000	換下一張的間隔時間
easing	'swing'	動畫的樣式
theme	'basic'	套版樣式 basic,dark,light,colorful,stitch 五種
rounded	false	圓角或正方形
enumerateSlides	false	號碼顯示於選項上
linkable	false	幻燈片啟用連結

可使用的方法

方法	說明
play	觸發自動撥放
stop	停止自動撥放
next	播放下一個
prev	播放前一個
destroy	摧毀事件處理程序和所有樣式
debug	返回一個測試的物件

作者網站：http://nicolahibbert.com/demo/liteAccordion/
檔案大小：387 KB(包含範例)
檔案下載：https://github.com/nikki/liteAccordion
檔案備份：下載