图 10
2.2.3Accordion的嵌套
还有个问题就是accordion的嵌套。一开始我在尝试去实现这个功能时也是遇到了些麻烦的。
比如现在我们要在section 1里面想再放一个accordion，给它取名为subaccordion吧，需要注意的地方就是 这个subaccordion一定要放在“content of section1”这个Div中，其他任何形式的摆放都不会出现正确的效果。如果你觉得直接在Accordion 1里面加一个<a>标签再加一个<div>，就会正确地在Section1里面解析出一个内嵌于Accortion1的Accordion，那你就错了。最后的代码及效果如下。
<div id=”tabs-1″>
<div id=”accordion1″>
<h3><a href=”#”>Section 1</a></h3>
<div>
<div id=”subaccortion”>
<h3><a href=”#”>subaccortion</a></h3>
<div>content of subaccortion</div>
</div>
</div>
</div>
<div id=”accordion2″>
……..
图 11
有点不完美的地方就是Section1出现了滚动条，下面我们设置一下高度属性并且让里面那个子accortion一开始处于折叠状态。
修改脚本代码如下：
<script type=”text/javascript”>
$(document).ready(function () {
$(“#tabs”).tabs();
$(“#accordion1”).accordion({ collapsible: true, autoHeight: false });
$(“#subaccortion”).accordion({ collapsible: true, active:false });
$(“#accordion2”).accordion({ collapsible: true, autoHeight: false });
$(“#accordion3”).accordion({ collapsible: true, autoHeight: false });
})
</script>
图 12
从这里你已经可以看到，可以设置任意一个标签一开始是处于折叠还是打开状态。当然也可以将一个accortion disable掉，那样点击标题就不会有折叠打开动作了。
3 给插件应用主题——Theme Roller 3.1更改配色
现在，我们是可以方便地使用jQuery UI 做出界面了。但试想，那么多人如果都在用，会不会把整个互联网搞得千篇一律，用户一打开浏览器走到哪里看到的都是同一个东西，会不会有点摸不着北。并且我们也需要在使用这些插件的时候进行一些调整以符合我们自己网站的主题，色调等。
jQuery UI支持用户定义样式，你甚至可以更改实现代码来进行更高级的自定义，如果你有能力的话。
