sta*_*cks 15 javascript jquery toastr
我是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>
Fel*_*ani 43
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');
如果要在toastr消息上提供标题,只需添加第二个参数:
// for info - blue box
toastr.success('The process has been saved.', 'Success');
您还可以使用以下内容更改默认行为:
toastr.options.timeOut = 3000; // 3s
使用样本:
$(document).ready(function() {
// show when page load
toastr.info('Page Loaded!');
$('#linkButton').click(function() {
// show when the button is clicked
toastr.success('Click Button');
});
});
和一个HTML:
<a id='linkButton'>Show Message</a>
你不需要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>
我调查了一下，我知道需要加载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>
这样就可以了
小智 5
这是一个简单的方法！
<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>