Sweet Alerts 2

A Beautiful, Responsive, Customizable, Accessible (Wai-Aria) Replacement For Javascript'S Popup Boxes.

1. Required Vendor files:
                  
                      <script src="sweetalert2.all.min.js"></script>
                        <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">
                  
              
2. Initialization:
                  
                      Swal.fire({
                        title: 'Error!',
                        text: 'Do you want to continue',
                        type: 'error',
                        confirmButtonText: 'Cool'
                      });
                  
              
Note: We have used animate.css for different types of animation. You can get further details here.

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

Type URL
Plugin Link https://sweetalert2.github.io/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-sweet-alerts.html

Toastr

Toastr is a Javascript library for Gnome / Growl type non-blocking notifications.

1. Required Vendor files:
        
            <script src="toastr.js"></script>
            <link rel="stylesheet" type="text/css" href="toastr.css">
        
      
2. Initialization:
        
            // Display an info toast with no title
            toastr.info('Are you the 6 fingered man?')
        
      

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

Type URL
Plugin Link https://codeseven.github.io/toastr/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-toastr.html

NoUI Slider

noUiSlider is a Javascript 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..

1. Required Vendor files:
        
            <script src="nouislider.min.js"></script>
            <link rel="stylesheet" type="text/css" href="nouislider.min.css">
        
      
2. Binding to existing DOM element.
        
            <div id="slider"></div>
        
      
3. Initialization:
        
            var slider = document.getElementById('slider');
            noUiSlider.create(slider, {
                start: [20, 80],
                connect: true,
                range: {
                    'min': 0,
                    'max': 100
                }
            });
        
      

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

Type URL
Plugin Link https://refreshless.com/nouislider/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-noui-slider.html

Drag And Drop

Drag and drop so simple it hurts!

1. Required Vendor Files:
        
            <script src='dragula.min.js'></script>
            <link href="dragula.min.css" rel="stylesheet">
        
      
2. Initialization:
        
          dragula([document.getElementById("left"), document.getElementById("right")]);
        
      
Type URL
Plugin Link https://bevacqua.github.io/dragula/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-drag-drop.html

Shepherd Tour

Guide your users through a tour of your app.

Note: Shepherd Tour does not support Internet Explorer.

1. Required Vendor Files
            
                <script src='shepherd.min.js'></script>
                <link href="shepherd-theme-default.css" rel="stylesheet">
            
          
2. Initialization
            
                var tour = new Shepherd.Tour({
                  defaultStepOptions: {
                    classes: 'shadow-md bg-purple-dark',
                    scrollTo: true
                  }
                });

                tour.addStep('example', {
                  title: 'Example Shepherd',
                  text: 'Creating a Shepherd is easy too! Just create ...',
                  attachTo: '.hero-example bottom',
                  advanceOn: '.docs-link click'
                });

                tour.start();
            
          
Type URL
Plugin Link https://shepherdjs.dev/docs/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-tour.html

Swiper

Swiper - is the free and most modern 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.

1. Required Vendor Files
            
                <script src='swiper.min.js'></script>
                <link href="swiper.min.css" rel="stylesheet">
            
          
2. Required Template Specific Files
                
                    <link href="swiper.css" rel="stylesheet">
                
              
3. Dom Binding
        
            <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>
            </div>
        
      
4. Initialization
        
            var mySwiper = new Swiper('.swiper-default');
        
      
Type URL
Plugin Link https://idangero.us/swiper/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-swiper.html

Treeview

A tree view represents a hierarchical view of information, where each item can have a number of subitems.

1. Required Vendor Files
        
          <script src='bootstrap-treeview.min.js'></script>
          <link href="bootstrap-treeview.min.css" rel="stylesheet">
        
      
2. Required Template Specific Files
        
        <link href="ext-component-treeview.css" rel="stylesheet">
        
      
3. Dom Binding
        
        <div id="default-treeview"></div>
        
      
4. Initialization
        
            $('#default-treeview').treeview({
              selectedBackColor: [colorName],
              data: dataFunctionHere
            });
        
      
Type URL
Plugin Link https://github.com/jonmiles/bootstrap-treeview
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-treeview.html

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.

1. Required Vendor Files
        
            <script src='blockUI.min.js'></script>
        
      
2. Dom Binding
        
            <div class="default-blockui"></div>
        
      
3. Initialization
        
          var block_ele = $(this).closest('.card');
          $(block_ele).block({
            message: 'Your Message Here!',
            timeout: 2000, //unblock after 2 seconds
            css: {
              <-- Your CSS here! -->
            }
          });
        
      
Type URL
Plugin Link http://malsup.com/jquery/block/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-block-ui.html

Media Player

Simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

1. Required Vendor Files
        
            <script src='plyr.min.js'></script>
            <link href="plyr.css'" rel="stylesheet">
        
      
2. Initialization
          
              var player = new Plyr('.default-player');
          
        
Type URL
Plugin Link https://plyr.io/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-media-player.html

Clipboard

Clipboard is a manually created extension.

1. Dom Binding
        
            <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. Initialization
        
          var userText = $("#copy-to-clipboard-input");
          var btnCopy = $("#btn-copy");

          // copy text on click
          btnCopy.on("click", function () {
            userText.select();
            document.execCommand("copy");
          })
        
      
Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-miscellaneous.html

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.

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

1. Required Vendor Files
          
              <script src='contextMenu.min.js'></script>
              <link href="contextMenu.min.css" rel="stylesheet">
          
        
2. Dom Binding
        
            <button class="btn btn-primary" id="basic-context-menu">Basic Context Menu>
        
      
3. Initialization
        
            $.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" },
              }
            })
        
      
Type URL
Plugin Link https://swisnl.github.io/jQuery-contextMenu/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-miscellaneous.html

Idle Timer

The idle timer is built on jQuery and provides two events: idle.idleTimer and active.idleTimer, which fire when the user's idle state has changed. When you move your mouse over the page or start typing, you're considered "active".

In Template we have used idle timer with moment js for live timing. You can find more details here.
1. Required Vendor Files
        
            <script src='idle-timer.min.js'></script>
        
      
2. Required Template Specific Files
        
          <script src='moment.min.js'></script>
        
      
3. Initialization
        
        $( document ).idleTimer( {
          timeout:10000,
          idle:true
        });
        
      
Type URL
Plugin Link https://thorst.github.io/jquery-idletimer/prod/demos/index.html
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-miscellaneous.html#idleTimer

Numeral Js

Numeral Js is a javascript library for formatting and manipulating numbers.

1. Required Vendor Files
            
                <script src='numeral.js'></script>
            
          
2. Initialization
        
          $(".yourClassHere").text(numeral(1000.234).format("$0,0.000"));
        
      
Type URL
Plugin Link http://numeraljs.com/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-miscellaneous.html#numeral-js-wrapper

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.

1. Required Vendor Files
            
                <script src='i18next.min.js'></script>
                <link href="i18next.min.css" rel="stylesheet">
            
          
2. Initialization
        
          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');
          });
          
        
Type URL
Plugin Link https://www.i18next.com/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-i18n.html