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的位置