Panel
浮出面板
浮出面板(以下简称 “面板”)是指视口底部浮出操作面板,其外观和行为类似于 iOS 系统上的 ActionSheet。其内容不仅仅局限于按钮或菜单,可以任意定制。
注意
- 此组件依赖 CMUI 的 Mask 组件。
- 此组件依赖 Zepto.js 的
fx
模块。此模块不在 Zepto 的默认包中,需要手动加载。
在使用浮出面板的 JS API 之前,需要在页面中写好(或由 JS 动态生成)相应的面板元素。面板元素的结构大致如下:
div.cm-panel //面板的容器
header.cm-panel-header //标题栏
h2.cm-panel-header-title //标题文字
a.cm-panel-header-btn.cm-panel-header-left //标题栏的左按钮
a.cm-panel-header-btn.cm-panel-header-right //标题栏的右按钮
main.cm-panel-content.cm-scroll-box //面板主体
ul.cm-list
...
面板标题栏的左右按钮也可以添加 .cm-panel-header-btn-minor
类,以作弱化处理。
浮出面板并不是静态的布局元素,且默认不显示,因此,如果要看它的样式,还是要由 JS API 来打开它,才能看到它的庐山真面目。
JS API
在 JS 中调用以下 API,即可触发相应的功能。
各参数的含义详见 API 文档(暂未完成)。
显示
CMUI.panel.show(elem, options)
- 显示
隐藏
CMUI.panel.hide(options)
请在浮出的面板中,点击标题栏中的左右按钮来测试隐藏效果。
注意:在默认情况下,点击遮罩层并不能隐藏浮出面板。
切至其它面板
CMUI.panel.switchTo(elem, options)
- 请在浮出的面板中,点击 “切至其它面板” 菜单来测试效果。
切回上一面板
CMUI.panel.switchBack(options)
- 请在切换后的面板中,点击标题栏中的 “返回” 按钮来测试效果。