消息提示框架 Backbone.Notifier

在线演示本地下载

我们曾今在以前的文章中介绍过 jQuery的警告和提示框插件，今天这里我们介绍一个开源的消息提示框架 Backbone.Notifier ，目前版本为version0.1。使用这个框架可以帮助你构建非常灵活强大的浏览器端消息提示功能。这个框架依赖于：

jQuery underscore.js backbone.js ：如果你不了解什么是backbone.js，请参看这篇文章

主要特性支持不同的样式和位置显示，完全可定制，比如dialog，loading，拥有3D模块展示界面拥有事件机制的API 很多在线例子帮助大家了解如何使用

如何使用

倒入依赖类库：

<!-- Dependencies -->

<script type="text/javascript" src="dependencies/jquery-1.7.2.min.js"></script> 

<script type="text/javascript" src="dependencies/underscore-1.3.3.min.js"></script> 

<script type="text/javascript" src="dependencies/backbone-0.9.2.js"></script>

<!-- /Dependencies -->

倒入backbone.notifier类库和资源：

<!-- Backbone.Notifier -->

<script type="text/javascript" src="js/Backbone.Notifier.js?_13"></script>

<script type="text/javascript" src="js/modules/3d.js?_13"></script><!-- Optional (3d module) -->

<script type="text/javascript" src="js/modules/logger.js?_13"></script><!-- Optional (3d module) -->

<!-- /Backbone.Notifier -->

初始化代码：

 var  notifier =  new  Backbone.Notifier({       //   defaults 
        el: 'body',          //   container for notification (default: 'body') 
        baseCls: 'notifier',     //   css classes prefix, should match css file and can be changed to avoid conflicts. 
        types: ['warning', 'error', 'info', 'success'],  //   available notification styles 
        type:  null ,          //   default notification style (null / 'warning' / 'error' / 'info' / 'success') 
        dialog:  false ,       //   whether display the notification with a title bar and a dialog style. 
                         //   - sets 'hideOnClick' to false, unless defined otherwise 
                         //   - sets 'position' to 'center', unless defined otherwise 
                         //   - sets 'ms' to null, unless defined otherwise 
        modal:  false ,        //   whether to dark and block the UI behind the nofication (default: false) 
        message: '',         //   default message content 
        title: undefined,    //   default notification title, if defined, causes the notification 
                         //   to be 'dialog' (unless dialog is 'false') 
        ms: 5000,        //   milliseconds before hiding, (null || false => no timeout) (default: 10000) 
        cls:  null ,       //   additional css class 
        hideOnClick:  true ,   //   whether to hide the notifications on mouse click (default: true) 
        loader:  false ,       //   whether to display loader animation in notifactions (default: false) 
        destroy:  false ,      //   notification or selector of nofications to hide on show (default: false) 
        opacity: 1,      //   opacity of nofications (default: 1) 
        top: -500,       //   distance between the notifications and the top edge (default: 0) 
        fadeInMs: 500,       //   duration (milliseconds) of notification's fade-in effect (default: 500) 
        fadeOutMs: 500,      //   duration (milliseconds) of notification's fade-out effect (default: 500) 
        position: 'top',     //   default notifications position ('top' / 'center') 
        zIndex: 10000,       //   minimal z-index for notifications 
        screenOpacity: 0.5,  //   opacity of dark screen background that goes behind for modals (between 0 to 1) 
         undefined,    //   notification's width ('auto' if not set) 
        template:  function (settings){  var  html = ...;  return  html; }     //   custom html structure 
    });

调用代码：

缺省提示如下

notifier.notify("Hello World!");

警告提示如下

notifier.warning("Hello World!");

高级使用如下

 notifier.notify({
        type:  'info' ,
        title:  "Information" ,
        message:  "This is a 'dialog' notification. Do you want to see another one?" ,
        buttons: [
            { 'data-role': 'myOk', text: 'Yes', 'class': 'default'},  //   'data-role' - an identifier for binding 
                             //   event using notification.on('click:myOk', function(){...}); 
            {'data-handler': 'destroy', text: 'No'}  //   'data-handler' - calls a function of notification object, 
             //   i.g.: 'data-handler': 'destroy' => calls notification.destroy() upon clicking the button 
         ],
        modal:   true  ,
        ms:   null  ,
        destroy:   false  
    })
    .on( 'click:myOk',  function  (){
        notifier.notify({
            destroy:   true ,   //   will hide all existing notification 
            type: 'warning' ,
            title:  "Warning!" ,
            message:  "Lets say you've been warned!" ,
            buttons: [{ 'data-handler': 'destroy', text: 'Errrr' }]
        }).on( 'destroy',  function  (){
            notifier.notify({
                type:  'error' ,
                title:  "Error Dialog" ,
                message:  "That's our error dialog notification" ,
                buttons: [{ 'data-handler': 'destroy', text: 'Ok' }]
            }).on( 'destroy',  function  (){
                notifier.notify({
                    type:  'success' ,
                    title:  "Success!" ,
                    message:  "bla bla bla bla bla bla bla bla..." ,
                    buttons: [{ 'data-handler': 'destroy', text: 'Cool' }]
                });
            });
        });
    });

更多演示请参考网站在线演示。

欢迎访问GBin1测试数据

标签: 消息提示js , 消息提示框架 , notifier , Backbone.Notifier

作者： Leo_wl

出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于消息提示框架 Backbone.Notifier的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did48609

更新时间：2022-09-24 阅读：47次