Toastr – Simple jQuery Toast Notifications | JS Toastr Example

Top Blogs

Other Blogs

Best Branded Mouse Under 500 In India Available On Amazon

Best Keyboards Under 1000 Available On Amazon

Java program to check if string is a palindrome : check palindrome string in java

Blogs ❯❯ JavaScript

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

JQuery Toastr Notification

अगर आप कोई website develop कर रहे हैं तो , इसे और attractive और user friendly बनाने के लिए आप success , error या warning messages को show करने के लिए toastr library का use कर सकते हैं।

●●●

What is jQuery Toastr ?

toastr , non-blocking notifications के लिए एक JavaScript library है , इसे use करने के लिए jQuery required है। इस library का main purpose notifications को और user friendly बनाना है।

How to use toastr ?

toastr library को use करने के दो तरीके है -

Using CDN
Install and use it.

JS toastr CDN

पहला तरीका है direct आप आपने HTML page में toastr library को CDN का use करके include करें , इसके लिए आपको सिर्फ दो files CSS , JavaScript files को include करना है।

CDN link नीचे दी गयी है।

// JS
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

// CSS
https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css

Install toastr library

दूसरा तरीका है toastr library को अपने application में install करके use करना। नीचे कुछ different - different package manager के according install करने की commands दी गयी है।

NuGet Gallery

Install-Package toastr

Bower

bower install toastr

npm

npm install --save toastr

yarn

yarn add toastr

Ruby on Rails


# Gemfile
gem 'toastr-rails'

// application.scss
@import "toastr";

●●●

JavaScript toastr Notification Example

Install करने के बाद , CSS और JavaScript file को add कर लें।


<link href="toastr.css" rel="stylesheet"/>
<script src="toastr.js"></script>

Basic use कुछ इस तरह से है।


// Display an info toast with no title.
toastr.info('This is crazy')

इसके अलावा और भी options है जो नीचे दिए गए है।

// Display a warning toast, with no title. toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!') // Display a success toast, with a title. toastr.success('Have fun storming the castle!', 'Miracle Max Says') // Display an error toast, with a title. toastr.error('I do not think that word means what you think it means.', 'Inconceivable!') // Immediately remove current toasts without using animation. toastr.remove() // Remove current toasts using animation. toastr.clear() // Override global options. toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

toastr Escape HTML characters

आप title और message में HTML characters को escape भी कर सकते हैं।


toastr.options.escapeHtml = true;

toastr Close Button

आप alert section में close button भी show करा सकते हैं।


toastr.options.closeButton = true;

या फिर close button का HTML भी replace कर सकते हैं।


toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

इसके अलावा आप hide animation को भी override कर सकते हैं , जैसे कितनी देर में वो notification close हो जाये।


toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';

JavaScript toastr Callback Functions

आप Callback Functions का use करके toast की किसी particular event को handle भी कर सकते हैं।


toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }

●●●

JS Toastr Example


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Toastr Library</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script>
      $(function () {
        // set options.
        toastr.options = {
          "closeButton": false,
          "debug": false,
          "newestOnTop": false,
          "progressBar": false,
          "positionClass": "toast-top-right",
          "preventDuplicates": false,
          "onclick": null,
          "showDuration": "300",
          "hideDuration": "1000",
          "timeOut": "5000",
          "extendedTimeOut": "1000",
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut"
        }
        toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!');
        toastr.success('Have fun storming the castle!', 'Miracle Max Says');
        toastr.error('I do not think that word means what you think it means.', 'Inconceivable!');
        toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', { timeOut: 5000 });
      });
    </script>
  </body>
</html>

इसके अलावा आप advance options नीचे दी गयी link पर भी देख सकते हैं।

https://codeseven.github.io/toastr/demo.html

I Hope , आपको toastr library के बारे में अच्छे से समझ आ गया होगा।

●●●

Recent Blogs

Loading ...

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook