css
.toast-box{
position:absolute;
bottom: 10%;
z-index:99;
max-height:250px;
overflow-y:auto;
margin:0 auto;
float:left;
left:50px;
right:50px;
text-align:center;
}
.toast-top{
top:0;
}
.toast-bottom{
top:auto;
bottom:0;
}
.toast-box .toast-item{
display:inline-block;
margin-top:5px;
padding:0 20px;
max-width:100%;
height: 40px;
line-height: 40px;
color:#fff;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border-radius:6px;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.8);
}
.toast-box .toast-item.toast-success{
background-color: rgba(40,165,76, 0.8);
}
.toast-box .toast-item.toast-error{
background-color: rgba(217,83,79, 0.8);
}
.toast-box .toast-item.toast-warn{
background-color: rgba(240,173,78, 0.8);
}
.toast-box .toast-item.toast-info{
background-color: rgba(3,155,229, 0.8);
}
services.js
.directive('toast', function() {
return {
restrict: 'E',
require: '^?ngModel',
scope: {
ngModel: '='
},
link: function (scope, element, attr, ctrl) {
/*
* Read before you modify
* this is a Object Sample :
{text:"prompt content",type:"prompt style",timeout:"display time",max:"Display maximum number"}
* If you need to add attributes! Please update the Object Sample
*/
var objSample = { text: "prompt content", type: 5, timeout: 1500, max: 1 };
var position = attr.position||'center';
$('.toast-'+position).remove();
var box = $('<div class="toast-box toast-' + position + '"></div>').appendTo('body');
scope.$watch('ngModel', function (newValue) {
console.log(newValue)
if (!newValue) return;
var value;
if (angular.isString(newValue)) {
value = { text: newValue };
} else {
value = angular.copy(newValue);
}
var timeout = isNaN(value.timeout) ? objSample.timeout : value.timeout;
if (value.text != undefined && value.text != "") {
var isMax = box.find("div").length >= (value.max || objSample.max)
if (isMax) return;
//var item = $('<div class="toast-item toast-' + getToastClass(value.type) + ' animated fadeInDown">' + value.text + '</div><br/>').appendTo(box);
var item = $('<div class="toast-item toast-' + getToastClass(value.type) + '">' + value.text + '</div><br/>').appendTo(box);
setTimeout(function () {
//item.addClass('fadeOutUp');
setTimeout(function () {
item.remove();
}, 500);
}, timeout);
}
});
}
};
})
全局js
function getToastClass(type) {
var toast_class;
switch (type)
{
case 1:
toast_class = "success";
break;
case 2:
toast_class = "error";
break;
case 3:
toast_class = "warn";
break;
case 4:
toast_class = "info";
break;
default:
toast_class = "undefined";
break;
}
return toast_class
}
应用
html
<toast ng-model="toast" position="center"></toast>
controllers.js
$scope.toast = { text: "请输入密码, type: 2, timeout: 10000, max: 2 };
