阅读(4179) 赞(18)

可扩展面板

2017-05-24 18:59:57 更新

toggle(item)调用方式

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

相关阅读

Material Design 可扩展面板设计规范

样式

完整 HTML 结构

这个示例包含了所有可以包含的 HTML 元素。

www.mdui.org - 可扩展面板 - 完整 HTML 结构

最简 HTML 结构

上例中的部分元素并不是必须的，下面的示例只包含必须的 HTML 元素。

www.mdui.org - 可扩展面板 - 最简 HTML 结构

默认打开的面板项

在 <div class="mdui-panel-item"></div> 元素上添加类 .mdui-panel-item-open 即可使该面板项处于默认打开状态。

www.mdui.org - 可扩展面板 - 默认打开的面板项

移除面板间距

在 <div class="mdui-panel"></div> 元素上添加类 .mdui-panel-gapless 即可移除打开的面板和其他面板之间的间距。

www.mdui.org - 可扩展面板 - 移除面板间距

弹出面板

在 <div class="mdui-panel"></div> 元素上添加类 .mdui-panel-popout 即可使打开的面板有弹出效果。

www.mdui.org - 可扩展面板 - 弹出面板

面板嵌套

可扩展面板可以互相嵌套。

www.mdui.org - 可扩展面板 - 面板嵌套

调用方式

通过自定义属性调用

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

通过 JavaScript 调用

实例化组件：

// selector 为 .mdui-panel 元素的 CSS 选择器或 DOM 元素
// options 为插件的参数，见下面的参数列表
var inst = new mdui.Panel(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.panel	面板项开始打开动画时，事件将被触发。	<div class="mdui-panel-item"></div>	event.detail.inst：实例
opened.mdui.panel	面板项结束打开动画时，事件将被触发。	<div class="mdui-panel-item"></div>	event.detail.inst：实例
close.mdui.panel	面板项开始关闭动画时，事件将被触发。	<div class="mdui-panel-item"></div>	event.detail.inst：实例
closed.mdui.panel	面板项结束关闭动画时，事件将被触发。	<div class="mdui-panel-item"></div>	event.detail.inst：实例

CSS 类名列表

类名	效果
.mdui-panel	定义一个可扩展面板。
.mdui-panel-gapless	移除打开的面板和其他面板之间的间距。
.mdui-panel-popout	使打开的面板具有弹出效果。
.mdui-panel-item	定义一个可扩展面板的面板项。
.mdui-panel-item-open	使面板项默认打开。
.mdui-panel-item-header	定义一个面板项的头部。
.mdui-panel-item-title	定义面板项头部的标题。
.mdui-panel-item-summary	定义面板项头部的概要。
.mdui-panel-item-arrow	定义面板项的展开收起图标。
.mdui-panel-item-body	定义面板项内容。
.mdui-panel-item-actions	定义面板项的操作栏。