jQuery 如何实现 Toastr JS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16549885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I implement Toastr JS?
提问by starbucks
I am new to JS and not sure how to make this work on my page. Below is what I have. How must I make this alert show?
我是 JS 新手，不知道如何在我的页面上进行这项工作。下面是我所拥有的。我必须如何显示此警报？
I added the source correctly but not sure how to render the alert.
我正确添加了源，但不确定如何呈现警报。
<!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>
回答by Felipe Oriani
Toastr is a very nice component, and you can show messages with theses commands:
Toastr 是一个非常好的组件，您可以使用以下命令显示消息：
// for success - green box
toastr.success('Success messages');
// for errors - red box
toastr.error('errors messages');
// for warning - orange box
toastr.warning('warning messages');
// for info - blue box
toastr.info('info messages');
If you want to provide a title on the toastr message, just add a second argument:
如果要在 toastr 消息上提供标题，只需添加第二个参数：
// for info - blue box
toastr.success('The process has been saved.', 'Success');
you also can change the default behaviour using something like this:
您还可以使用以下内容更改默认行为：
toastr.options.timeOut = 3000; // 3s
See more on the github of the project.
Edits
编辑
A sample of use:
使用示例：
$(document).ready(function() {
// show when page load
toastr.info('Page Loaded!');
$('#linkButton').click(function() {
// show when the button is clicked
toastr.success('Click Button');
});
});
and a html:
和一个 html：
<a id='linkButton'>Show Message</a>
回答by Jeson Martajaya
You dont need jquery-migrate. Summarizing previous answers, here is a working html:
您不需要 jquery-migrate。总结以前的答案，这是一个有效的 html：
<html>
<body>
<a id='linkButton'>ClickMe</a>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
toastr.options.timeOut = 1500; // 1.5s
toastr.info('Page Loaded!');
$('#linkButton').click(function() {
toastr.success('Click Button');
});
});
</script>
</body>
</html>
回答by Anto King
I investigate i knew that the jquery script need to load in order that why it not worked in your case. Because $ symbol mentioned in code not understand unless you load Jquery 1.9.1 at first. Load like follows
我调查我知道 jquery 脚本需要加载，以便它在您的情况下不起作用。因为代码中提到的 $ 符号不理解，除非您首先加载 Jquery 1.9.1。加载如下
<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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
Then it will work fine
然后它会正常工作
回答by Dr. K
This is a simple way to do it!
这是一个简单的方法来做到这一点！
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
<script>
function notificationme(){
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"preventDuplicates": true,
"onclick": null,
"showDuration": "100",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "show",
"hideMethod": "hide"
};
toastr.info('MY MESSAGE!');
}
</script>
回答by Meher
Add CDN Files of toastr.css and toastr.js
添加 toastr.css 和 toastr.js 的 CDN 文件
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
function toasterOptions() {
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-center",
"preventDuplicates": true,
"onclick": null,
"showDuration": "100",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "show",
"hideMethod": "hide"
};
};
toasterOptions();
toastr.error("Error Message from toastr");
