图片展示

bootbox.js 一个提示框插件

浏览:4305 发表时间:2017-05-04 15:45:18

在使用斜云时,发现包含一个Bootbox.js,原来是一个提示框插件,bootbox的用法非常简单。

制作提示框效果,我们需要的效果,也就是alert警告,info提示,confirm确认,还有一个就是自定义了dialog。

    bootbox.alert(message, callback)

    bootbox.prompt(message, callback)

    bootbox.confirm(message, callback) //返回值为布尔类型,true或false

稍微复杂一点的就是dialog
  
bootbox.dialog({
    title : "修改密码",
    message : "

",
    buttons : {
        "success" : {
            "label" : " 保存",
            "className" : "btn-sm btn-success",
            "callback" : function() {
                var txt1 = $("#txtOldPwd").val();
                var txt2 = $("#txtNewPwd1").val();
                var txt3 = $("#txtNewPwd2").val();
 
                if(txt1 == "" || txt2 == "" || txt3 == ""){
                    bootbox.alert("密码不能为空");
                    return false;
                }
                if(txt2 != txt3 ){
                    bootbox.alert("两次输入新密码不一致,请重新输入!");
                    return false;
                }
                var info = {"opt":"changepassword","oldpwd":txt1,"newpwd1":txt2,"newpwd2":txt3};
                //$.post("../CommonServlet",info,function(data){
                    bootbox.alert("密码更新成功");
                //},'json');
            }
        },
        "cancel" : {
            "label" : " 取消",
            "className" : "btn-sm btn-danger",
            "callback" : function() { }
        }
    }
});

 
还有一点就是,默认是英文的,需要更改为中文。

打开bootbox.js文件,查找locale,在locale会发现有en,把en改成zh-CN就可以了。


bootbox:一个弹出框插件,官网看一下例子就好了:http://bootboxjs.com/examples.html

目前来说应该只要调用bootbox.js就可以了,没有css的问题

1.有最基本的调用就是

bootbox.alert("This is the default alert!");

就什么都不做,只要alert一下就已经完成了它的使命,要是只要实现这样的话我觉得完全没必要引入这个插件呀,只要自己alert一下不就好了

2.再加一步就是有回调函数了,callback这个好呀

bootbox.alert("This is an alert with a callback!", function(){ console.log('This was logged in the callback!'); });

你对这个弹出框执行了操作,就能做一些你想做的事,恩

3.再深一步就是配置参数咯

  
复制代码

bootbox.alert({
    message: "This is an alert with a callback!",
    callback: function () {
        console.log('This was logged in the callback!');
    }
})


跟刚才一样的效果,但是我感觉看起来就会让人很舒服,我们老大一直强调的就是什么,你写的代码不止让你自己看起来舒服,你要让别人看起来也舒服,确实这样很好啊我觉得

4.不止是回调函数,还有可以定义弹出框的size

  

bootbox.alert({
    message: "This is the small alert!",
    size: 'small'
});

5.可以添加自定义的className

  

bootbox.alert({
    message: "This is an alert with an additional class!",
    className: 'bb-alternate-modal'
});

可以给那个大的div加自定义的类,然后你就可以随意给这个div实现各种css了

6.还有就是点击背景层的时候也可以触发这个弹出框

  

bootbox.alert({
    message: "This alert can be dismissed by clicking on the background!",
    backdrop: true
});

是的,就是这个backdrop参数,要是没有设置的话是点击背景层的话是没有反应的

7.还可以在弹出框添加你想要添加的按钮呀,然后利用回调函数来执行一些你想要执行的事

buttons: {
                    "确定": {
                        className: "btn-success",
                        callback: function () {
                            $(obj).parent().parent().find('input').val(selectedImage.id);
                            $(obj).parent().parent().find('img').attr('src', selectedImage.url);
                            selectedImage = {};

                            if (more) {
                                var moreObj = $('#albumsClone').children().first().clone();
                                moreObj.find('input').val('');
                                moreObj.find('img').attr('src', './public/plug/dist/img/noimage.gif');
                                $('#albumsClone').append(moreObj);
                            }
                        }
                    },
                    "取消": {
                        className: "btn-default",
                        callback: function () {

                        }
                    },
                    "删除": {
                        className: "btn-danger",
                        callback: function () {
                            // var delUrl = URL + "Admin/File/delImage/id/" + selectedImage.id;
                            // $.get(delUrl, function (data) {
                            //     var p = $('#dialog-imageUploader .pagination .current').text();
                            //     var pagUrl = URL + "Admin/File/imageUploader/p/" + p;
                            //     $.pjax({
                            //         url: pagUrl,
                            //         container: '.bootbox .bootbox-body',
                            //         push: false,
                            //     });
                            // });
                            // return false;
                        }
                    }
}

这个是可以在弹出框上添加三个按钮,你分别点击这三个按钮的时候可以在每个按钮上添加一个回调函数,

这样你点击的时候就会做出相应的反应

图片展示
  • 联系人:
  • QQ:
  • 留言内容:
  • 验证码:
    请输入验证码

留言列表


【5】 2017-04-30
66666
回复内容2017-04-30
去你的……
重置文章字号 更多+

贴心服务

  • 网站每周自动备份
  • 生成APP,一下高大上
  • 云服务器,不需另外买空间
  • 域名代备案

帮助中心

  • Bootstrap前端框架
  • SuperSlide.2.1.1
  • FlexSlider-0690ec2
  • 有问必答

联系我们

  • service@sanxiegang.com
©2008-2017 三斜杠网络公司版权所有 盗用必究 QQ:2558731797
三斜杠专注于深圳小微企业网站建设,为您打造个性化互联网平台. 粤ICP备17053880号