logo标签列表

如何实现Toastr JS？

javascriptjquerytoastr
29

我对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>
3
我已经开始阅读文档，希望您也能开始。 - Blazemonger
我做了，但是我不清楚如何调用警报？我需要使用点击事件吗？我也是JS新手。 - starbucks
你需要在toastr之前移除“Command:”。 - Marc
6个回答
72

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页面。

编辑

一个使用示例：

$(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>
谢谢。但我的问题是如何在我的HTML中使用它们来显示这些消息。谢谢！ - starbucks
你已经在你的页面上设置好了吧？只需在需要显示消息的地方调用那些方法即可 :).. 例如，在 $(document).ready(function() {...}); 或任何其他事件处理程序中！ - Felipe Oriani
这就是我的意思。我该如何调用它们？如果这很明显，我很抱歉，因为我是JS的新手。 - starbucks
你能否给我一个使用我在问题中提供的代码的示例？我会非常感激。谢谢！ - starbucks
谢谢。在复制您的代码后，我得到了以下错误：ReferenceError: jQuery未定义}（window，jQuery））;toastr.js（第166行） SyntaxError：无效标签toastr.options：{toast.html＃toastr（第28行，第7列） - starbucks
显示剩余2条评论
12

您不需要使用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>

8

我调查后发现，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>
1

这是一个简单的方法来实现它！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toaster Example</title>
    <!-- toastr -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" />
</head>

<body>
    <button id="btnInfo">Info</button>
    <button id="btnSuccess">Success</button>
    <button id="btnError">Error</button>
    <button id="btnWarning">Warning</button>

    <!-- jquery -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

    <!-- core script  -->
    <script type="text/javascript">
        // consts 
        const btnInfo = document.getElementById('btnInfo');
        const btnSuccess = document.getElementById('btnSuccess');
        const btnError = document.getElementById('btnError');
        const btnWarning = document.getElementById('btnWarning');

        // Event Listeners
        btnInfo.addEventListener('click', displayInfoToaster);
        btnSuccess.addEventListener('click', displaySuccessToaster);
        btnError.addEventListener('click', displayErrorToaster);
        btnWarning.addEventListener('click', displayWarningToaster);

        // functions
        function displayInfoToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.info('info messages');
        }

        function displaySuccessToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.success('Success messages');
        }

        function displayErrorToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.error('errors messages');
        }

        function displayWarningToaster() {
            toastr.options.timeOut = 1500; // 1.5s 
            toastr.warning('warning messages');
        }
    </script>
</body>

</html>

0

添加 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");
2
需要将选项放在一个函数中吗？ - Jamie Lindsey
1
不需要。Toastr将应用默认值。如果您需要对Toastr进行任何自定义，则可以这样做。如果不需要，请直接调用Success、Error、Info、Warning Toastr。 - Meher
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接