你好,游客 登录 注册 搜索
背景:
阅读新闻

jQuery 入门教程(22): jQuery UI Accordion示例 - 引路蜂移动软件

[日期:2013-03-20] 来源:  作者: [字体: ]

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

20130314001折叠内容

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

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

20130314002自定义图标

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

20130314003设置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>