【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

2022-04-29 17:17:38

accordion是另一个UI控件，能允许你将一组content加入相互分隔的、能够被浏览者的交互打开或关闭的panels中。因此，它大多数的content在初始化的时候是隐藏的，很像tabs控件。
每个容器都有一个 heading 元素与之关联，用来打开并显示content。当你点击一个heading，它的 content就会以动画的方式滑动到它下面的视图。
当我们点击一个新的content时，当前可见的content会隐藏，新的会显示。

accordion控件的结构
accordion的默认安装启用
添加自定义样式
使用配置选项来设置不同的行为
用方法来控制accordion
动画的。。。
自定义accordion事件

1 accordion的结构

<div>content 1
<div>content 2
<div>content 3
$(function(){
$("#myAccordion").accordion();
});

我们可以包含一些 effect文件，在accordion打开时，使用非标准的动画。
首先要加载 jQuery 库文件，然后加载 jquery.ui.core.js 文件。然后这个空间依赖的其他文件，应该在这个控件自己的脚本文件之前加载。
控件可以从多种不用的结构所构建。在这个例子中，accordion headings 被 <h2>元素包裹着的格式，content panels 简单地使用 <div> 元素。
要正确地构建accordion，每个content panel 应该直接出现在它的相关 header 后。
在这个例子中，我们使用 # 作为 heading元素 href 属性的值。在默认安装启用的accordion中，任何提供给 accordion headers 的 URL都不会被跟随。
不同的元素被赋予 role 和 aria 属性。 ARIA 。。。Accessible Rich Internet Applications ，这是W3C推荐的确保富网络应用保持易于访问的技术。
视图中，初始化后隐藏的 accordion panel 被赋予了 aria-expande="false" 的属性，来确保屏幕不会抛弃它，或者使用 display:none 造成 content 不能访问。

2 accordion 的样式

主题角色

#myAccordion {
width:400px; border:1px solid #636363; padding-bottom:1px;
}
.ui-accordion-header {
border:1px solid #fff;
font-family:Georgia; background:#e2e2e2 none;
}
.ui-widget-content { font-size:70%; border:none; }
.ui-corner-bottom {
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;
}
.ui-corner-all {
-moz-border-radius:0; -webkit-border-radius:0;
border-radius:0;
}
.ui-accordion .ui-accordion-header { margin:0 0 -1px; }
#myAccordion .ui-state-active, #myAccordion .ui-widget-content .ui-state-active { background:#fff; }
.ui-state-hover, .ui-widget-content .ui-state-hover {
background:#d2d2d2;
}

3 accordion 的配置

active 第一个panel 页面加载后，活动的heading.

animated "slide" content panels 打开时的动画

autoHeight true 自动设置accordion的高度，来适应最大的 panel

clearStyle false 在panel 打开后，清除高度和溢出样式

collapsible false 允许所有的content panels能同时关闭

disabled false 禁用控件

event "click" 指定 headers 上触发打开 panel 的事件

fillSpace false 允许 accordion 填充它容器的整个高度。

header "> li >:first-child,>:not(li):even" 指定header元素的选择器。尽管它看起来复杂，这是标准的 jQuery 选择器。它仅仅触发每个奇数<li>元素中的第一个元素。

icons 'header': 'ui-icon-triangle-1-e',
'headerSelected': 'ui-icon-triangle-1-s'
设置header元素的图标和被选中的状态

navigation false 启用导航模式

navigationFilter location.href 改变功能用来获得当控件被初始化时，应该打开的 content panel 的ID

3.1 改变触发事件

$(function(){
var accOpts={
event:"mouseover"
};
$("#myAccordion").accordion(accOpts);
});

3.2 改变默认的活动header

var accOpts = {
active: 2
}

索引从0开始

var accOpts = {
active: false,
collapsible: true
};

若为false，页面打开后则没有一个开着。并且单机打开的 head ,它就会关闭。

3.3 填充至它父容器的高度

如果设置了 fillSpace 选项，它会覆盖 autoHeight，强制 accordion 填充它父容器的整个高度。

var accOpts = {
fillSpace: true
};

3.4 accordion 的动画

slide 动画效果做默认的效果。

var accOpts = {
animated: false
};

备用的动画效果已经被构建入控件，bounceslide。但是，引用jquery.effects.core.js文件才能使用它。

var accOpts = {
animated: "bounceslide"
};

