分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 - Backbone.Notifier

分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 - Backbone.Notifier

在线演示  本地下载

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

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

主要特性

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

分享一个基于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 -->

初始化代码:

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});

调用代码:

缺省提示如下

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

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

转载于:https://www.cnblogs.com/gbin1/archive/2012/07/05/2577645.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494894.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

杨辉三角变形(高效解析)

题目链接&#xff1a; https://www.nowcoder.com/practice/8ef655edf42d4e08b44be4d777edbf43?tpId37&&tqId21276&rp1&ru 题目解析&#xff1a; 拿到这道题大多数人的第一反应都是先将杨辉三角用一个二维数组表示出来&#xff0c;然后直接在第n行找就可以了&a…

Python面试题大全(二):python高级语法

目录 Python高级 元类 42.Python中类方法、类实例方法、静态方法有何区别&#xff1f; 43.遍历一个object的所有属性&#xff0c;并print每一个属性名&#xff1f; 44.写一个类&#xff0c;并让它尽可能多的支持操作符? 45.介绍Cython&#xff0c;Pypy Cpython Numba各有…

生物科技发展与人类命运共同体塑造

来源&#xff1a;学习时报摘要&#xff1a;生物科技的发展是人类文明发展的缩影。当前&#xff0c;生物科技的新一轮变革&#xff0c;正广泛渗透到人类经济、社会、文化、军事、政治等领域&#xff0c;其对人类伦理、法律、环境、安全、国际关系等领域的影响越来越大。生物科技…

和为S的连续正数序列(双指针详解)

题目解析&#xff1a; 题目是小明算数&#xff0c;这里不赘述&#xff01;->题目链接<-   看到这道题目的可以马上想到等差数列&#xff0c;这个题目可以换一种说法就是求有多少个等差数列的和为sum&#xff0c;可以直接用公式计算&#xff0c;但是公式计算个人感觉有一…

Python面试题大全(三):Web开发(Flask、爬虫)

目录 Web Flask 140.对Flask蓝图(Blueprint)的理解&#xff1f; 141.Flask 和 Django 路由映射的区别&#xff1f; Django 142.什么是wsgi,uwsgi,uWSGI? 143.Django、Flask、Tornado的对比&#xff1f; 144.CORS 和 CSRF的区别&#xff1f; 145.Session,Cookie,JWT的…

七大科技巨头的最新人工智能布局

来源&#xff1a;资本实验室摘要&#xff1a;近几年&#xff0c;全球人工智能技术的发展与应用突飞猛进。近几年&#xff0c;全球人工智能技术的发展与应用突飞猛进。例如&#xff0c;各大公司的自主驾驶汽车测试如火如荼&#xff0c;许多人每天都在家里使用像Alexa这样的人工智…

SilverLight之我见

SliverLight 是微软公司全力打造的一种跨平台&#xff0c;跨浏览器的RIA新技术&#xff0c;SilverLight以XAML为界面呈现语言&#xff0c;支持2D图形&#xff0c;文字&#xff0c;动画&#xff0c;数据双向绑定&#xff0c;控件风格与模板&#xff0c;Linq,WCF&#xff0c;JSON…

Python面试题大全(四):数据库篇

目录 数据库 MySQL 198.主键 超键 候选键 外键 199.视图的作用&#xff0c;视图可以更改么&#xff1f; 200.drop,delete与truncate的区别 201.索引的工作原理及其种类 202.连接的种类 203.数据库优化的思路 204.存储过程与触发器的区别 205.悲观锁和乐观锁是什么&am…

有史以来最精彩的自问自答:OpenAI 转方块的机械手

机械手任务之三 - 转鸡蛋&#xff0c;示意图来源&#xff1a;AI 科技评论摘要&#xff1a;今年 2 月&#xff0c;OpenAI 发起了一组机械手挑战&#xff0c;他们在基于 MuJoCo 物理模拟器的 Gym 环境中新设计了含有机械臂末端控制、机械手拿取物体的两组八个有难度的、早期强化学…

寻找两个有序数组的中位数(虚拟数组图文详解)

