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)
请在切换后的面板中,点击标题栏中的 “返回” 按钮来测试效果。
<< 返回首页

浮出面板

取消确定

另一个面板

返回确定