本篇介绍Accordion组件(类似手风琴可以折叠的UI组件)。
基本用法
jQuery Accordion UI组件可以把一个包含有具有Header (标题头)和Content(内容)对的容器转变成Accordion组件。
比如如下一个Id=”accordion”Div HTML元素。
1 | < div id = "accordion" > |
2 |
< h1 >Section 1</ h1 > |
3 |
< div > |
4 |
< p >Description 1</ p > |
5 |
</ div > |
6 |
< h2 >Section 2</ h2 > |
7 |
< div > |
8 |
< p >Description 3</ p > |
9 |
</ div > |
10 |
< h3 >Section 3</ h3 > |
11 |
< div > |
12 |
< p >Description 3</ p > |
13 |
< ul > |
14 |
< li >List item one</ li > |
15 |
< li >List item two</ li > |
16 |
< li >List item three</ li > |
17 |
</ ul > |
18 |
</ div > |
19 | </ div > |
对于<div id=”accordion”>里面的元素,According允许使用任意的标记,只要是一个Header紧接着一个Content,比如上面的H3,你可以换成H1,H2等其它标记,或者通过Header选项来配置。
有了这样的HTML元素,然后对其使用Accordion方法,就将该HTML元素变成Accordion 样式了
1 | <script> |
2 |
$( "#accordion" ).accordion(); |
3 | </script> |
本例完整代码如下:
1 | <!doctype html> |
2 | < html lang = "en" > |
3 | < head > |
4 |
< meta charset = "utf-8" /> |
5 |
< title >jQuery UI Demos</ title > |
6 |
< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" /> |
7 |
< script src = "scripts/jquery-1.9.1.js" ></ script > |
8 |
< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script > |
9 |
10 |
< script > |
11 |
$(function () { |
12 |
13 |
}); |
14 |
</ script > |
15 | </ head > |
16 | < body > |
17 |
< div id = "accordion" > |
18 |
< h1 >Section 1</ h1 > |
19 |
< div > |
20 |
< p >Description 1</ p > |
21 |
</ div > |
22 |
< h2 >Section 2</ h2 > |
23 |
< div > |
24 |
< p >Description 3</ p > |
25 |
</ div > |
26 |
< h3 >Section 3</ h3 > |
27 |
< div > |
28 |
< p >Description 3</ p > |
29 |
< ul > |
30 |
< li >List item one</ li > |
31 |
< li >List item two</ li > |
32 |
< li >List item three</ li > |
33 |
</ ul > |
34 |
</ div > |
35 |
</ div > |
36 |
37 |
< script > |
38 |
$("#accordion").accordion(); |
39 |
</ script > |
40 | </ body > |
41 | </ html > |
折叠内容
Accordion 组件缺省情况下总有一项内容是展开的,如说图Section1的内容是可见的,点击其它部分的标题,该部分内容可见,但无法将所有内容都折叠起来,如果要支持所有部分都可以折叠,可以通过配置collapsible
属性,如:
1 | $(function() { |
2 |
$( "#accordion" ).accordion({ |
3 |
collapsible: true |
4 |
}); |
5 |
}); |
自定义图标
可以自定义Accordion 组件标题前的图标,缺省的图标为箭头(未展开是箭头向右,展开时向下),使用jQuery CSS框架中定义的类或是通过自定义背景图像类,可以重新配置这两个图标:
1 | $( function () { |
2 |
var icons = { |
3 |
header: "ui-icon-circle-arrow-e" , |
4 |
activeHeader: "ui-icon-circle-arrow-s" |
5 |
}; |
6 |
$( "#accordion" ).accordion({ |
7 |
icons: icons |
8 |
}); |
9 |
$( "#toggle" ).button().click( function () { |
10 |
if ( $( "#accordion" ).accordion( "option" , "icons" ) ) { |
11 |
$( "#accordion" ).accordion( "option" , "icons" , null ); |
12 |
} else { |
13 |
$( "#accordion" ).accordion( "option" , "icons" , icons ); |
14 |
} |
15 |
}); |
16 |
}); |
设置HeightStyle
因为Accordion由“Block级”元素组成(可以参加CSS的display),因此它缺省在水平方向占据父元素的宽度,为了在高度方向也能充满其父容器,可以通过配置heightStyle
为fill .HeightStyle 可以使用的值如下:
-
"auto"
: 所有Panel使用最高的那个Panel的高度. -
"fill"
: 根据父容器的高度来填充. -
"content"
: 每个Penel的高度取决于其内容.
1 | <!doctype html> |
2 | < html lang = "en" > |
3 | < head > |
4 |
< meta charset = "utf-8" /> |
5 |
< title >jQuery UI Demos</ title > |
6 |
< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" /> |
7 |
< script src = "scripts/jquery-1.9.1.js" ></ script > |
8 |
< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script > |
9 |
10 |
< style > |
11 |
#accordion-resizer { |
12 |
padding: 10px; |
13 |
width: 350px; |
14 |
height: 300px; |
15 |
} |
16 |
</ style > |
17 |
< script > |
18 |
$(function () { |
19 |
$("#accordion").accordion({ |
20 |
heightStyle: "fill" |
21 |
}); |
22 |
}); |
23 |
$(function () { |
24 |
$("#accordion-resizer").resizable({ |
25 |
minHeight: 140, |
26 |
minWidth: 200, |
27 |
resize: function () { |
28 |
$("#accordion").accordion("refresh"); |
29 |
} |
30 |
}); |
31 |
}); |
32 |
</ script > |
33 | </ head > |
34 | < body > |
35 |
< h3 class = "docs" >Resize the outer container:</ h3 > |
36 |
37 |
< div id = "accordion-resizer" class = "ui-widget-content" > |
38 |
< div id = "accordion" > |
39 |
< h3 >Section 1</ h3 > |
40 |
< div > |
41 |
< p >Mauris mauris ante, blandit et, |
42 |
ultrices a, suscipit eget, |
43 |
quam. Integer ut neque. Vivamus nisi metus, |
44 |
molestie vel, gravida in, |
45 |
condimentum sit amet, nunc. Nam a nibh. |
46 |
Donec suscipit eros. Nam mi. |
47 |
Proin viverra leo ut odio. |
48 |
Curabitur malesuada. |
49 |
Vestibulum a velit eu ante |
50 |
scelerisque vulputate.</ p > |
51 |
</ div > |
52 |
< h3 >Section 2</ h3 > |
53 |
< div > |
54 |
< p >Sed non urna. Donec et ante. |
55 |
Phasellus eu ligula. |
56 |
Vestibulum sit amet purus. |
57 |
Vivamus hendrerit, |
58 |
dolor at aliquet laoreet, |
59 |
mauris turpis porttitor velit, |
60 |
faucibus interdum tellus |
61 |
libero ac justo. |
62 |
Vivamus non quam. |
63 |
In suscipit faucibus urna. </ p > |
64 |
</ div > |
65 |
< h3 >Section 3</ h3 > |
66 |
< div > |
67 |
< p >Nam enim risus, molestie et, |
68 |
porta ac, |
69 |
aliquam ac, risus. Quisque lobortis. |
70 |
Phasellus pellentesque purus in massa. |
71 |
Aenean in pede. Phasellus |
72 |
ac libero ac tellus |
73 |
pellentesque semper. |
74 |
Sed ac felis. Sed commodo, |
75 |
magna quis lacinia ornare, |
76 |
quam ante aliquam nisi, |
77 |
eu iaculis leo purus |
78 |
venenatis dui. </ p > |
79 |
< ul > |
80 |
< li >List item one</ li > |
81 |
< li >List item two</ li > |
82 |
< li >List item three</ li > |
83 |
</ ul > |
84 |
</ div > |
85 |
< h3 >Section 4</ h3 > |
86 |
< div > |
87 |
< p >Cras dictum. Pellentesque |
88 |
habitant morbi |
89 |
tristique senectus et netus |
90 |
et malesuada |
91 |
fames ac turpis egestas. |
92 |
Vestibulum |
93 |
ante ipsum primis in faucibus |
94 |
orci luctus |
95 |
et ultrices posuere cubilia |
96 |
Curae; |
97 |
Aenean lacinia mauris |
98 |
vel est. </ p > |
99 |
< p >Suspendisse eu nisl. Nullam ut libero. |
100 |
Integer dignissim consequat lectus. |
101 |
Class aptent taciti sociosqu ad litora |
102 |
torquent per conubia nostra, |
103 |
per inceptos himenaeos. </ p > |
104 |
</ div > |
105 |
</ div > |
106 |
</ div > |
107 |
108 | </ body > |
109 | </ html > |
鼠标移动式自动打开内容
缺省情况下,打开Accordion某个部分内容,是点击该部分标题,如果需要实现移动鼠标到该部分自动展开内容,可以设置event属性,例如:
1 | $( function () { |
2 |
$( "#accordion" ).accordion({ |
3 |
event: "mouseover" |
4 |
}); |
5 | }); |
支持调整顺序
使用sortable方法允许重新调整Accordion每个部分的顺序,可以通过拖放的方法调整顺序:
1 | <!doctype html> |
2 | < html lang = "en" > |
3 | < head > |
4 |
< meta charset = "utf-8" /> |
5 |
< title >jQuery UI Demos</ title > |
6 |
< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" /> |
7 |
< script src = "scripts/jquery-1.9.1.js" ></ script > |
8 |
< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script > |
9 |
< style > |
10 |
/* IE has layout issues when sorting (see #5413) */ |
11 |
.group { |
12 |
zoom: 1; |
13 |
} |
14 |
</ style > |
15 |
< script > |
16 |
$(function () { |
17 |
$("#accordion").accordion({ |
18 |
header: "> div > h3", |
19 |
collapsible: true |
20 |
}).sortable({ |
21 |
axis: "y", |
22 |
handle: "h3", |
23 |
stop: function (event, ui) { |
24 |
// IE doesn't register the blur when sorting |
25 |
// so trigger focusout handlers to remove .ui-state-focus |
26 |
ui.item.children("h3").triggerHandler("focusout"); |
27 |
} |
28 |
});; |
29 |
}); |
30 |
</ script > |
31 | </ head > |
32 | < body > |
33 |
< div id = "accordion" > |
34 |
< div class = "group" > |
35 |
< h3 >Section 1</ h3 > |
36 |
37 |
< div > |
38 |
< p >Description 1</ p > |
39 |
</ div > |
40 |
</ div > |
41 |
< div class = "group" > |
42 |
< h3 >Section 2</ h3 > |
43 |
< div > |
44 |
< p >Description 2</ p > |
45 |
</ div > |
46 |
</ div > |
47 |
< div class = "group" > |
48 |
< h3 >Section 3</ h3 > |
49 |
50 |
< div > |
51 |
< p >Description 3</ p > |
52 |
< ul > |
53 |
< li >List item one</ li > |
54 |
< li >List item two</ li > |
55 |
< li >List item three</ li > |
56 |
</ ul > |
57 |
</ div > |
58 |
</ div > |
59 |
< div class = "group" > |
60 |
< h3 >Section 4</ h3 > |
61 |
62 |
< div > |
63 |
< p >Description 4</ p > |
64 |
</ div > |
65 |
</ div > |
66 |
</ div > |
67 |
68 | </ body > |
69 | </ html > |