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

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

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

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

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

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

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

有史以来最精彩的自问自答: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…

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

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

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

来源&#xff1a;OFweek 摘要&#xff1a;智能家居已经火了有一段时间&#xff0c;然而目前真正普及的家庭并不多。从长远来看&#xff0c;智能家居是一种更环保、智能、舒适、安全的人居环境&#xff0c;它涉及物联网、人工智能等相关技术&#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位获奖者对数学领域…

科学研究发现,盲人用时间感知空间

来源&#xff1a;中国科学报摘要&#xff1a;在书籍和电影中&#xff0c;盲人通常用超敏感的听力帮助他们在现实世界中穿梭。在书籍和电影中&#xff0c;盲人通常用超敏感的听力帮助他们在现实世界中穿梭。但是&#xff0c;8月1日发表在iScience杂志上的一项研究表明&#xff0…

传输层(学习笔记)

传输层基本概念&#xff1a; 传输层负责端与端之间的数据传&#xff0c;主要有两大知识点&#xff1a;TCP和UDP 五元组 在TCP/IP协议中, 用 “源IP”, “源端口号”, “目的IP”, “目的端口号”, “协议号” 这样一个五元组来标识一个通信(可以通过netstat -n查看); 端口号范…

C# 析构函数(Destructor)和终结器(Finalizer)——托管资源的释放

本文内容 使用析构函数释放资源 Object.Finalize 方法 资源的显式释放 使用析构函数释放资源 析构函数用于析构类的实例。 不能在结构中定义析构函数。只能对类使用析构函数。 一个类只能有一个析构函数。 无法继承或重载析构函数。 无法调用析构函数。它们是被自动调用的。 析…

教育部:建设100+AI特色专业, 500万AI人才缺口要补上!

来源&#xff1a;网络大数据摘要&#xff1a;为落实《国务院关于印发新一代人工智能发展规划的通知》&#xff0c;为我国新一代人工智能发展提供战略支撑&#xff0c;教育部在近日正式发布了《高等学校人工智能创新行动计划》。AI再次被提上国家级日程!为落实《国务院关于印发新…

TCP三次握手详解及面试题

为什么必须是三次握手&#xff1f; 大家都知道传输层&#xff08;点击这里去传输层&#xff09;中的TCP协议是面向连接的&#xff0c;提供可靠的连接服务&#xff0c;其中最出名的就是三次握手和四次挥手&#xff0c;今天先讲解三次握手&#xff08;四次挥手点这里&#xff09;…

git 撤销修改:未push 、已push

场景&#xff1a;不小心把一次错误的代码push到远程服务器上的分支上&#xff0c;需要立即删除/撤销这次代码提交。 具体方法&#xff0c;git命令&#xff1a; git loggit reset --hard <commit_id>git push origin HEAD --force【命令详解】 获取commit_id&#xff1…

一条光纤的传输容量高达 661Tbps(附论文)

来源&#xff1a;云头条摘要&#xff1a;研究人员将全世界目前的光纤容量塞入到一条链路中。社会对数据的渴求永无止境。事实上&#xff0c;想想这个就令人相当惊讶&#xff1a;平均的互联网流量是每秒几百兆兆位&#xff0c;耗电量约占我们发电量的8%。这一切用来传输猫咪即时…