Toastr – Simple jQuery Toast Notifications | JS Toastr Example

Top Blogs

Other Blogs

What is OSI Model In Hindi | Layers of OSI model

Linux netstat Command : Linux Networking

wc Command In Linux | Linux count characters in line or file

Snowflake Virtual warehouses In Hindi | Create warehouse In Snowflake In Hindi

Time Travel In Snowflake In Hindi | Snowflake Time Travel Example

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 ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook