• bootBox 提示框插件


    引用地址:https://blog.csdn.net/kiwi4814/article/details/54730109

    bootbox.js官方文档中文版

    简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框。 
    不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事件。所以 在使用confirm()对话框时,请记住这一点,因为它不是本地确认对话框的替代。 任何取决于用户选择的代码都必须放在回调函数中。

    alert

    alert是只有单个按钮的对话框,按ESC键或单击关闭按钮可关闭对话框。 
    bootbox.alert("Your message here…") 
    message中可以放html语言,比如: 
    bootbox.alert("Your message <b>here…</b>") 
    回调函数: 
    bootbox.alert("Your message here…", function(){ /* your callback code */ }) 
    options选项自定义对话框:

    bootbox.alert({ 
      size: "small",
      title: "Your Title",
      message: "Your message here…", 
      callback: function(){ /* your callback code */ }
    })

    Confirm

    Confirm是具有确定和取消按钮的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。 
    需要注意的是,使用confirm时回调函数是必须的。 
    bootbox.confirm("Are you sure?", function(result){ /* your callback code */ }) 
    options选项:

    bootbox.confirm({ 
      size: "small",
      message: "Are you sure?", 
      callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ }
    })

    Prompt

    Confirm是提示用户进行输入操作并确定或者取消的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。 
    同样,prompt中回调函数也是必须的。 
    bootbox.prompt("What is your name?", function(result){ /* your callback code */ }) 
    options选项:

    bootbox.prompt({ 
      size: "small",
      title: "What is your name?", 
      callback: function(result){ /* result = String containing user input if OK clicked or null if Cancel clicked */ }
    })

    注意:prompt在使用options选项时需要title选项,并且不允许使用message选项。

    Custom Dialog

    一个完全自定义的对话框方法,它只接收一个参数 - options对象。也就是说按ESC键时,这个自定义对话框将不会自动关闭,需要使用onEscape函数手动实现此行为。 
    options至少要有message选项,这时候将会出现一个不可撤销的对话框,一般用作“loading”界面,如: 
    bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' })

    options选项参数详解

    1. message 
      类型:String | Element 
      描述:显示在对话框上的内容 
      必需:alert | confirm | custom dialogs
    2. title 
      类型:String | Element 
      描述:为对话框添加标题,默认大小为<h4> 
      必需:prompts
    3. callback 
      类型:Function 
      描述:回调函数 
      alert回调不提供参数,函数体为空则会被忽略,如:bootbox.alert({ message: "I'm an alert!", callback: function() {} }) 
      confirm和prompt回调必须提供参数result。当为confirm时,result类型为boolean,用来判定是还是否;当为prompt时result将保存用户输入的值。
    bootbox.confirm("Are you sure?", function(result) {
        // result will be true or false
    }); 
    bootbox.prompt("What is your name?", function(result) {
        if (result === null) {
            // Prompt dismissed
        } else {
            // result has a value
        }
    }); 

    必需:confirm | prompt 

    4. onEscape 
    类型:Boolean | Function 
    描述:允许用户通过点击ESC来关闭对话框,点击ESC这将调用此选项。 
    默认值 : alert | confirm | prompt : true ; custom dialogs : null 
    必需:alert | confirm | custom dialogs 
    5. show 
    类型:Boolean 
    描述:是否立即显示对话框 
    默认值 : null 
    6. backdrop 
    类型:Boolean 
    描述:对话框是否有背景,还可以确定点击背景是否退出模态。 
    Undefined (null) 显示背景,点击背景不会触发事件 
    true * 显示背景,点击背景会取消此对话框 
    false 不显示背景 
    注意:当此值设置为true时,仅当onEscape设置esc也可以关闭时,对话框才会关闭 
    默认值 : null 
    7. closeButton 
    类型:Boolean 
    描述:对话框是否显示关闭按钮 
    默认值 : true 
    8. animate 
    类型:Boolean 
    描述:显示动画效果(需要浏览器支持) 
    默认值 : true 
    9. className 
    类型:String 
    描述:为对话框增加额外的css文件 
    默认值 : null 
    10. size 
    类型:String 
    描述:将Bootstrap模态大小类添属性加到对话框包装器,有效值为'large''small',需要Bootstrap 3.1.0以上。 
    默认值 : null 
    11. buttons 
    类型:Object 
    描述:按钮被定义为JavaScript对象。 定义按钮的最小定义是:

    "Your button text": function() {
    }

    你可以设置的其他属性有:

    buttonName : {
      label: 'Your button text',
      className: "some-class",
      callback: function() {
      }
    }

    其中buttoName应为:

    alert       ok
    confirm     cancel, confirm
    prompt      cancel, confirm

    每个可用的按钮选项都可以被重写,以使用自定义内容(文本或HTML)和CSS样式。 例如:

    bootbox.confirm({
        message: "This is a confirm with custom button text and color! Do you like it?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
            // ...
        }
    })

    您不能重写alert,confirm和prompt对话框的按钮的回调。 
    默认值 : null

  • 相关阅读:
    【Vue】二维码生成
    【微信运动】刷步数作弊办法
    webpack创建ts+vue3项目
    最新版vue脚手架搭建项目之如何关闭eslint代码检查
    vue3中如何设置按钮权限控制(如何注册自定义组件)
    科研密匙,ip查询
    vue用vif销毁组件 无效
    面试题
    MySql设置了主键,但是自增跳跃性增长问题
    红黑树的实际意义
  • 原文地址:https://www.cnblogs.com/hm1990hpu/p/9355683.html
Copyright © 2020-2023  润新知