首页 > API文档 > UI组件
弹层
更新时间: 2024-03-29 14:43:03

弹层


接口名接口描述
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端自行解析


留言、咨询与反馈
我们会在1个工作日内和您联系(工作时间 周一至周五 9:00-18:00)
留言、咨询与反馈
请填写联系方式

网站提交留言-隐私协议

感谢您浏览本网站相关信息!

1、本协议是用户(“您”)与本网站所订立的契约,为方便您深入了解业务及提交需求等,本网站将为您提供更加个性化的留言表单服务,您在提交留言表单时,我们可能会收集和使用您的相关信息。我们非常重视用户信息的保护,我们将按照法律法规要求,采取相应的安全保护措施。

2、除非您已充分阅读、理解并同意接受和遵守本协议,否则,请勿提交留言表单。 您如果继续提交即表示接受本协议,本协议即在您与本网站之间产生法律效应。