它会在动画结束的时候弹跳几次。我们也可以使用jquery.effects.core.js中的其他释放效果，如

easeInQuad
easeInCubic
easeInQuart
easeInQuint
easeInSine
easeInExpo
easeInCirc
easeInElastic
easeInBack
easeInBounce

这些释放效果中，最令人称赞是是 easeOut 和 easeInOut 。释放效果不改变底层动画，他会基于slide动画。但是他们改变了动画播放的进展。例如，我们可以通过使用easeOutBounce 释放效果，来使得 content panel 在打开和关闭的时候都弹跳。

var accOpts = {
animated: "easeOutBounce"
};

大多数释放效果都有独立的效果，比如使用 easeInBounce 进入的时候弹跳。
动画效果还有一个选项就是 clearStyle 属性，它会在每个动画后，重设高度和溢出样式。这个选项默认是false。

var accOpts = {
clearStyle: true,
animated: "easeOutBounce"
};

会根据每个content的长度，自动设置大小。

4 accordion 的事件

accordion暴露了三个自定义事件：

Event	Triggered when…
change	活动的header被变更
changestar	活动的header将要被变更
create	控件已经被创建

change 事件会在每次 content panel 打开动画结束时触发。如果动画被禁用，就等到活动panel 已经被变更时。

changestar在新header一被选中就触发，它在打开动画之前。如果动画被禁用，就在活动panel变更之前。

create事件在控件一被初始化后就触发。

4.1 使用 change 事件

$(function(){
var accOpts = {
change:function(e,ui){
$(".notify").remove();
$("<div/>",{
"class":"notify",
text:([
ui.newHeader.find("a").text(),
"was activated,",
ui.oldHeader.find("a").text(),
"was closed"
].join(" ")
)
}).insertAfter("#status").fadeOut(2000,function(){
$(this).remove();
});
}
};
$("#myAccordion").accordion(accOpts);
});

change 的匿名函数第一个参数是event，它包含原始浏览器的event 对象。第二个参数是一个对象，包含了控件的有用信息，如被激活的header 元素（ui.newHeader），和失效的（ui.oldHeader）。第二个这个参数是一个jQuery对象，所以我们能够对他直接调用jQuery方法。同样地，ui对象也提供了content panel的信息，ui.newContent 和 ui.oldContent 属性。

4.2 使用 changestart 事件

$(function(){
var accOpts = {
changestart:function(e,ui){
$("<div/>",{
"class":"notify",
text:([
ui.newHeader.find("a").text(),
"was activated,",
ui.oldHeader.find("a").text(),
"was closed"
].join(" ")
)
}).insertAfter("#status").fadeOut(2000,function(){
$(this).remove();
});
}
};
$("#myAccordion").accordion(accOpts);
});

我们同样可以使用基本jQuery bind() 方法，accordionchange和accordionchangestart。

5 accordion 导航

看起来就像 location.href 属性。如果 content 的 location.href 属性匹配到headers的 href 属性，这个header将被激活。当我们选择第二个content panel，这个页面会导航到另一个页面，另一个页面的第二个header 将自动被激活。navigation属性为我们提供了在不同页面间保持控件状态的方法。

6 accordion 方法

Method	Use
active	以编码的方式激活一个header，像被浏览者选中一样
resize	当 fillSpace 选项设为 true，并且 content 已经变更，改变accordion的大小

6.1 激活 header

activate 方法可以用来以代码的形式显示或隐藏不同的

6.2 重设accordion panel 的大小

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis
volutpat ligula. Integer vitae felis quis diam laoreet
ullamcorper.
<div>Etiam tincidunt est vitae est. Ut posuere, mauris at sodales
rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu
lectus. Suspendisse poten-ti.
$(function(){
var accOpts = {
changestart: function(e, ui) {
if (ui.newHeader.attr("id") ==="remote") {
$.get(ui.newHeader.find("a").attr("href"),
function(data) {
ui.newHeader.next().text(data);
});
}
},
change: function(e, ui) {
ui.newHeader.closest("#myAccordion").accordion("resize");
}
};
$("#myAccordion").accordion(accOpts);
});
</script>

我们使用jQuery 的 get() 方法，从指定的 <a> 的href属性中，读取content。如果请求返回成功，我们将文本加到header后的空panel中。这一切都在panel打开之前发生。

码农公寓