JQuery UI accordion学习笔记
JQuery UI accordion学习笔记
一个简单的JQuery UI accordion例子如下:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<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>
</div>
</div>
</body>
</html>
选项：
以下所有例子中的$('#accordion')的语法是$('.selector'),由于我上面的例子中的selector(选择器是)$('#accordion'),所以下面的例子出现的全是$('#accordion')了.
1.1 active 这个参数是设置默认选项的，默认情况下是0，也就是第一个。
如上面的例子中所示,当没有指定它的值时,默认选择是0.所以显示的是Section 1中的内容:Section 1 content.
初始化设置改为：$('#accordion').accordion({ active: 1 });时,则初始显示的是Section 2中的内容:Section 2 content.
在初始化之后的获取和设置此项值的例子：
//获取 var active = $('#accordion').accordion('option', 'active');
//设置,将值设为1 $('#accordion').accordion('option', 'active', 1);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果，或不使用动画效果（设置为false），除了默认设置，还可以使用'bounceslide'和'easeslide'效果,这时需要UI Effects Core .
初始化设置例： $('#accordion').accordion({ animated: 'bounceslide' });
在初始化之后的获取和设置实例：
//获取 var animated = $('#accordion').accordion('option', 'animated');
//设置 $('#accordion').accordion('option', 'animated', 'bounceslide');
1.3 autoHeight 默认是true，如果设置，所有内容部分的高被设定为其中最高内容的高。 初始化设置：$('#accordion').accordion({ autoHeight: false })；
初始化以后的获取或设置
//获取 var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置 $('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false.如果设置,则会把accordion默认设置的height或其它的样式清除掉.如果你的accordin项中的内容是动态的话,设置这项是一种很好的选择.
这一项不能和选项autoHeight一起使用.因为它们是冲突的.
初始化设置 $('#accordion').accordion({ clearStyle: true });
设置这一项后,你会发现你的每一个accordion时section所占的高度(或空间)会不一致的,也就是随它们的内容多少而改变高度(或空间).
初始化后的获取和设置如下:
//获取 var clearStyle = $('#accordion').accordion('option', 'clearStyle');
//设置 $('#accordion').accordion('option', 'clearStyle', true);
1.5 collapsible 默认选项是false.如果设置这项,则所有的accordion sections都能折叠起来,当点击同一个部分时,section会在折叠和展开之间切换.
初始化设置：$('#accordion').accordion({ collapsible: true })；
初始化以后的获取或设置
//获取 var autoHeight = $('#accordion').accordion('option', 'collapsible');
//设置 $('#accordion').accordion('option', 'collapsible', false);
1.6 event 默认是'click' . 如何展开选项。可以设置成双击、鼠标滑过等。
初始化设置例：$('#accordion').accordion(event:"mouseover")；
初始化后的获取或设置
//获取var event = $('#accordion').accordion('option', 'event');
//设置$('#accordion').accordion('option', 'event', 'mouseover');
1.7 fillSpace ，充满父元素的高(如果在没有被其他容器包容时,也就是你第一次选择显示的accrodion部分的高)，默认为false ，使用此项,autoHeight无效。
(注意:clearStyle,autoHeight,fillSpace三项的区别:
个人经验是:clearStyle是每个section都根据自己的内容调整自己的高度,sections相互之间不影响)
autoHeight: 所有的sections都以他们之中最高的那部分的高度作为基准.
fillSpace: 则是根据初始化时,默认显示的那部分(也就是active的值)的高度为基准（这有个条件就是accordion没有受其他的容器的限制，也就是没有置于其他的容器中时）.
初始化设置例：$('#accordion').accordion({ fillSpace: true });
和active一起使用的实例:$('#accordion').accordion({active: 1, fillSpace: true });
初始化后的获取和设置请参考上面的 ，此处省略。
1.8 header，设置头元素，默认值为：'> li > :first-child,> :not(li):even' (JQuery ui官网的文档上是这么写的,但到现在我也不太明白这是为啥,希望明白的哪位兄弟能告诉我一下,在这先谢谢了).
默认情况下,accordion的header元素是anchors,如上面的例子或例2中所示:
例子2:
<div id="accordion">
<a href="#">First header</a>
<div>First content</div>
<a href="#">Second header</a>
<div>Second content</div>
</div>
如果你使用了不同的元素作为header,则只需用选项header明确说明即可.如例子3所示,使用了<h1>标记header元素:
<div id="accordion">
<h1>First header</h1>
<div>First content</div>
<h1>Second header</h1>
<div>Second content</div>
</div>
则只需使用 $('#accordion').accordion({ header: 'h1' });指定header元素是h1即可.如果你的accordion内容中有包含有链接,而同时你又是使用<a>元素作为headers,此时你只需给那些作为header的<a>元素增加一个class属性即可．
如<a class="header">然后使用：$('#accordion').accordion({ header: 'a.header' });问题即可解决！
//getter var header = $('.selector').accordion('option', 'header');
//setter $('.selector').accordion('option', 'header', 'h3');
1.9