遵照由简到繁的原则,我继续完成“手风琴式的控制”,示例见此处。
在jQuery中实现手风琴式的控制十分简单:
<script src="../ui/ui.core.js"></script> <script src="../ui/ui.accordion.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#accordion").accordion(); } ); </script>
两个额外的js文件可以从jQuery网站下载,也可以直接远程引用。
html的代码采用ul/li组合写成:
<ul id="accordion">
<li>
<a href="#">Section 1</a>
<div>Line 1.<br/>
Line 1.<br/>
Line 1.<br/>
Line 1.</div>
</li>
<li>
<a href="#">Section 2</a>
<div>Line 2.<br/>
Line 2.<br/>
Line 2.<br/>
</li>
...
</ul>实在是很简单,而且很干净,彻底分离了html和js代码。