Comment puis-je mettre en œuvre Toastr JS?

Je suis nouveau sur le JS et pas sûr de la façon de faire ce travail sur ma page. Ci-dessous est ce que j'ai. Comment doit-je faire de cette alerte?

J'ai ajouté correctement la source, mais pas sûr de la façon de rendre l'alerte.

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

J'espère que vous avez commencé avec le documentation
Je l'ai fait mais je ne sais pas vraiment comment appeler l'alerte? Puis-je utiliser un événement de clic? Je suis nouveau sur le JS.
Vous devez supprimer Command: avant toastr

OriginalL'auteur starbucks | 2013-05-14

37

Toastr est une très belle componente, et vous pouvez afficher les messages avec les thèses de commandes:
```
//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');
```
Si vous voulez donner un titre sur le toastr message, il suffit d'ajouter un deuxième argument:
```
//for info - blue box
toastr.success('The process has been saved.', 'Success');
```
vous aussi vous pouvez modifier le comportement par défaut en utilisant quelque chose comme ceci:
```
toastr.options.timeOut = 3000; //3s
```
Voir plus sur le github du projet.

Modifications

Un exemple d'utilisation:
```
$(document).ready(function() {

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

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

    });

});
```
et un html:
```
<a id='linkButton'>Show Message</a>
```
Merci. Mais ma question est de savoir comment les utiliser dans mon code html pour afficher ces messages. Merci!
Eh bien, vous avez déjà le programme d'installation sur votre page de droite? suffit d'appeler ces méthodes où vous avez besoin d'afficher un message :).. pour l'échantillon, sur la $(document).ready(function() {...}); ou tout autre gestionnaire d'événement!
C'est ce que je veux dire. Comment puis-je les appeler? Je suis désolé si cela est évident, mais je suis nouveau sur le JS.
pouvez-vous me donner un exemple de l'utilisation de mon code en question? Je vais vraiment l'apprécier. merci!
Somethoing comme ça? $('.show_hide').cliquez sur(function () { // pour le succès - la boite verte toastr.succès (Succès des messages'); toastr.des options.timeOut = 3000; // 3s });

OriginalL'auteur Felipe Oriani

Vous n'avez pas besoin de jquery-migrer. Résumant les réponses précédentes, en voici un qui fonctionne 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>

OriginalL'auteur Jeson Martajaya

J'ai d'enquêter je savais que le script jquery besoin de charger afin que pourquoi il n'a pas travaillé dans votre cas.
Parce que $ symbole mentionné dans le code de ne pas comprendre, à moins que vous charger Jquery 1.9.1 au premier abord.
Charge comme suit

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

Alors cela fonctionnera très bien

OriginalL'auteur Anto King

1

Vous pouvez essayer Msg, une bibliothèque pour créer des fenêtres modales et les popups/toasts. Il est bien documenté et il y a beaucoup d'options.

OriginalL'auteur madprops

Vous devez vous connecter pour publier un commentaire.

Modifications