分享一個基於jQuery,backbone.js和underscore.js的消息提示框架 – Backbone.Notifier

倒入依賴類庫:
 <!– 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 –>    www.aiwalls.com
初始化代碼:
    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)
        width: 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'}]
                });
            });
        });
    });

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。