文章/答案/技术大牛

发布

社区首页 >问答首页 >如何实现Toastr JS？

问如何实现Toastr JS？
EN

Stack Overflow用户

提问于 2013-05-15 02:05:06

回答 5查看 136.8K关注 0票数 21

我是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>

jquery

toastr

javascript

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-05-15 02:13:28

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

在github of the project上查看更多信息。

编辑

下面是一个使用示例：

$(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>

票数 57

Stack Overflow用户

发布于 2014-03-05 15:31:45

你不需要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>

票数 11

Stack Overflow用户

发布于 2014-01-23 19:31:28

我调查了一下，我知道需要加载jquery脚本，这就是为什么它在您的情况下不起作用。因为代码中提到的$ symbol是无法理解的，除非您首先加载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>

然后它就会工作得很好

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16549885

复制

相似问题

问如何实现Toastr JS？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何实现Toastr JS？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何实现Toastr JS？
EN