一、基本信息

描述：创建可折叠内容块。

1.1、可折叠内容

要创建一个可折叠内容块，需要创建一个带data-role=”collapsible”的容器。你可以通过data-content-theme来设定可折叠内容的主题。

就在这个容器内，加上任何h1-h6元素或legend元素，jQuery Mobile框架会将其作为头部，并使得这个头部看起来像是可以点击的按钮，另外，还会在这个头部的左边加上一个“+”号以表示这个地方是可展开的。

在这个头部之后，加上任何你希望可折叠的HTML标记。jQuery Mobile框架会将这些课折叠内容包裹在一个容器中，而这个容器会在你点击头部的时候在隐藏、显示这两个状态之间切换。

可折叠内容在默认情况下是处于折叠状态的，也就是说你需要点一下头部才能看到课折叠区的内容。

<div data-role=”collapsible”>

<h3>I’m a header</h3>

<p>I’m the collapsible content. By default I’m closed, but you can click the header to open me.</p>

</div>

1.2、一开始就让可折叠内容显示出来

在容器上加上data-collapsed=”false”即可。

<div data-role=”collapsible” data-collapsed=”false”>

1.3、非内嵌式（指外观上看起来的样子）折叠

默认情况下，可折叠内容块看起来像是内嵌的。若想让其占满父容器的全部宽度并不带圆角，可以在带data-role=”collapsible”的容器上添加data-inset=”false”。

<div data-role=”collapsible” data-inset=”false”>

1.4、迷你型可折叠块

在data-role=”collapsible”容器上添加data-mini=”true”即可。

<div data-role=”collapsible” data-mini=”true”>

1.5、自定义图标（icon）

可折叠块头部的默认图标可通过data-collapsed-icon和data-expanded-icon属性来自定义。比如：data-collapsed-icon=”arrow-r”和data-expanded-icon=”arrow-d”。

1.6、规定图标的位置

通过data-iconpos属性可自定义图标的位置。如：data-iconpos=”right”。

1.7、设定可折叠内容区的主题

jQuery Mobile框架对可折叠内容区的样式并没有做多少设定——只是在头部和内容区之间加了一个外边距，并且头部会采用其所在容器的默认主题样式。

如果想在视觉上增强可折叠区头部和内容区之间的关联，可在容器上添加data-content-theme属性并指定一个主题swatch（调色板）字母。这会将swatch的边框和背景色应用到内容块上，并头部区域的下方圆角改为方角，相应地，将内容区底部改为圆角，以使得这些元素在视觉上看起来是聚合在一起的。

1.8、设定可折叠头部

要设定可折叠组件之头部的主题，需要在该组件外层元素上添加data-theme属性，并指定swatch字母。请注意，你可以像下面这样同时指定可折叠组件头部和内容区的主题（两个主题可以匹配同一个swatch字母）。

<div data-role=”collapsible” data-theme=”b” data-content-theme=”b”>

<h3>Header swatch B</h3>

<p>I’m the collapsible content with a themed content block set to “b”.</p>

</div>

1.9、嵌套可折叠组件

如果你需要，可折叠组件也是可以互相嵌套的。

另外，如果将多个可折叠组件合并在一起的话，你可以得到一个聚合可折叠组件，其行为类似于手风琴组件（accordion widget）。

1.10、提供预渲染标记（pre-rendered markup）

jQuery Mobile框架在初始化可折叠组件的时候会衍生出一些HTML标记，如果你事先自己写好这些HTML标记，并通过data-enhanced=”true”告知jQuery Mobile框架你已经事先提供了必要的HTML标记，那么jQuery Mobile框架就会跳过初始化可折叠组件时的一些DOM操作，这能减少加载页面所需的时间。

你需要写上通常由jQuery Mobile框架衍生出来的class类值；而对于dataset属性，则只需写那些非默认值的dataset就行了。

jQuery Mobile框架会在可折叠组件头部创建一个锚（a标签），将可折叠组件最外层元素内部的非头部内容包裹在一个div容器内（这个div容器就是可折叠内容的容器）。

我们在下面提供了一个可折叠组件预渲染标记的例子。在这个例子中，我们显式地设定了data-collapsed-icon=”arrow-r”，相应地，我们也在a标签（锚）上应用了ui-icon-arrow-r类值。这表明我们希望该可折叠组件在折叠状态下显示的图标为右方向箭头。

<div data-role=”collapsible” data-enhanced=”true” class=”ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed” data-collapsed-icon=”arrow-r”>

<h2 class=”ui-collapsible-heading ui-collapsible-heading-collapsed”>

<a href=”#” class=”ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-arrow-r”>
Pre-rendered collapsible

<span class=”ui-collapsible-heading-status”> click to expand contents</span>

