ActionSheet : 对话框组件(基于Popup)
示例
介绍
对话框组件(基于Popup)
与Popup的区别在于,Popup默认显示在窗口的中央,ActionSheet默认显示在窗口的底部
使用方法
define(['fui/actionsheet/1.0','util/touchevents/1.0','jquery'], function(ActionSheet, touchevent, $){ var onEvnet = $.os.supportsTouch ? 'tap' : 'click'; var actionSheet = new ActionSheet({ tpl:".fui-dialog-body", isModal:true, buttons:[ { 'event':onEvnet,//事件类型 'selector':'.fui-btn1',//要绑定事件的元素 'callback':function(paramObj){//事件的回调函数 alert(paramObj.name); console.log(this);//这里的this指向的是当前的组件实例 }, 'paramObj':{//回调函数要传入的参数(封装成对象便于管理) 'name':'按钮1' } }, { 'event':onEvnet, 'selector':'.fui-btn2', 'callback':function(paramObj){ alert(paramObj.name); }, 'paramObj':{ 'name':'按钮2' } }, { 'event':onEvnet, 'selector':'.d-close', 'callback':function(paramObj){ this.hide(); } } ] }); //dialog显示 actionSheet.show(); $(".show-action").on(onEvnet,function(){ actionSheet.show(); }); });
配置参数
配置参数 | 参数类型/可选值 | 参数默认值 | 作用说明 |
---|---|---|---|
tpl | String | / | popup内容的class或id |
zindex | number | 1688 | 浮层的z-index值 |
isModal | Boolen | true | 是否有浮层蒙板 |
maskAttr | Object | { maskColor:'#000', maskOpacity:"0.3" } | 浮层蒙板的style样式 |
buttons | [{},{}...] | / | 给组件内部的元素绑定事件和回调 |
timers | [{},{}...] | / | 是否连续 |
disableScroll | Boolen | false | 给组件设置延时回调的函数 |
beforeOpen | Function | function(popup){ return true; } | 浮层打开前的事件回调,返回Boolean值。若返回false,则浮层不打开 |
beforeClose | Function | function(popup){ } | 浮层关闭前的事件回调,可用作事件清理 |
contentSuccess | Function | function(popup){ } | 浮层创建后的事件回调,可以动态填入数据或内容 |
公共方法
方法名称 | 入参说明 | 返回值 | 作用说明 |
---|---|---|---|
show | / | / | 显示popup |
hide() | / | / | 隐藏popup |
position ({}) | {x:Number,y:Number} | / | 手动设置popup的位置 |