jQuery Mobile 可折叠小部件 collapsedIcon 选项

介绍

在 jQuery Mobile 中，可折叠小部件是一种常用的 UI 控件。当用户点击标题部分时，该控件可以展开或折叠内容部分。可以使用 collapsedIcon 选项来自定义折叠时标题部分的图标。

语法

$( ".selector" ).collapsible({
  collapsedIcon: "custom-icon"
});

参数

collapsedIcon

用于指定折叠时标题部分的图标。可以使用内置的图标，也可以使用自定义图标。如果需要使用自定义图标，需要额外加入样式。

• 类型：字符串
• 默认值："plus"
• 可选值：内置图标，自定义图标样式类

举例

使用内置图标

以下代码将一个可折叠小部件的标题折叠时使用“向下箭头”图标。

$( "#my-collapsible" ).collapsible({
  collapsedIcon: "arrow-d"
});

使用自定义图标

以下代码将一个可折叠小部件的标题折叠时使用自定义图标。

<div data-role="collapsible">
  <h3 class="custom-header">
    Custom Header
  </h3>
  <p>
    Content...
  </p>
</div>

<style>
  .custom-header:after {
    content: "";
    display: inline-block;
    background-image: url(my-icon.png);
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
</style>

$( ".custom-header" ).each(function() {
  // 把折叠时显示的图标移动到标题的末尾
  $( this ).appendTo( $( this ).next() )
    .addClass( "ui-btn-icon-right ui-icon-custom" );
});

$( ".selector" ).collapsible({
  collapsedIcon: "custom"
});

参考链接

• jQuery Mobile 可折叠小部件官方文档