Bootstrap Notify简记

bootstrap notify是基于bootstrap的一个实现notify功能的js插件 https://github.com/mouse0270/bootstrap-notify

插件依赖bootstrap，如果使用动画功能，则需引入Animate.css

完整的使用demo如下：

 1 $.notify({
 2     // options
 3     icon: 'glyphicon glyphicon-warning-sign',
 4     title: 'Bootstrap notify',
 5     message: 'Turning standard Bootstrap alerts into "notify" like notifications',
 6     url: 'https://github.com/mouse0270/bootstrap-notify',
 7     target: '_blank'
 8 },{
 9     // settings
10     element: 'body',
11     position: null,
12     type: "info",
13     allow_dismiss: true,
14     newest_on_top: false,
15     showProgressbar: false,
16     placement: {
17         from: "top",
18         align: "right"
19     },
20     offset: 20,
21     spacing: 10,
22     z_index: 1031,
23     delay: 5000,
24     timer: 1000,
25     url_target: '_blank',
26     mouse_over: null,
27     animate: {
28         enter: 'animated fadeInDown',
29         exit: 'animated fadeOutUp'
30     },
31     onShow: null,
32     onShown: null,
33     onClose: null,
34     onClosed: null,
35     icon_type: 'class',
36     template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
37         '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
38         '<span data-notify="icon"></span> ' +
39         '<span data-notify="title">{1}</span> ' +
40         '<span data-notify="message">{2}</span>' +
41         '<div class="progress" data-notify="progressbar">' +
42             '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
43         '</div>' +
44         '<a href="{3}" target="{4}" data-notify="url"></a>' +
45     '</div>' 
46 });

配置项含义可参见官方文档 http://bootstrap-notify.remabledesigns.com/

默认notify消息体弹出后，页面仍可用，如果需要屏蔽一些组件则需要自己实现

$("#body").find('input').attr('disabled', 'true');

posted on 2015-10-10 17:35 mutouyaya 阅读(2114) 评论(0) 编辑收藏举报