在線演示? 本地下載

我們曾今在以前的文章中介紹過jQuery的警告和提示框插件，今天這里我們介紹一個(gè)開源的消息提示框架 Backbone.Notifier，目前版本為version0.1。使用這個(gè)框架可以幫助你構(gòu)建非常靈活強(qiáng)大的瀏覽器端消息提示功能。這個(gè)框架依賴于：

• jQuery
• underscore.js
• backbone.js：如果你不了解什么是backbone.js，請參看這篇文章

主要特性

• 支持不同的樣式和位置顯示，完全可定制，比如dialog，loading，擁有3D模塊展示界面
• 擁有事件機(jī)制的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({ // defaultsel: '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 stylestype: 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 otherwisemodal: false, // whether to dark and block the UI behind the nofication (default: false)message: '', // default message contenttitle: 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 classhideOnClick: 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 notificationsscreenOpacity: 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});

調(diào)用代碼：

缺省提示如下

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 notificationtype: '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'}]});});});});

更多演示請參考網(wǎng)站在線演示。

轉(zhuǎn)載于:https://www.cnblogs.com/gbin1/archive/2012/07/05/2577645.html

總結(jié)

以上是生活随笔為你收集整理的分享一个基于jQuery，backbone.js和underscore.js的消息提示框架 - Backbone.Notifier的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。