思路一&#xff08;暴力&#xff09;&#xff1a; 当看到这个题目的时候可能会觉的是不是系统高估了这个题目&#xff0c;这个这么简单&#xff0c;只需要将两个数组合并&#xff0c;排序然后合并就好了。这样做确实可以求出中位数&#xff0c;但是并不能说是完成题目的要求&am…

uva540

题目的意思大概就是现在让你做一个数据结构&#xff0c;具体的应该是一个队列&#xff0c;有一堆元素&#xff0c;这堆元素拥有两个特性&#xff0c;一是它的值&#xff0c;二是它所在的team值。这个队列满足以下的一些性质&#xff08;操作&#xff09;。 ENQUEUE(k) &#xf…

Python面试题大全(五):测试、大数据、数据结构、架构

目录 测试 213.编写测试计划的目的是 214.对关键词触发模块进行测试 215.其他常用笔试题目网址汇总 216.测试人员在软件开发过程中的任务是什么 217.一条软件Bug记录都包含了哪些内容&#xff1f; 218.简述黑盒测试和白盒测试的优缺点 219.请列出你所知道的软件测试种类…

【决策】Waymo无人出租车年底发射,现已进入定价环节 | 公交部门竟成友军?...

开车栗 发自 凹非寺量子位 出品 | 公众号 QbitAI按照Waymo的计划&#xff0c;今年年底之前&#xff0c;他们的无人出租车服务就要进入市场了。现在&#xff0c;无人的士已进入了定价环节&#xff0c;紧张刺激。Waymo希望从此开始&#xff0c;人类能一点一点抛弃私家车&#xff…

盘点那些具有“爆款”潜力的智能家居产品

来源&#xff1a;OFweek 摘要&#xff1a;智能家居已经火了有一段时间&#xff0c;然而目前真正普及的家庭并不多。从长远来看&#xff0c;智能家居是一种更环保、智能、舒适、安全的人居环境&#xff0c;它涉及物联网、人工智能等相关技术&#xff0c;是人们理想的一种生活方式…

圆圈中最后剩下的数字

题目&#xff1a;n个数字&#xff08;0,1,…,n-1&#xff09;形成一个圆圈&#xff0c;从数字0开始&#xff0c;每次从这个圆圈中删除第m个数字&#xff08;第一个为当前数字本身&#xff0c;第二个为当前数字的下一个数字&#xff09;。当一个数字删除后&#xff0c;从被删除数…

TCP/IP校验和(浅析+实例)

校验和的作用   按照协议的规定&#xff0c;报文到达每一层&#xff0c;首先验证校验和是否正确&#xff0c;丢弃掉不正确的报文&#xff0c;再才会进行后续操作。  那么校验和是怎么计算的呢&#xff1f;  校验和的计算方法(以 IP 首部中的校验和为例) 方法是计算16位的二…

4位数学家获得2018年菲尔兹奖

来源&#xff1a;科学网2018年菲尔兹奖8月1日在巴西里约热内卢市举行的第28届国际数学家大会上揭晓&#xff0c;获奖者为伊朗裔数学家Caucher Birkar、意大利数学家Alessio Figalli、德国数学家Peter Scholze&#xff0c;以及印澳裔数学家Akshay Venkatesh。4位获奖者对数学领域…

ASP.NET GridView控件在列上格式化时间

症状&#xff1a;在GridView绑定日期格式的时候&#xff0c;数据库中的日期为2008-07-04&#xff0c;而GridView显示的是2007-07-04 000000。、 解决办法&#xff1a;想把这后面这多余的零去掉的话在绑定时间的那一列源码后面加上一句话就可以了&#xff0c;如下红色的部分 <…

spark-submit 参数设置

在使用spark时&#xff0c;根据集群资源情况和任务数据量等&#xff0c;合理设置参数&#xff0c;包括但不限于以下&#xff1a; 参数说明masteryarn E-MapReduce 使用 Yarn 的模式yarn-client&#xff1a;等同于 –-master yarn —deploy-mode client&#xff0c; 此时不需要…