Sunday, July 21, 2024
HomejQueryDynamic Bootstrap 5 Toasts Creation With jQuery bs-toast.js

Dynamic Bootstrap 5 Toasts Creation With jQuery bs-toast.js


bs-toast.js is a small jQuery plugin that permits you to create and handle Bootstrap 5’s Toast elements with ease.

It helps you create extremely customizable toast notifications with the flexibility to specify the title, message, sort, placement, and extra.

use it:

1. Embrace the mandatory jQuery library, Bootstrap 5 framework, and Bootstrap Icons in your doc:


<script src="/path/to/cdn/jquery.slim.min.js"></script>
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css">
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Obtain and add the bs-toast.js script to your doc:


<script src="dist/bs-toast.min.js"></script>

3. Initialize the bsToast and specify the title and message for the toast:


$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
});

4. Change the notification sort by specifying the ‘sort’ possibility. Out there varieties: ‘data’, ‘warning’, ‘success’, ‘hazard’, ‘gentle’, ‘darkish’, ‘main’, ‘secondary’.


$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  sort: 'hazard',
});

5. Set the position of the toast notification by utilizing the ‘placement’ possibility. Out there placement choices: ‘ts’, ‘tc’, ‘te’, ‘ms’, ‘mc’, ‘me’, ‘bs’, ‘bc’, ‘be’.


$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  placement: 'tc', // high heart
});

6. Extra configuration choices:


$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  begin: 0,
  delay: 5000,
  autoHide: true,
  animation: true,
  staticBackdrop: false,
});

7. Outline callback capabilities for the toast occasions:


$.bsToast({
  title: 'Toast Title',
  message: 'Toast Message.',
  onShow: operate() {
    // do one thing
  },
  onShown: operate() {
    // do one thing
  },
  onHide: operate() {
    // do one thing
  },
  onHidden: operate() {
    // do one thing
  },
});

This superior jQuery plugin is developed by ThomasDev-de. For extra Superior Usages, please verify the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments