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

bootbox.js

时间:2016-11-24 14:00:14      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:sage   function   parent   记录   完全   .text   dismiss   rom   class   

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

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

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

 

这些只是bootbox的alert操作

还有confirm,prompt操作

这个在官网上都有

上面给的那个链接已经很清晰了

然后我就写到这里了

因为我了解到这里就差不多可以了

还有很长的路需要走

继续加油吧

怎么说呢

你也可以说我写的这篇博文对你来说是没有用的,因为网上这种用法一抓一大把

我只是想记录下来我的知识

如果能帮助到别人那就是更好的一件事了

 

bootbox.js

标签:sage   function   parent   记录   完全   .text   dismiss   rom   class   

原文地址:http://www.cnblogs.com/lwwen/p/6097043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!