首页 > API文档 > JavaScript API
弹层
更新时间: 2021-12-08 10:34:18

弹层

接口名接口描述
widget.showActionSheet显示弹出菜单
widget.showAlert显示警告窗口
widget.showConfirm显示确认窗口
widget.showPreloader显示加载提示
widget.hidePreloader隐藏加载提示
widget.showModal显示模态窗口
widget.showPrompt显示带输入框的窗口
widget.showToast显示Toast
widget.showDateTimePicker显示日期选择控件
widget.showEditor显示文本编辑器

显示单选菜单

image10

代码样例

FSOpen.widget.showActionSheet({
    title: '标题',
    cancelBtnLabel: '取消',
    actionBtnLabels: ['湖人', '马刺', '火箭'],
    onSuccess: function(resp) {
        if (resp.actionIndex == 0) {
            alert('选择了湖人');
        } else if (resp.actionIndex == 1) {
            alert('选择了马刺');
        } else {
            alert('选择了火箭');
        }
    },
    onFail: function(error) {
        alert('获取失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showActionSheet
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
titleString控件标题。如果为空,Android系统默认显示“选项”,ios系统不显示。
cancelBtnLabelString取消选项文本,默认为“取消”,点击后收起单选列表。
actionBtnLabelsArray[String]选项文本列表

成功回调返回参数:

参数类型说明
actionIndexNumber选择的索引号,从0开始,从上到下依次递增+1。

显示警告窗口

image11

代码样例

FSOpen.widget.showAlert({
    title: '标题',
    content: '消息内容',
    btnLabel: '我知道了',
    onSuccess: function(resp) {
        // return nothing
    },
    onFail: function(error) {
        alert('操作失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showAlert
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
titleString弹窗标题
contentString弹窗消息内容
btnLabelString弹窗按钮文本,默认“OK”。

显示确认窗口

image12

代码样例

FSOpen.widget.showConfirm({
    title: '标题',
    content: '消息内容',
    btnLabels: ['取消','确定'],
    onSuccess: function(resp) {
        if (resp.btnIndex == 0) {
            alert('取消');
        } else {
            alert('确定');
        }
    },
    onFail: function(error) {
        alert('操作失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showConfirm
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
titleString弹窗标题
contentString弹窗消息内容
btnLabelsString弹窗左右按钮的文本,最多两个。

成功回调返回参数:

参数类型说明
btnIndexNumber点击的按钮索引,从0开始,从左到右分别为0、1

显示加载提示

image13

代码样例

FSOpen.widget.showPreloader({
    text: '正在加载中',
    icon: true,
    onSuccess: function(resp) {
        // do sth
    },
    onFail: function(error) {
        // do sth
    }
});

方法名:FSOpen.widget.showPreloader
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
textStringloading显示的文本,空表示不显示文字
iconBoolean是否显示图标,默认为true;若text为空,则强制为true。

隐藏加载提示

代码样例

FSOpen.widget.hidePreloader();

方法名:FSOpen.widget.hidePreloader
JS版本:2.0.0
客户端支持版本:5.4.0及以上

显示模态提示

image14

代码样例

FSOpen.widget.showModal({
    title: '升级提示',
    imgUrl: 'https://open.71360.com/fscdn/img?imgId=group1/M00/02/04/rBEiBVfZFl6AOJ6eAABPHGYzNOo452.png',
    content: '有很多新功能哦~',
    btnLabels: ['我知道了','升级'],
    onSuccess: function(resp) {
        if (resp.btnIndex == 0) {
            alert('取消');
        } else {
            alert('确定');
        }
    },
    onFail: function(error) {
        alert('操作失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showModal
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
titleString弹窗标题
imgUrlString弹窗图片内容,默认为空不显示
contentString弹窗文本内容,默认为空
btnLabelsString弹窗左右按钮的文本,最多两个。

成功回调返回参数:

参数类型说明
btnIndexNumber点击的按钮索引,从0开始,从左到右分别是0、1

显示带输入框的窗口

image15

代码样例

FSOpen.widget.showPrompt({
    title: '标题',
    content: '消息内容',
    btnLabels: ['取消','确定'],
    onSuccess: function(resp) {
        if (resp.btnIndex == 0) {
            alert('取消');
        } else {
            alert('确定');
        }
    },
    onFail: function(error) {
        alert('操作失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showPrompt
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
titleString弹窗标题说明
contentString弹窗消息内容
btnLabelsString弹窗左右按钮的文本,最多两个。

成功回调返回参数:

参数类型说明
btnIndexNumber点击的按钮索引,从0开始,从左到右分别是0、1
valueString弹窗输入框的值

显示Toast

代码样例

FSOpen.widget.showToast({
    icon: 'success',
    text: '提示信息',
    duration: 3000,
    delay: 1000,
    onSuccess: function(resp) {
        // do sth
    },
    onFail: function(error) {
        // do sth
    }
});

方法名:FSOpen.widget.showToast
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
textString要显示的提示信息,默认为空
iconString要显示的图标样式,有successerror。默认为success
durationNumber显示持续时间,单位毫秒,默认按系统规范
delayNumber延迟显示时间,单位毫秒,默认0

显示日期选择控件

image17

FSOpen.widget.showDateTimePicker({
    dateType: 'month',
    defaultValue: '2015-03-24',
    onSuccess: function(resp) {
        alert('选择的时间值:' + resp.value);
    },
    onFail: function(error) {
        alert('获取失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showDateTimePicker
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
dateTypeString时间选择器的选择类型。此类型将决定输入和输出的格式类型
defaultValueString时间默认值,若为空将根据dateType获取当前时间的对应值,如dateTypetime(时分)类型,则为24小时制。

dateType参数说明:

输入输出格式说明
monthyyyy-MM年月
dayyyyy-MM-dd年月日
timeHH:mm时分,24小时制
weekyyyy-MM-dd~yyyy-MM-dd
day|timeyyyy-MM-dd HH:mm年月日 时分

成功回调返回参数:

参数类型说明
valueString选择的时间字符串,与dateType对应。如果有时分秒,则为24小时制。

显示文本编辑器

image18

代码样例

FSOpen.widget.showEditor({
    min: 1,
    max: 140,
    placeholder: '请输入内容',
    navbar: {
        title: '标题',
        leftLabel: '返回',
        leftArrow: true,
        rightLabel: '发送'
    },
    backFillData: {
        content: '我是输入',
    },
    components: ['emoji', 'at'],
    onSuccess: function(resp) {
        alert('你的输入是:' + resp.content);
    },
    onFail: function(error) {
        alert('操作失败,错误码:' + error.errorCode);
    }
});

方法名:FSOpen.widget.showEditor
JS版本:2.0.0
客户端支持版本:5.4.0及以上

调用参数说明:

参数类型必须说明
minNumber最小输入字符限制,不区分中英文。默认不做限制(可以为空)
maxNumber最大输入字符限制,不区分中英文。系统最多支持3000字。
placeholderString占位符。默认为空
navbarObject输入框标题栏控制,具体说明见下面。
backFillDataObject回填数据内容,仅支持文本数据回填,具体说明见下面。默认为空
componentsArray[String]快捷输入组件。目前支持:emoji-表情,at-@功能

navbar参数字段说明:

参数类型说明
titleString顶部中间抬头文本
leftLabelString顶部左侧按钮文本
leftArrowBoolean顶部左侧按钮是否使用箭头图标,iOS适用。
rightLabelString顶部右侧按钮文本

backFillData参数字段说明:

参数类型说明
contentString需要回填的文本内容

成功回调返回参数:

参数类型说明
contentString输入纯文本内容,如“批准[微笑],@北京研发中心”。Emoji表情由H5端自行解析