jQuery 入门教程(22): jQuery UI Accordion示例
2014-01-15 12:45
369 查看
本篇介绍Accordion组件(类似手风琴可以折叠的UI组件)。
jQuery Accordion UI组件可以把一个包含有具有Header (标题头)和Content(内容)对的容器转变成Accordion组件。
比如如下一个Id=”accordion”Div HTML元素。
对于<div id=”accordion”>里面的元素,According允许使用任意的标记,只要是一个Header紧接着一个Content,比如上面的H3,你可以换成H1,H2等其它标记,或者通过Header选项来配置。
有了这样的HTML元素,然后对其使用Accordion方法,就将该HTML元素变成Accordion 样式了
本例完整代码如下:
Accordion 组件缺省情况下总有一项内容是展开的,如说图Section1的内容是可见的,点击其它部分的标题,该部分内容可见,但无法将所有内容都折叠起来,如果要支持所有部分都可以折叠,可以通过配置
可以自定义Accordion 组件标题前的图标,缺省的图标为箭头(未展开是箭头向右,展开时向下),使用jQuery CSS框架中定义的类或是通过自定义背景图像类,可以重新配置这两个图标:
因为Accordion由“Block级”元素组成(可以参加CSS的display),因此它缺省在水平方向占据父元素的宽度,为了在高度方向也能充满其父容器,可以通过配置
.HeightStyle 可以使用的值如下:
缺省情况下,打开Accordion某个部分内容,是点击该部分标题,如果需要实现移动鼠标到该部分自动展开内容,可以设置event属性,例如:
使用sortable方法允许重新调整Accordion每个部分的顺序,可以通过拖放的方法调整顺序:
注意,这里使用Header属性,标题部分由div
,h3 共同构成。
本篇介绍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 > |
有了这样的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 > |
注意,这里使用Header属性,标题部分由div
,h3 共同构成。
相关文章推荐
- Jquery树插件zTree用法入门教程
- jQuery入门指南教程学习
- 基于jquery插件开发入门教程
- jquery 入门教程 [翻译] 推荐
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- Word2003入门动画教程22:页面分栏和文字排列方向
- jQuery入门指南教程
- 零基础入门jQuery视频教程
- jQuery 入门教程(27): jQuery UI Button示例(二)
- jQuery 学习笔记 之二 附: jQuery入门指南教程列表
- jQuery 入门教程(40): jQuery UI Spiner 示例
- jQuery 入门教程(14): 添加HTML元素
- jQuery 入门教程(5): 显示/隐藏内容
- jQuery 入门教程(20): jQuery UI 基本工作过程
- [置顶] Jquery入门指南教程
- jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
- jQuery 入门教程(39): jQuery UI Slider 示例(二)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery LigerUI 使用教程入门篇
- jQuery 入门教程(3): Selectors