Sweet Alerts 2

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for Javascript's popup boxes.
Read the official SweetAlert2 Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="sweetalert2.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-sweet-alerts.css">

      
2. Call the sweetAlert-function after the page has loaded.

Following is the code for basic 'Error' alert:


Swal.fire({
    icon: 'error',
    title: 'Error!',
    text: 'Do you want to continue?',
    type: 'error',
    confirmButtonText: 'Cool',
    customClass: {
      confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
})

      

Refer following links for detailed documentation, configuration options, methods and examples:

Block UI

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.
Read the official BlockUI Documentation for a full list of instructions and other options.

1. Binding to existing DOM element.

<div id="section-block">...</div>
<button id="btn-section-block" class="btn btn-primary">Block Section</button>

      
2. Basic usage looks something like this:

$('#btn-section-block').on('click', function () {
    $('#section-block').block({
        message: '<div class="spinner-border text-white" role="status"></div>',
        timeout: 1000,
        css: {
            backgroundColor: 'transparent',
            border: '0'
        },
        overlayCSS: {
            opacity: 0.5
        }
    });
});

      

Refer following links for detailed documentation, configuration options, methods and examples:

Toastr

toastr is a Javascript library for non-blocking notifications.
Read the official Toastr Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="toastr.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-toastr.css">

      
2. Binding to existing DOM element.

<button id="type-success" class="btn btn-success">Success</button>

      
3. Basic usage looks something like this:

$('#type-success').on('click', function () {
    toastr.success('👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie.', 'Success!', {
        closeButton: true,
        tapToDismiss: false
    });
});

// OR
$('#type-success').on('click', function () {
    toastr['success']('👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie.', 'Success!', {
        closeButton: true,
        tapToDismiss: false
    });
});

      
Change Toastr icon using CSS:

Here is an example of Toastr with success variant.


// For Toastr icon
.toast-success:after {
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E);
}

// For Toastr icon color
.toast-success:before {
  background-color: #28c76f;
}

      

You can change any Toastr icon using above method in the following file: assets/css/style.css.

Change Toastr icon using SCSS:

Here is an example of Toastr with success variant.


// For Toastr icon
.toast-success:after {
  background-image: url(str-replace(str-replace($check, 'currentColor', $white), '#', '%23'));
}

// For Toastr icon color
.toast-success:before {
  background-color: $success;
}

      
Toastr variant Variable name
.toast-success $check
.toast-error $remove
.toast-warning $warningIcon
.toast-info $infoIcon

You can change any Toastr icon using above method in the following file: assets/scss/variables/_variables.scss.

Refer following links for detailed documentation, configuration options, methods and examples:

NoUI Slider

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.
Read the official noUiSlider Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="wNumb.min.js"></script>
<script src="nouislider.min.js"></script>
<link rel="stylesheet" type="text/css" href="nouislider.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-sliders.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/core/colors/palette-noui.css">

      
2. Binding to existing DOM element.

<div id="slider"></div>

      
3. Basic usage looks something like this:

var slider = document.getElementById('slider');
// RTL Support
var direction = 'ltr';
if ($('html').data('textdirection') == 'rtl') {
  direction = 'rtl';
}

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    direction: direction, // RTL Support
    range: {
        'min': 0,
        'max': 100
    }
});

      

Refer following links for detailed documentation, configuration options, methods and examples:

Drag And Drop

Drag and Drop allows the user to drag an element from a container and drop it in the same or any other container. If the element is dropped anywhere that's not one of the containers, the event will be cancelled.
Read the official Drag and Drop Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="dragula.min.js"></script>
<link rel="stylesheet" type="text/css" href="dragula.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-drag-drop.css">

      
2. Following is the example to drag & drop from one container to same or another container.

dragula([document.getElementById(left), document.getElementById(right)]);

      

Shepherd Tour

Guide your users through a tour of your app.
Read the official Shepherd Tour Documentation for a full list of instructions and other options.

Note: Shepherd Tour does not support Internet Explorer.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="shepherd.min.js"></script>
<script src="tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="shepherd.min.css">
<link rel="stylesheet" type="text/css" href="tether.min.css">
<link rel="stylesheet" type="text/css" href="tether-theme-arrows.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-tour.css">

      
2. Binding to existing DOM element.

<button id="tour" class="btn btn-primary">Start Tour</button>

      
3. Basic usage looks something like this:

function setupTour(tour) {
  tour.addStep({
    title: 'Example Shepherd',
    text: 'Creating a Shepherd is easy too! Just create ...',
    attachTo: { element: '.hero-example', on: 'bottom'},
    buttons: [
      {
        action: tour.cancel,
        classes: 'btn btn-sm btn-outline-primary',
        text: 'Skip'
      },
      {
        action: tour.next,
        classes: 'btn btn-sm btn-primary btn-next',
        text: 'Next'
      }
    ]
  });
  return tour;
}

