toaster是啥呢。是一款非常炫酷的提示插件,忍耐不住的人可以先去看特效。
不好的地方希望大家轻喷- -
去万能的npm官网,搜一下toaster就可以找到,这里介绍的是angular1*的toaster
安装方法我个人喜欢npm,万能的npm
npm install --save angularjs-toaster
npm安装也很简单,网上很多教程。
开始正题了首先我们通过引入文件来开始我们的项目
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>
需要依赖angular-animate 注意咯~
最简单的一种,先推荐个在线编译的http://plnkr.co/edit/?p=catalogue
官网的例子必须要自己写完整了才可以用,直接拿过来是不行的
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>
<script>
angular.module('main', ['toaster', 'ngAnimate'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
</script>
</head>
<body ng-app="main">
<toaster-container></toaster-container>
<h1>Hello Plunker!</h1>
<div ng-controller="myController">
<button ng-click="pop()">Show a Toaster</button>
</div>
</body>
</html>
这是最简单的写法,但是几乎toaster的所有东西也体现的差不多了
<toaster-container></toaster-container>//这个指令放在当前页面就行,没有这个是没有特效的,他是特效的容器
toaster.pop('success', "title", "text");//这段代码就是特效产生的代码
会在你点击的时候屏幕的右上角弹出如此的一个提示框,灰常的好看,他出现在屏幕上的位置是可以控制的一会再说,说下pop
方法,第一个参数是提示框的状态,success为绿色,基本和bootstrap的颜色配置一样,第二三个参数就是提示框的内容。把代码放在我给的网站上就可以,建议翻墙,否则可能没有效果~~
当然我们为了防止用户恶意点击,可以让提示框快速消失,避免出现大量提示框,虽然提示框本身可以消失,但比较缓慢,之后我们可以设计,但我们这里采取清除的方法
toaster.clear(toastInstance);
angular.module('main', ['toaster', 'ngAnimate'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.clear(toastInstance);//注释这句和加上这句看看效果就明白了
var toastInstance = toaster.pop({type: 'info', body: 'Hello'});
toastInstance()
}
});
就跟claerTimeout()
很象,取消定时器。把代码替换上上面给出的可以看看效果
刚才提到的延时,我们可以在指令上控制时间通过
<toaster-container toaster-options="{'time-out': 1000}"></toaster-container>
当然我们也可以指定某一种特殊状态的延时
<toaster-container toaster-options="
{'time-out':{ 'toast-warning': 10, 'toast-error': 0 } }">
</toaster-container>
这里我们给warning状态10ms的延时 0是不消失
我们还可以在pop()
方法里写
toaster.pop({
type: 'error',
title: 'Title text',
body: 'Body text',
timeout: 3000
});
我们以可以手动的给弹出框添加关闭按钮
<toaster-container toaster-options="{'close-button': true}"></toaster-container>
也可以给某个状态单独设计
<toaster-container toaster-options="
{'close-button':{ 'toast-warning': true, 'toast-error': false } }">
</toaster-container>
当然指令也是OK的
toaster.pop({
type: 'error',
title: 'Title text',
body: 'Body text',
showCloseButton: true
});
反正我觉得这功能蛮鸡肋的,我要是用户我才懒得点呢~~~
我们还可以弄模板,把功能提取出来
toaster.pop({
type: 'info',
body: 'bind-unsafe-html',
bodyOutputType: 'directive'
});
.directive('bindUnsafeHtml', [function () {
return {
template: "<span style='color:orange'>Orange directive text!</span>"
};
}])
这样我们可以把提示信息提取出来形成模板,就不需要我们每个界面都要写一个方法去重写代码,我们只需要提前写好directive就可以了·~~
body中绑定我们的指令,我们原先的内容卸载template模板里
还支持我们提示框弹出和弹出后的事件分别是onShowCallback
onHideCallback
toaster.pop({
title: 'A toast',
body: 'with an onHide callback',
onHideCallback: function () {
toaster.pop({
title: 'A toast',
body: 'invoked as an onHide callback'
});
}
});
我们可以给我们的toaster赋值id 和class 这个class是给提示框定位。
<toaster-container toaster-options="{'toaster-id': 1, 'animation-class': 'toast-top-left'}"></toaster-container>
我们也可以限制提示框的数量,我感觉很鸡肋,挺丑的 - -
<toaster-container toaster-options="{'limit':5}"></toaster-container>
该API还支持当我们点击提示框是提示框不在消失
<toaster-container toaster-options="{'tap-to-dismiss':false}"></toaster-container>
var toastInstance = toaster.pop({ type: 'info', body: 'One', tapToDismiss: true });
支持我们把最新的信息放在最上面显示,就是以前从下面消失,现在从上面消失,这个还是不错的,符合人的行为。
<toaster-container toaster-options="{'newest-on-top':false}"></toaster-container>
还可以在上面出现一排,但我感觉这个效果不是很友好,会挡住用户的屏幕。
<toaster-container toaster-options="{'position-class': 'toast-top-full-width'}"></toaster-container>