【问题标题】:How do I use toastr?我如何使用烤面包机?
【发布时间】:2014-10-09 22:33:38
【问题描述】:

我喜欢我可以用 toastr 做什么的想法,但我似乎无法让它发挥作用。

来自官方页面...

(1) Link to toastr.css
(2) Link to toastr.js
(3) Use toastr to display a toast for info, success, warning or error
To install toastr, run the following command in the Package Manager Console
Install-Package toastr

我下载了 NuGet 的命令行版本并输入 install toastr 并成功安装,(虽然我不知道它实际上做了什么......)然后,在我的页面中,test.php ,我有以下代码:

<html>
<head>
<link rel="stylesheet" href="/toastr.css">
<script type="text/javascript" src="/toastr.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body>
toastr.info('Hey - it works!');
</body>

网站本身说这非常简单......

// Display an info toast with no title

toastr.info('Are you the 6 fingered man?')

但是当我执行页面时,我看到的只是字面意思:

toastr.info('嘿 - 它有效!');

我做错了什么?

【问题讨论】:

  • 您可能想要查看基本的 javascript 教程

标签: javascript html toastr


【解决方案1】:

您可以在您的关闭正文标签之前添加您的脚本标签,也可以在有效的 javascript 范围内使用它。

.. all html page

<script>

    $(document).ready(function() {

        // show when page load
        toastr.info('Hey - it works!');

    });

</script>

</body>
</html>

你还有其他方法,

// 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');

【讨论】:

  • 我想我不知道如何使用javascript,我需要它才能使用它。我将代码$(document).ready(function() { // show when page load toastr.info('Page Loaded!'); $('#linkButton').click(function() { // show when the button is clicked toastr.success('Click Button'); }); }); 放入我的页面中,但它没有做任何事情,它只是呼应了代码......我需要把它包装起来吗?
  • 所有 javascript 代码必须在 标记之间,否则浏览器不会将其识别为 javascript。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-02-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-07-29
  • 2019-08-05
相关资源
最近更新 更多