Zebra_Accordion 折疊式選單

Zebra_Accordion 輕量級的手風琴折疊式選單基於 jQuery 框架製作，它定義在一個列表中而且不需要其他任何的特定標記，容易配置完全可以訂製的跨平台的折疊式選單套件。外觀容易使用 CSS 來做訂製，可作用於 FireFox、Opera、Apple Safari、Google Chrome、Internet Explorer 6+近代的瀏覽器中。

使用方法：
第一步 載入 Zebra_Accordion 需要用到的 CSS 和 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Zebra_Accordion 的 CSS 樣式檔-->
<link rel="stylesheet" href="path/to/zebra_accordion.css" type="text/css">
<!-- 載入 Zebra_Accordion 的主程式碼 -->
<script type="text/javascript" src="path/to/zebra_accordion.js"></script>

第二步 寫入選單的 HTML 資料
  <dl class="Zebra_Accordion">
    <dt>Lorem ipsum dolor sit amet consectetuer</dt>
      <dd>
        Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
        Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
        Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
      </dd>
      <dt>Lorem ipsum dolor sit amet consectetuer</dt>
      <dd>
        Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
        Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
        Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
      </dd>
      <dt>Lorem ipsum dolor sit amet consectetuer</dt>
      <dd>
        Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
        Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
        Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
      </dd>
      <dt>Lorem ipsum dolor sit amet consectetuer</dt>
      <dd>
        Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
        Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
        Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
      </dd>
    </dl>

第三步 設計這一個範例的 CSS 樣式
dl.Zebra_Accordion { width: 400px; font-family: Arial, sans-serif; font-size: 12px }
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px }
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0 }
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000 }

第四步 撰寫 JavaScript 使 Zebra_Accordion 套件初始化
$(function() {
  var myAccordion = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    'collapsible':  true
  });
});

附上 Zebra_Accordion 可修改的參數值

參數	型態	預設	說明
animate_opacity	布林	true	是否要以動畫開啟
collapsible	布林	false	是否只可以打開一個區塊
expanded_class	字串	Zebra_Accordion_Expanded	滑塊的 CSS 樣式名稱
hide_speed	整數	400	關閉的速度以毫秒為單位
scroll_speed	整數	600	滑動的速度以毫秒為單位
show_speed	整數	400	顯示的速度以毫秒為單位
show	整數	0	預設顯示滑塊
toggle_on_mouseover	布林	false
onClose	函式	空函式	關閉時執行
onOpen	函式	空函式	開啟時執行

作者網站：http://stefangabos.ro/jquery/
檔案大小：68.1 KB (包含範例)
檔案下載：http://stefangabos.ro/wp-content/uploads/jquery/zebra_accordion.1.1.zip
檔案備份：下載