`
mapdigit
  • 浏览: 243404 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

本篇介绍Accordion组件（类似手风琴可以折叠的UI组件）。

基本用法

jQuery Accordion UI组件可以把一个包含有具有Header (标题头）和Content（内容）对的容器转变成Accordion组件。
比如如下一个Id=”accordion”Div HTML元素。

1 <divid="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 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demos</title>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js"></script>
8 <scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script>
9
10 <script>
11 $(function () {
12
13 });
14 </script>
15 </head>
16 <body>
17 <divid="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 varicons = {
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 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demos</title>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js"></script>
8 <scriptsrc="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 <h3class="docs">Resize the outer container:</h3>
36
37 <divid="accordion-resizer"class="ui-widget-content">
38 <divid="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>

20130314004鼠标移动式自动打开内容

缺省情况下，打开Accordion某个部分内容，是点击该部分标题，如果需要实现移动鼠标到该部分自动展开内容，可以设置event属性，例如：

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

支持调整顺序

使用sortable方法允许重新调整Accordion每个部分的顺序，可以通过拖放的方法调整顺序：

1 <!doctype html>
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demos</title>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js"></script>
8 <scriptsrc="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 <divid="accordion">
34 <divclass="group">
35 <h3>Section 1</h3>
36
37 <div>
38 <p>Description 1</p>
39 </div>
40 </div>
41 <divclass="group">
42 <h3>Section 2</h3>
43 <div>
44 <p>Description 2</p>
45 </div>
46 </div>
47 <divclass="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 <divclass="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>

20130314005注意，这里使用Header属性，标题部分由div ,h3 共同构成。

分享到：
| jQuery 入门教程(21): jQuery UI 示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery教程自学笔记

    3.3 JQuery UI示例 44 3.3.1 Accordion组件（手风琴似折叠） 44 3.3.2 JQuery UI Autocomplete（自动完成） 56 3.3.3 JQuery UI Button（按钮） 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI ...

    JQuery教程自学笔记总结

    3.3 JQuery UI示例 44 3.3.1 Accordion组件（手风琴似折叠） 44 3.3.2 JQuery UI Autocomplete（自动完成） 56 3.3.3 JQuery UI Button（按钮） 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI ...

    JQuery教程自学笔记(最新)

    3.3 JQuery UI示例 44 3.3.1 Accordion组件（手风琴似折叠） 44 3.3.2 JQuery UI Autocomplete（自动完成） 56 3.3.3 JQuery UI Button（按钮） 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI ...

    jQuery权威指南-源代码

    第1章　jQuery开发入门/1 1.1　jQuery概述/2 1.1.1　认识jQuery /2 1.1.2　jQuery基本功能/2 1.1.3　搭建jQuery开发环境/3 1.1.4　编写第一个简单的jQuery应用/3 1.1.5　jQuery程序的代码风格/5 1.2　jQuery的简单...

    JQuery UI 中文帮助文档

    带示例 Draggable Droppable Resizable Selectable Sortable 部件 Accordion Datepicker Dialog Progressbar Slider Tabs 动画 AddClass RemoveClass Animate Effect Hide Show SwitchClass Toggle ToggleClass

    ExtAspNet_v2.3.2_dll

    -增加Accordion和Tree配合使用的示例(other\accordion_tree_run.aspx)。 -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件，此控件可以使用BorderLayout和指定PageManager的...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -增加Accordion和Tree配合使用的示例(other\accordion_tree_run.aspx)。 -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件，此控件可以使用BorderLayout和指定PageManager的...

    精通AngularJS part1

    jQuery与AngularJS39 苹果与橙子40 窥视未来41 14总结41 第2章构建与测试43 21介绍示例应用44 熟悉问题领域44 技术栈45 持久化存储46 MongoLab46 服务器端环境47 第三方JavaScript库48 BootstrapCSS48 ...

Magicbox
Global site tag (gtag.js) - Google Analytics