Share a messaging framework based on jQuery, backbone. js, and underscore. js-Backbone. Not

Import the dependency Class Library:
<! -- Dependencies -->

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

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

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

<! --/Dependencies -->
Import the backbone. notifier class library and resources:
<! -- 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.2cto.com
Initialization code:
Var notifier = new Backbone. Notifier ({// defaults
El: 'body', // container for notification (default: 'body ')
BaseCls: 'notifier', // css classes prefix, shocould 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 specifications 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 communications 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 configurations 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
});
Call code:
The default prompt is as follows:
Notifier. Policy ("Hello World! ");
Warning:
Notifier. warning ("Hello World! ");
Advanced usage:
Notifier. Policy ({
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': 'deststroy', text: 'no'} // 'data-handler'-Calla function of notification object,
// I. g.: 'Data-handler': 'deststroy' => callnotification. destroy () upon clicking the button
],
Modal: true,
Ms: null,
Destroy: false
})
. On ('click: myok', function (){
Notifier. Policy ({
Destroy: true, // will hide all existing notification
Type: 'warning ',
Title: "Warning! ",
Message: "Lets say you 've been warned! ",
Buttons: [{'data-handler': 'deststroy', text: 'errrr '}]
}). On ('deststroy', function (){
Notifier. Policy ({
Type: 'error ',
Title: "Error Dialog ",
Message: "That's our error dialog notification ",
Buttons: [{'data-handler': 'deststroy', text: 'OK'}]
}). On ('deststroy', function (){
Notifier. Policy ({
Type: 'success ',
Title: "Success! ",
Message: "bla ...",
Buttons: [{'data-handler': 'deststroy', text: 'cool '}]
});
});
});
});