$('#tour').on('click', function () {
  var tourVar = new Shepherd.Tour({
    defaultStepOptions: {
      classes: 'shadow-md bg-purple-dark',
      scrollTo: false,
      cancelIcon: {
        enabled: true
      }
    },
    useModalOverlay: true
  });
  setupTour(tourVar).start();
});

      

Clipboard

Use below code to initialize clipboard.

1. Binding to existing DOM element.

<input type="text" class="form-control" id="copy-to-clipboard-input" value="Copy Me!">
<button class="btn btn-primary" id="btn-copy">Copy!</button>

      
2. Basic usage looks something like this:

var userText = $("#copy-to-clipboard-input");
var btnCopy = $("#btn-copy");

// copy text on click
btnCopy.on("click", function () {
  userText.select();
  document.execCommand("copy");
})

      

Media Player

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
Read the official Plyr Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src='plyr.min.js'></script>
<script src='plyr.polyfilled.min.js'></script>
<link rel="stylesheet" type="text/css" href="plyr.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-media-player.css">

      
2. Binding to existing DOM element.

<div id="video-player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

<audio id="audio-player" controls>
  <source
    src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
    type="audio/mp3"
  />
  <source
    src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
    type="audio/ogg"
  />
</audio>

      
3. Basic usage looks something like this:

var player = new Plyr('#video-player');
var player1 = new Plyr('#audio-player');

      

Context Menu

Context Menu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible.
Read the official Context Menu Documentation for a full list of instructions and other options.

Note: The toasts appearing on click of menu items are manually configured using third party plugin Toastr mentioned above.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src='jquery.contextMenu.min.js'></script>
<script src='jquery.ui.position.min.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.contextMenu.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-context-menu.css">

        
2. Binding to existing DOM element.

<button class="btn btn-primary" id="basic-context-menu">Right Click On Me</button>

      
3. Basic usage looks something like this:

$.contextMenu({
  selector: "#basic-context-menu",
  callback: function (key, options) {
    var r = "clicked " + key;
    (window.console && console.log(r)) || alert(r)
  },
  items: {
    "Option 1": { name: "Option 1" },
    "Option 2": { name: "Option 2" },
  }
})

      

Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Read the official Swiper Documentation for a full list of instructions and other options.

Swiper is not compatible with all platforms.

1. Initialize the plugin by referencing the necessary files:

  <!-- Vendor files -->
  <script src='swiper.min.js'></script>
  <link rel="stylesheet" type="text/css" href="swiper.min.css">

  <!-- Template files -->
  <link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-swiper.css">

      
2. Binding to existing DOM element.

<div class="swiper-default swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slider 1 data </div>
        <div class="swiper-slide">Slider 2 data </div>
        <div class="swiper-slide">Slider 3 data </div>
    </div>
</div>

      
3. Initialization

var mySwiper = new Swiper('.swiper-default');

      

Tree

jsTree is jquery plugin, that provides interactive trees. jsTree is easily extendable, themeable and configurable, it supports HTML & JSON data sources and AJAX loading.
Read the official jsTree Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="jstree.min.js"></script>
<link rel="stylesheet" type="text/css" href="jstree.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-tree.css">

      
2. Binding to existing DOM element.

<div id="jstree-basic">
  <ul>
    <li>
      css
      <ul>
        <li>app.css</li>
        <li>style.css</li>
      </ul>
    </li>
    <li class="jstree-open">
      img
      <ul>
        <li>logo.jpg</li>
        <li>avatar.png</li>
      </ul>
    </li>
    <li>index.html</li>
    <li>page.html</li>
  </ul>
</div>

      
3. Basic usage looks something like this:

$('#jstree-basic').jstree();

      

Refer following links for detailed documentation, configuration options, methods and examples:

Ratings

RateYo is a tiny and flexible jQuery star rating plugin that uses SVG to render rating, so no images are required.
Read the official RateYo Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="jquery.rateyo.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/extensions/ext-component-ratings.css">

      
2. Binding to existing DOM element.

<div id="basic-ratings"></div>

      
3. Basic usage looks something like this:

var isRtl = $('html').attr('data-textdirection') === 'rtl' // RTL support
$('#basic-ratings').rateYo({
  rating: 3.6,
  rtl: isRtl // RTL support
});

      

Refer following links for detailed documentation, configuration options, methods and examples:

Internationalization

18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
Read the official i18next Documentation for a full list of instructions and other options.

Basic usage looks something like this:

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
}, function(err, t) {
  // initialized and ready to go!
  document.getElementById('output').innerHTML = i18next.t('key');
});