發佈日期：
分類：
如何使用jQuery及jQuery UI‧建立手風琴式(accordion)選單
很多時在其他網站看到手風琴式(accordion)選單，一直以為是很複雜的工作。但有了jQuery UI，複雜的工作，原來可以很簡單。
01. jQuery UI在版本1.8.13，包含了31個元件，您可以一次過在jQuery UI下載所有元件，也可以根據您自己需要，下載只需用到的其中一個元件。
02. 今次測試，只下載accordion元件，版本為1.8.13。jQuery會使用1.6.1版本。
03. jQuery UI，除包含js檔案外，另外也包括css檔案及圖像檔案。只要載入相關檔案，再更改css內容，便可輕易做到您需要的效果。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p, li {
font-size: 11pt;
}
ul {
padding-left: 20px;
}
</style>
<link rel="stylesheet" href="jquery-ui-1.8.13.accordion.css">
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.accordion.min.js"></script>
</head>
<body>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content.</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content.</p>
<ul>
<li>Section 3 item 1;</li>
<li>Section 3 item 2;</li>
<li>Section 3 item 3;</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Section 4 content 1.</p>
<p>Section 4 content 2.</p>
</div>
</div>
</div>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</body>
</html>
註：jQuery版本為1.6.1，jQuery UI accordion版本為1.8.13。
發佈留言