jQuery Mobile Collapsibleset Widget 折叠图标选项

jQuery Mobile 是一个流行的HTML5框架，它提供了一组强大的UI组件，使得创建移动应用程序变得非常简单。

Collapsibleset Widget 是jQuery Mobile的一个组件，它提供了折叠和展开内容的选项组，并且可以添加图标，使页面更加美观。

如何使用

首先，在页面头部引入jQuery Mobile库：

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

然后，使用以下代码创建一个Collapsibleset Widget：

<div data-role="collapsibleset">
  <div data-role="collapsible">
    <h3>Section 1</h3>
    <p>内容1</p>
  </div>
  <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>内容2</p>
  </div>
</div>

使用 data-role="collapsibleset" 创建一个Collapsibleset Widget。在Collapsibleset中，您可以使用 data-role="collapsible" 创建一个可收缩的部分（即选项卡）。

每个可折叠部分包括一个标题和内容。标题可以是任何HTML元素，但通常使用 <h3> 标签。内容可以是任何HTML元素。

添加图标

可以使用 data-iconpos 属性添加图标以更改可折叠部分的外观。 data-iconpos 属性接受以下值：

• right : 将图标放在标题文本的右侧（默认值）
• left : 将图标放在标题文本的左侧
• top : 将图标放在标题文本的顶部
• bottom : 将图标放在标题文本的底部

可以使用 data-icon 属性指定要使用的图标。如：

<div data-role="collapsible" data-icon="arrow-r">
  <h3>Section 1</h3>
  <p>内容1</p>
</div>

data-icon 属性的值是定义在jQuery Mobile主题CSS中的图标名称，例如 arrow-r 代表向右的箭头图标。

修改样式

可以使用data-theme属性为Collapsibleset Widget更改外观。例如，可以使用以下代码将Collapsibleset Widget的主题更改为"data-theme-b"：

<div data-role="collapsibleset" data-theme="b">
  <div data-role="collapsible">
    <h3>Section 1</h3>
    <p>内容1</p>
  </div>
  <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>内容2</p>
  </div>
</div>

总结

Collapsibleset Widget 是一个非常有用的组件，可以轻松创建可折叠的内容选项卡，并允许添加图标和修改样式。