jQuery 入门教程(22): jQuery UI Accordion示例

本篇介绍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>

jQuery 入门教程(22): jQuery UI Accordion示例_第1张图片折叠内容

Accordion 组件缺省情况下总有一项内容是展开的,如说图Section1的内容是可见的,点击其它部分的标题,该部分内容可见,但无法将所有内容都折叠起来,如果要支持所有部分都可以折叠,可以通过配置collapsible 属性,如:

1 $(function() {
2     $( "#accordion" ).accordion({
3       collapsible: true
4     });
5   });

jQuery 入门教程(22): jQuery UI Accordion示例_第2张图片自定义图标

可以自定义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   });

jQuery 入门教程(22): jQuery UI Accordion示例_第3张图片设置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,

你可能感兴趣的:(jQuery 入门教程(22): jQuery UI Accordion示例)