angular-toaster 入坑记

来源：互联网发布：淘宝台湾入台证办理编辑：程序博客网时间：2024/04/29 21:49

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>

1 0