jQuery - Horizontal Accordion 執行畫面

基於jQuery框架的折疉選單，可仿照XBOX 360 blade的介面方格，也可以自行設定圖片合成專業的選單，小小的空間可以展示更多的內容，套件並且支援自動撥放的功能，就算沒有滑過或按下依然可以顯示不同的資料。


使用方法：
首先載入需要的框架和套件
//利用Google AJAX API 取得 jQuery 1.7.1 的 min 版本
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
//jQuery 動畫效果加強的套件
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
//jQuery - Horizontal Accordion 的主程式碼
<script type="text/javascript" src="lib/jquery.hrzAccordion.js"></script>
HTML內容部份
<ul class="demo">
  <li>
    <div class="handle"><img src='images/title1.png'></div>
    <img src='images/image_test.gif' align='left'> <!--內容圖片-->
    <h3>標題一</h3>
    <p>內容一</p>
  </li>
  <li>
    <div class="handle"><img src='images/title2.png'></div>
    <img src='images/image_test.gif' align='left'> <!--內容圖片-->
    <h3>標題二</h3>
    <p>內容二</p>
  </li>
  <li>
    <div class="handle"><img src='images/title3.png'></div>
    <img src='images/image_test.gif' align='left'> <!--內容圖片-->
    <h3>標題三</h3>
    <p>內容三</p>
  </li>
  <li>
    <div class="handle"><img src='images/title4.png'></div>
    <img src='images/image_test.gif' align='left'> <!--內容圖片-->
    <h3>標題四</h3>
    <p>內容四</p>
  </li>
</ul>
CSS的預設樣式
<style>
.test{
display: none;
}
.container {
width:100%;
}
.container ul{
list-style-type: none;
margin: 0;
padding:0;
}
.container li{
display: inline;
margin: 0px;
padding:0px;
}
.contentContainer {
padding-left: 0px;
float: left;
width:0px;
height: 310px;
overflow:hidden;
}
.contentWrapper{
}
.contentInnerWrapper{
text-align: justify;
padding: 10px;
}
.handle{
float: left;
width: 38px;
height: 310px;
margin: 1px;
margin-right: -10px;
background:  url(../images/blade.png) no-repeat;
}
.handleOver{
background: url(../images/blade_sel.png) no-repeat;
}
.handleSelected{
background: url(../images/blade_sel.png) no-repeat;
}
</style>
最後再加入JavaScripts的部份程式就完成了
<script language="javascript">
$(function() {
$(".demo").hrzAccordion({eventTrigger:"mouseover",openOnLoad:"",cycle: true});
});
</script>
附上可供修改的參數值

參數	預設	說明
containerClass	container	最外層DIV Class 名稱
listItemClass	listItem	項目符號的 Class 名稱
contentContainerClass	contentContainer	實際容器的 Class 名稱
contentWrapper	contentWrapper	介於最外層與容器中間的圖層 Class 名稱
contentInnerWrapper	contentInnerWrapper	另外一個圖層的 Class 名稱
handleClass	handle	放置選單標題的 Class 名稱
handleClassOver	handleOver	放置選單標題滑過的 Class 名稱
handleClassSelected	handleSelected	放置選單選擇的 Class 名稱
handlePosition	left	選單標題對齊方向 (left | right | bottom | top)
handlePositionArray	left,left,right,right,right	按順序對齊方向 (left | right | bottom | top)
closeEaseAction	swing	選單關閉的動畫效果
closeSpeed	500	選單關閉的速度以毫秒為單位
openEaseAction	swing	選單開啟的動畫效果
openSpeed	500	選單開啟的速度以毫秒為單位
openOnLoad	1	預設開啟選單的第N個項目
hashPrefix	tab	允許打開容器的URL.定義要使用的前綴
eventAction	空函式	按下時執行函式
completeAction	空函式	完成動作時執行函式
closeOpenAnimation	1	1-同一時間開啟關閉. 2.先關閉之後再執行開啟的動作
cycle	false	是否自動換選項
cycleInterval		自動換選項的時間間隔.單位為毫秒
fixedWidth	""	使用固定寬度的容器
eventWaitForAnim	true	滑鼠滑過是否動作