codecamp

Collapse 折叠内容块插件

Collapse 插件用于折叠或展开内容块。

该插件本身不带任何样式,你需要自行编写样式、或者与其他组件配合使用。

调用方式

  • 通过自定义属性调用
  • 通过 JavaScript 调用


HTML 结构

这是一个最基础的 HTML 结构:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

添加类 .mdui-collapse-item-open 可以使内容块处于默认展开状态:

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

含类 .mdui-collapse-item-arrow 的元素会在内容块展开时翻转 180 度:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>


调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码。只需在 <div class="mdui-collapse"></div> 元素上添加 mdui-collapse="options" 属性即可激活该插件。

在线运行


通过 JavaScript 调用

实例化插件:

// selector 为元素的 CSS 选择器或 DOM 元素
// options 为插件的参数,见下面的参数列表
var inst = new mdui.Collapse(selector, options);

在线运行


参数

 参数名 类型 默认值 描述
 accordion boolean false 是否启用手风琴效果。
  • 为 true 时,最多只能有一个内容块处于打开状态,打开一个内容块时会关闭其他内容块。
  • 为 false 时,可同时打开多个内容块。


方法

 方法名  描述
 open(item) 打开内容块。
  • item:内容块的索引号、或者 DOM 元素、或者 CSS 选择器。
 close(item) 关闭内容块。
  • item:内容块的索引号、或者 DOM 元素、或者 CSS 选择器。
 toggle(item) 切换内容块状态。
  • item:内容块的索引号、或者 DOM 元素、或者 CSS 选择器。
 openAll() 打开所有内容块。该方法仅在 accordion 为 false 时有效。
 closeAll() 关闭所有内容块。


事件

 事件 描述 目标 参数
 open.mdui.collapse 内容块开始打开动画时,事件将被触发。 <div class="mdui-collapse-item"></div> event.detail.inst:实例
 opened.mdui.collapse 内容块结束打开动画时,事件将被触发。 <div class="mdui-collapse-item"></div> event.detail.inst:实例
 close.mdui.collapse 内容块开始关闭动画时,事件将被触发。 <div class="mdui-collapse-item"></div> event.detail.inst:实例
 closed.mdui.collapse 内容块结束关闭动画时,事件将被触发。 <div class="mdui-collapse-item"></div> event.detail.inst:实例


进度指示器
Headroom 插件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }