it-swarm.com.de

Wie implementiere ich Toastr JS?

Ich bin neu bei JS und weiß nicht, wie ich das auf meiner Seite machen soll. Unten ist was ich habe. Wie muss ich diese Warnmeldung anzeigen lassen?

Ich habe die Quelle korrekt hinzugefügt, weiß jedoch nicht, wie die Warnung gerendert werden soll. 

<!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>
13
starbucks

Toastr ist eine sehr schöne Komponente, und Sie können Nachrichten mit diesen Befehlen anzeigen:

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

Wenn Sie einen Titel in der Toastr-Nachricht angeben möchten, fügen Sie einfach ein zweites Argument hinzu:

// for info - blue box
toastr.success('The process has been saved.', 'Success');

sie können das Standardverhalten auch folgendermaßen ändern:

toastr.options.timeOut = 3000; // 3s

Mehr dazu auf der github des Projekts .

Bearbeitungen

Ein Anwendungsbeispiel:

$(document).ready(function() {

    // show when page load
    toastr.info('Page Loaded!');

    $('#linkButton').click(function() {
       // show when the button is clicked
       toastr.success('Click Button');

    });

});

und ein HTML:

<a id='linkButton'>Show Message</a>
39
Felipe Oriani

Sie brauchen keine Jquery-Migration. Um die vorherigen Antworten zusammenzufassen, hier ein funktionierendes 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>
7
Jeson Martajaya

Ich untersuche, dass ich wusste, dass das Jquery-Skript geladen werden muss, damit es in Ihrem Fall nicht funktioniert. Weil das in Code erwähnte $ -Symbol nicht verstanden wird, es sei denn, Sie laden zuerst 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>

Dann wird es gut funktionieren

4
Anto King

Dies ist eine einfache Möglichkeit!

<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
Dr. K

CDN-Dateien von toastr.css und toastr.js hinzufügen

<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");
0
Meher

Sie können die Bibliothek Msg verwenden, um modale Fenster und Popups/Toasts zu erstellen. Es ist gut dokumentiert und hat viele Optionen.

0
madprops