</a>

</h2>

<div class=”ui-collapsible-content ui-collapsible-content-collapsed” aria-hidden=”true”>

<p>This is the collapsible-content</p>

</div>

</div>

二、选项

2.1、collapseCueText

字符串型，默认值为” click to collapse contents”。该文本是用来向使用屏幕阅读器的用户提供音频反馈用的。

如果某个可折叠组件的容器上未定义该值，但是那个可折叠组件是一个由一堆可折叠组件聚合起来的折叠组中的一个，那么这个未定义collapseCueText的可折叠组件会从其外的可折叠组件上继承相应的值。

亦可通过设定data-collapse-cue-text=”collapse with a click”来定义。

在初始化可折叠组件时指定collapseCueText：

$( “.selector” ).collapsible({

collapseCueText: ” collapse with a click”

});

在可折叠组件初始化之后获取、设定collapseCueText：

获取：var collapseCueText = $( “.selector” ).collapsible( “option”, “collapseCueText” );

设定：$( “.selector” ).collapsible( “option”, “collapseCueText”, ” collapse with a click” );

2.2、collapsed

布尔型，默认值为true。值为false时，可折叠组件最初会是展开的并且头部会有一个减号图标表示该组件可以折叠。可通过data-collapsed=”false”来设定。

在可折叠组件初始化时指定collapsed：

$( “.selector” ).collapsible({

collapsed: false

});

在可折叠组件初始化之后获取、设定collapsed：

获取：var collapsed = $( “.selector” ).collapsible( “option”, “collapsed” );

设定：$( “.selector” ).collapsible( “option”, “collapsed”, false );

2.3、collapsedIcon

字符型或布尔型，默认值为”plus”。设定可折叠容器头部在折叠状态下显示的图标。若未指定该值，可从外层可折叠组件继承相应的值。

可通过data-collapsed-icon=”arrow-r”来设定。

该选项支持多个类型的值：

• 字符型：你所想使用的图标的名字；
• 布尔型：除了使用图标名外，你也可以将选项的值设定为false。在这种情况下，可折叠组件在折叠和展开两种状态下都将显示同一个图标。可通过对可折叠组件应用data-collapsed-icon=”false”来将该选项的值设定为false。

在可折叠组件初始化时指定collapsedIcon：

$( “.selector” ).collapsible({

collapsedIcon: “arrow-r”

});

在可折叠组件初始化后获取、设定collapsedIcon：

获取：var collapsedIcon = $( “.selector” ).collapsible( “option”, “collapsedIcon” );

设定：$( “.selector” ).collapsible( “option”, “collapsedIcon”, “arrow-r” );

2.4、contentTheme

字符串型，默认值为null。为可折叠内容区设定颜色方法（swatch）。该选项的值可接受a-z中的一个字母，该字母将匹配你所用主题中的某个swatch。若某个可折叠组件的该选项并未定义，但是其外还有可折叠组件，那么该选项的值可从其外的可折叠组件上继承过来。

可能的值：swatch字母（a-z）

亦可通过data-content-theme=”b”来设定。

在可折叠组件初始化时指定contentTheme：

$( “.selector” ).collapsible({

contentTheme: “b”

});

在可折叠组件初始化后获取、设定contentTheme：

获取：var contentTheme = $( “.selector” ).collapsible( “option”, “contentTheme” );

设定：$( “.selector” ).collapsible( “option”, “contentTheme”, “b” );

2.5、corners

布尔型，默认值为true。若设定为true时，主题的圆角边框效果会生效。

若某可折叠组件上并未设定该值，但是其外层还有可折叠组件，那么这个值可从其外层上继承过来。

可通过data-corners=”false”来设定。

在可折叠组件初始化时指定corners：

$( “.selector” ).collapsible({

corners: false

});

在可折叠组件初始化后获取、设定该值：

获取：var corners = $( “.selector” ).collapsible( “option”, “corners” );

设定：$( “.selector” ).collapsible( “option”, “corners”, false );

2.6、defaults

布尔型，默认值为false。若为true，则表明该可折叠组件的其他选项全部采用默认值，这样jQuery Mobile框架就不用再去读取各个选项的值的，这会减少页面启动页面所需等待的时间。

也可通过data-defaults=”true”来设定。

在可折叠组件初始化时指定defaults：

$( “.selector” ).collapsible({

defaults: true

});

在可折叠组件初始化后获取、设定defaults：

获取：var defaults = $( “.selector” ).collapsible( “option”, “defaults” );

设定：$( “.selector” ).collapsible( “option”, “defaults”, true );

2.7、disabled

布尔型，默认值为false。若为true，将禁用可折叠组件。

亦可通过data-disabled=”true”来设定。

在可折叠组件初始化时指定disabled：

