📌  相关文章
📜  jQuery Mobile 可折叠小部件 expandIcon 选项(1)

📅  最后修改于: 2023-12-03 15:02:10.986000             🧑  作者: Mango

jQuery Mobile 可折叠小部件 expandIcon 选项

介绍

jQuery Mobile 是一款移动端 UI 框架，提供了各种常用的小部件来构建移动应用程序。其中，可折叠小部件（Collapsible Widget）是常用的 UI 控件之一，可以在点击触发后通过展开或收起来展示或隐藏内容。而 expandIcon 是可折叠小部件的一个选项，可以用来控制小部件的箭头图标，使其根据状态自动旋转。

用法

expandIcon 选项用于可折叠小部件的初始化，用来控制点击时箭头图标的旋转。以下是一个示例：

<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" data-collapsed="true" data-expand-icon="plusIcon" data-collapse-icon="minusIcon" data-expand-icon-position="right">
    <h2>小部件标题</h2>
    <p>小部件内容</p>
</div>

示例中，我们通过设置 data-expand-icon 和 data-collapse-icon 分别对应展开和收起状态下的箭头图标（可以是任何合法的图片路径），同时使用 data-expand-icon-position 来指定图标的位置（left 或 right）， data-iconpos 来指定标题文字和图标的对齐方式， data-collapsed 和 data-collapsed-icon 分别用来设置小部件初始化时的状态和图标。

在 JavaScript 中，我们可以通过以下代码修改 expandIcon 选项：

$('#my_collapsible').collapsible({
  expandIcon: 'myCustomIcon'
});
参考链接