jQuery Mobile 可折叠小部件 iconpos 选项

在 jQuery Mobile 中，可折叠小部件通常有一个图标和一个标题来指示可展开内容的状态。iconpos 选项可以用来定义图标和标题的方位。

语法

$( ".selector" ).collapsible({ iconpos: "position" });

参数

参数 position 接受以下可选值：

• left：图标显示在标题左边。默认值。
• right：图标显示在标题右边。
• top：图标显示在标题上方。
• bottom：图标显示在标题下方。

示例

左侧图标

<div data-role="collapsible" data-iconpos="left">
    <h3>Title</h3>
    <p>Content</p>
</div>

右侧图标

<div data-role="collapsible" data-iconpos="right">
    <h3>Title</h3>
    <p>Content</p>
</div>

上方图标

<div data-role="collapsible" data-iconpos="top">
    <h3>Title</h3>
    <p>Content</p>
</div>

下方图标

<div data-role="collapsible" data-iconpos="bottom">
    <h3>Title</h3>
    <p>Content</p>
</div>

以上示例中的 data-role="collapsible" 是指可折叠小部件，<h3> 是标题，<p> 是内容。

注意：该选项只适用于 jQuery Mobile 版本 1.4.0 及以上。