$( “.selector” ).collapsible({

disabled: true

});

在可折叠组件初始化后获取、设定disabled：

获取：var disabled = $( “.selector” ).collapsible( “option”, “disabled” );

设定：$( “.selector” ).collapsible( “option”, “disabled”, true );

2.8、enhanced

布尔型，默认值为false。若为true，表明已经在原始HTML标记中提供了预渲染标记。

亦可通过data-enhanced=”true”来进行设定。

在可折叠组件初始化时指定enhanced：

$( “.selector” ).collapsible({

enhanced: true

});

在可折叠组件初始化之后获取、设定enhanced：

获取：var enhanced = $( “.selector” ).collapsible( “option”, “enhanced” );

设定：$( “.selector” ).collapsible( “option”, “enhanced”, true );

2.9、expandCueText

字符串型，默认值为” click to expand contents”。该文本是用来向使用屏幕阅读器的用户提供音频反馈的。

若某可折叠组件的该选项未设值，但是该可折叠组件外层还有可折叠组件，那么该可折叠组件的该选项会从其外层可折叠组件上继承相应的值。

亦可通过data-expand-cue-text=” expand with a click”来设定。

在可折叠组件初始化时设定expandCueText：

$( “.selector” ).collapsible({

expandCueText: ” expand with a click”

});

在可折叠组件初始化后获取、设定expandCueText：

获取：var expandCueText = $( “.selector” ).collapsible( “option”, “expandCueText” );

设定：$( “.selector” ).collapsible( “option”, “expandCueText”, ” expand with a click” );

2.10、expandedIcon

字符串型，默认值为”minus”。设定可折叠组件在展开状态时所显示的图标。该值可继承。

亦可通过data-expanded-icon=”arrow-d”来设定。

在可折叠组件初始化时指定expandedIcon：

$( “.selector” ).collapsible({

expandedIcon: “arrow-d”

});

在可折叠组件初始化后获取、设定expandedIcon：

获取：var expandedIcon = $( “.selector” ).collapsible( “option”, “expandedIcon” );

设定：$( “.selector” ).collapsible( “option”, “expandedIcon”, “arrow-d” );

2.11、heading

字符串型，默认值为”h1,h2,h3,h4,h5,h6,legend”。在可折叠组件的容器内，第一个符合这些选择器表达式的直接子元素会被当做这个可折叠组件的头部。

亦可通过data-heading=”.mycollapsibleheading”进行设定。

在可折叠组件初始化时指定heading：

$( “.selector” ).collapsible({

heading: “.mycollapsibleheading”

});

在可折叠组件初始化结束后获取、设定heading：

获取：var heading = $( “.selector” ).collapsible( “option”, “heading” );

设定：$( “.selector” ).collapsible( “option”, “heading”, “.mycollapsibleheading” );

2.12、iconpos

字符串型，默认值为”left”。指定可折叠组件头部所用图标。该值可继承。

可能的值有：left、right、top、bottom、none、notext。

亦可通过data-iconpos=”right”来设定。

在可折叠组件初始化时指定iconpos：

$( “.selector” ).collapsible({

iconpos: “right”

});

在可折叠组件初始化后获取、设定iconpos：

获取：var iconpos = $( “.selector” ).collapsible( “option”, “iconpos” );

设定：$( “.selector” ).collapsible( “option”, “iconpos”, “right” );

2.13、initSelector

其值为选择器表达式，默认值为”:jqmData(role=’collapsible’)”。

注意：该选项在jQuery Mobile 1.4.0中已经不建议使用了，并且会在1.5.0版本中移除。在jQuery Mobile 1.4.0中initSelector已经不再作为组件选项了，而是直接在组件原型（widget prototype）内进行声明。因此，你可以通过在mobileinit事件发生时在原型（prototype）上覆写initSelector来达到指定自定义值的目的。

$( document ).on( “mobileinit”, function() {

$.mobile.collapsible.prototype.initSelector = “div.custom”;

});

再一次请注意，请务必将mobileinit事件绑定代码置于jQuery代码之后、jQuery Mobile代码之前，因为mobileinit事件是在加载jQuery Mobile的过程中被触发的。

该选项的值为jQuery选择器表达式。jQuery Mobile框架会根据这些值来选取匹配的元素进行可折叠组件初始化。

2.14、inset

布尔型，默认值为true。若设定为false，可折叠组件将会占满父级容器的全部宽度，并且将不会使用圆角。该值可继承。

亦可通过data-inset=”false”来设定。

在可折叠组件初始化时指定inset：

$( “.selector” ).collapsible({

inset: false

});

在可折叠组件初始化之后获取、设定inset：

获取：var inset = $( “.selector” ).collapsible( “option”, “inset” );

