码迷,mamicode.com
                                                                              首页 > Web开发 > 详细

                                                                              bootbox.js官方文档

                                                                              时间:2018-05-08 00:49:44      阅读:2217      评论:0      收藏:0      [点我收藏+]

                                                                              标签:通过   不显示   出现   nes   参数详解   custom   ===   选择   views   

                                                                              简介

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

                                                                              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选项参数详解

                                                                              message

                                                                              类型:String | Element
                                                                              描述:显示在对话框上的内容
                                                                              必需:alert | confirm | custom dialogs

                                                                              title

                                                                              类型:String | Element
                                                                              描述:为对话框添加标题,默认大小为<h4>
                                                                              必需:prompts

                                                                              callback

                                                                              类型:Function
                                                                              描述:回调函数
                                                                              alert回调不提供参数,函数体为空则会被忽略,如:

                                                                              bootbox.alert({ message: "I‘m an alert!", callback: function() {} })

                                                                              confirm和prompt回调必须提供参数result。当为confirm时,result类型为boolean,用来判定是还是否;当为prompt时result将保存用户输入的值。

                                                                              必需:confirm | prompt

                                                                              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
                                                                                  }
                                                                              }); 

                                                                               onEscape

                                                                              类型:Boolean | Function
                                                                              描述:允许用户通过点击ESC来关闭对话框,点击ESC这将调用此选项。
                                                                              默认值 : alert | confirm | prompt : true ; custom dialogs : null
                                                                              必需:alert | confirm | custom dialogs

                                                                              show

                                                                              类型:Boolean
                                                                              描述:是否立即显示对话框
                                                                              默认值 : null

                                                                              backdrop

                                                                              类型:Boolean
                                                                              描述:对话框是否有背景,还可以确定点击背景是否退出模态。
                                                                              Undefined (null) 显示背景,点击背景不会触发事件
                                                                              true * 显示背景,点击背景会取消此对话框
                                                                              false 不显示背景
                                                                              注意:当此值设置为true时,仅当onEscape设置esc也可以关闭时,对话框才会关闭
                                                                              默认值 : null

                                                                              closeButton

                                                                              类型:Boolean
                                                                              描述:对话框是否显示关闭按钮
                                                                              默认值 : true

                                                                              animate

                                                                              类型:Boolean
                                                                              描述:显示动画效果(需要浏览器支持)
                                                                              默认值 : true

                                                                              className

                                                                              类型:String
                                                                              描述:为对话框增加额外的css文件
                                                                              默认值 : null

                                                                              size

                                                                              类型:String
                                                                              描述:将Bootstrap模态大小类添属性加到对话框包装器,有效值为‘large‘‘small‘,需要Bootstrap 3.1.0以上。
                                                                              默认值 : null

                                                                              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

                                                                              bootbox.js官方文档

                                                                              标签:通过   不显示   出现   nes   参数详解   custom   ===   选择   views   

                                                                              原文地址:https://www.cnblogs.com/wyt007/p/9005906.html

                                                                              (0)
                                                                              (1)
                                                                                 
                                                                              举报
                                                                              评论 一句话评论(0
                                                                              0条  
                                                                              登录后才能评论!
                                                                              ? 2014 mamicode.com 版权所有 京ICP备13008772号-2
                                                                              迷上了代码!
                                                                              宁夏11选5开奖查询