我一直在玩toastr并且已经成功地将超时设置为0,因此吐司仍然是粘性的,但是当我将鼠标移出吐司时吐司消失了.我想要覆盖它,所以如果用户点击它,烤面包就会消失 - 非常适合有大量文字的祝酒词.如何才能做到这一点？
我目前正在使用Angular 7开发一个Web应用程序.我想包含ngx-toastr来向用户发送通知,但它没有按预期工作.当我触发吐司时没有任何反应,除了一个吐司大小的盒子出现在右下角,但只有当它被光标悬停时.下面是一个如何触发toastr函数的例子.单击按钮即可调用测试.
import {ToastrService} from 'ngx-toastr';
@Component({
selector: 'app-action-controls',
templateUrl: './action-controls.component.html',
styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
test(){
this.toast.success("I'm a toast!", "Success!");
}
constructor(private toast: ToastrService) { }
}
我在我的项目的angular.json文件中包含库css文件,如下所示:
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/ngx-toastr/toastr.css"
],
...
在我的app.module.ts文件中这样:
...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
imports: [
...
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 1000,
positionClass: 'toast-bottom-right'
})
]
...
我无法弄清楚我做错了什么,有没有人有类似的经历？提前谢谢了!
有没有办法改变它？我尝试将toastClass定义为一个不透明度设置为1的类,但没有看到任何更改:
.toast-style{
opacity: 1;
}
toastr.options.toastClass = 'toast-style';
目前,我只需要toastr.success('my message')在控制器内调用.这工作很好,但对我来说感觉有点脏.
是否有使用toastr.js库的"最佳实践"或推荐的"angularjs"方式？
我想在div点击上改变我的吐司的位置类.
positionclass:未更改为Bottom.？我在这里失踪了什么？
以及如何使用
toastr.optionsOverride ='positionclass:toast-bottom-full-width';
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<head>
<title></title>
<script type ="text/javascript" src ="@Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
<script type ="text/javascript" src ="@Url.Content("~/Scripts/toastr.js")"></script>
<link rel="stylesheet" type="text/css" href="~/content/toastr.css" />
</head>
<script type="text/javascript">
$(document).ready(function () {
// show when page load
toastr.info('Page Loaded!');
$('#linkButton').click(function () {
toastr.optionsOverride = 'positionclass:toast-bottom-full-width';
// show when the button is clicked
toastr.success('Click Button', 'ButtonClick', 'positionclass:toast-bottom-full-width');
});
});
</script>
<body>
<div id ="linkButton" > click here</div>
</body>
更新1
调试之后我注意到toastr.js下面的getOptions方法覆盖'positionclass:toast-bottom-full-width'到'toast-top-right'
function getOptions() {
return $.extend({}, defaults, toastr.options);
}
更新2 …
我正在使用一个很酷的警报js库项目:https://github.com/CodeSeven/toastr
我希望在一段时间之后退出以下更改.查看toastr.js文件,我确实看到了选项.我只是不知道如何访问该物业'fadeAway'
toastr.info('Processing...');
我试过了
toastr.info('Processing...', fadeAway:1000);
如何通过传入参数来使用fadeAway？
我想让toastr的弹出窗口与Bootstrap警报相同或非常接近.我怎样才能做到这一点？
我是JS的新手,不知道如何在我的页面上完成这项工作.以下是我所拥有的.我该怎么做这个警报节目？
我正确添加了源,但不确定如何呈现警报.
<!doctype html>
<html>
<head>
<title>Toast</title>
<link href="toastr.css" rel="stylesheet"/>
<script src="toastr.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
//toastr.info('Are you the 6 fingered man?')
Command: toastr[success](" ", "Settings Saved!")
toastr.options: {
"debug": false,
"positionClass": "toast-top-right",
"onclick": null,
"fadeIn": 300,
"fadeOut": 1000,
"timeOut": 5000,
"extendedTimeOut": 1000
}
});
</script>
</head>
<body>
</body>
</html>
我正在做教程,这部分是关于实现登录,这应该给出关于登录成功的气球
angular.module("app").value("mvToastr", toastr);
angular.module("app").factory("mvNotifier", function(mvToastr) {
return {
notify: function(msg) {
mvToastr.success(msg);
console.log(msg);
}
}
});
我得到了这个,我不明白它.似乎加载了所有.js文件.请告诉我问题出在哪里,谢谢.
TypeError: Cannot call method 'extend' of undefined
at getOptions (http://localhost:3030/vendor/toastr/toastr.js:282:14)
at Object.success (http://localhost:3030/vendor/toastr/toastr.js:68:17)
at Object.notify (http://localhost:3030/app/common/mvNotifier.js:6:22)
at http://localhost:3030/app/account/mvNavBarLoginCtrl.js:8:28
at wrappedCallback (http://localhost:3030/vendor/angular/angular.js:11033:81)
at wrappedCallback (http://localhost:3030/vendor/angular/angular.js:11033:81)
at http://localhost:3030/vendor/angular/angular.js:11119:26
at Scope.$eval (http://localhost:3030/vendor/angular/angular.js:12045:28)
at Scope.$digest (http://localhost:3030/vendor/angular/angular.js:11871:31)
at Scope.$apply (http://localhost:3030/vendor/angular/angular.js:12151:24)
angular.js:9503