设定：$( “.selector” ).collapsible( “option”, “inset”, false );

2.15、mini

布尔型，默认值为false。若设为true，会实现迷你型可折叠组件。该值可继承。

亦可通过data-mini=”true”进行设定。

在可折叠组件初始化时指定mini：

$( “.selector” ).collapsible({

mini: true

});

在可折叠组件初始化结束后获取、设定mini：

获取：var mini = $( “.selector” ).collapsible( “option”, “mini” );

设定：$( “.selector” ).collapsible( “option”, “mini”, true );

2.16、theme

字符串型，默认值为null。设定可折叠组件的配色方案（swatch）。其值可为a-z中的一个字母，匹配你所用主题中的对应swatch。

该值可继承。

可能的值：swatch字母（a-z）

亦可通过data-theme=”b”进行设定。

在可折叠组件初始化时指定theme：

$( “.selector” ).collapsible({

theme: “b”

});

在可折叠组件初始化结束后获取、设定theme：

获取：var theme = $( “.selector” ).collapsible( “option”, “theme” );

设定：$( “.selector” ).collapsible( “option”, “theme”, “b” );

三、方法

3.1、collapse()

折叠可折叠组件。

该方法不接受任何参数。

调用该方法：$( “.selector” ).collapsible( “collapse” );

3.2、destroy()

彻底移除可折叠组件功能。这会让元素变回它被初始化成可折叠组件以前的状态。

该方法不接受任何参数。

调用该方法：$( “.selector” ).collapsible( “destroy” );

3.3、disable()

禁用可折叠组件。

该方法不接受任何参数。

调用该方法：$( “.selector” ).collapsible( “disable” );

3.4、enable()

启用可折叠组件。

该方法不接受任何参数。

调用该方法：$( “.selector” ).collapsible( “enable” );

3.5、expand()

展开可折叠组件。

该方法不接受任何参数。

调用该方法：$( “.selector” ).collapsible( “expand” );

3.6、option( optionName )

获取optionName选项当前的值。optionName参数为字符串型。

调用方法：var isDisabled = $( “.selector” ).collapsible( “option”, “disabled” );

3.7、option()

获取一个对象，该对象含有一些反应可折叠组件当前各选项名及其对应值的名值对。

调用方法：var options = $( “.selector” ).collapsible( “option” );

3.8、option( optionName, value )

设定可折叠组件中选项optionName的值为value。

optionName参数为字符串型。

调用方法：$( “.selector” ).collapsible( “option”, “disabled”, true );

3.9、option( options )

对可折叠组件中的一个或多个选项进行设定。options参数为object类型。

调用方法：$( “.selector” ).collapsible( “option”, { disabled: true } );

四、事件

4.1、collapse( event, ui )

当可折叠组件被折叠时触发该事件。event参数为事件，ui为对象。

注意：ui对象为空对象，但是为与其他事件协调，请不要省略。

在可折叠组件初始化时指定collapse回调函数：

$( “.selector” ).collapsible({

collapse: function( event, ui ) {}

});

将一个事件监听器绑定到collapsiblecollapse事件上：

$( “.selector” ).on( “collapsiblecollapse”, function( event, ui ) {} );

4.2、create( event, ui )

创建完可折叠组件时会触发该事件。event参数为事件，ui参数为对象。

请注意，ui参数为空对象，但是为了与其他事件保持一致，请不要省略掉。

在初始化可折叠组件时指定create回调函数：

$( “.selector” ).collapsible({

create: function( event, ui ) {}

});

将一个事件监听器绑定到collapsiblecreate事件上：

$( “.selector” ).on( “collapsiblecreate”, function( event, ui ) {} );

4.3、expand( event, ui )

当可折叠组件被展开时会被触发。event参数为事件，ui参数为对象。

注意：ui参数为空对象，但是为了与其他事件保持一致，请不要省略掉。

在初始化可折叠组件时指定expand回调函数：

$( “.selector” ).collapsible({

expand: function( event, ui ) {}

});

将一个事件监听器绑定到collapsibleexpand事件上：

$( “.selector” ).on( “collapsibleexpand”, function( event, ui ) {} );

五、DEMO

可折叠内容块代码案例：

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>collapsible demo</title>

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>

<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>

<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

</head>

<body>

<div data-role=”page” id=”page1″>

<div data-role=”header”>

<h1>jQuery Mobile Example</h1>

</div>

<div role=”main” class=”ui-content”>

<div data-role=”collapsible”>

<h3>I’m a header</h3>

<p>I’m the collapsible content. By default I’m closed, but you can click the header to open me.</p>

</div>

</div>

</div>

</body>

</html>

参考：http://api.jquerymobile.com/collapsible/

以上，滕运锋，2016年1月1日于上海