<div class="avatar">
                            <span class="avatar-content"><i class="feather icon-github"></i></span>
                        </div>
                    
                

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

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'
							});
						
					

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

1. Initialize the plugin by referencing the necessary files:

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

2. Use toastr to display a toast for info, success, warning or error.

                
                    // 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:

Usage with Image

                    
                        <script src="jquery.raty.js"></script>
                    
                

                    
                        <div id="star-rating"></div>
                    
                

                    
                        $('#star-rating').raty();
                    
                

Usage with Font

                    
                        <script src="jquery.raty.js"></script>
                        <link rel="stylesheet" type="text/css" href="jquery.raty.css">
                    
                

                    
                        <div id="star-rating"></div>
                    
                

                    
                        $('#star-rating').raty({ starType: 'i' });
                    
                

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

1. Initialize the plugin by referencing the necessary 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. Basic usage may look something like this.

                
                    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:

1. Initialize the plugin by referencing the necessary files:

                
                    <script src="jquery.knob.min.js"></script>
                
            

2. Binding component to DOM element.

                
                    <input type="text" value="75" class="dial">
                
            

3. Basic usage may look something like this.

                
                    $(function() {
                        $(".dial").knob();
                    });
                
            

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

1. Required Vendor Files

                
                    <script src="blockUI.min.js"></script>
                
            

2. Binding component to DOM element.

                
                    <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! -->
                      }
                    });
                
            

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

                    
                        //- Bootstrap DateTime Picker
                        <script src="moment-with-locales.min.js"></script>
                        <script src="bootstrap-datetimepicker.min.js"></script>
                        //- PICK-A-DATE PICKER or //- PICK-A-TIME PICKER
                        <script src="picker.js"></script>
                        <script src="picker.date.js"></script>
                        <script src="picker.time.js"></script>
                        <script src="legacy.js"></script>
                        //- BOOTSTRAP DATERANGE PICKER
                        <script src="daterangepicker.js"></script>
                    
                

                    
                        //- Bootstrap DateTime Picker
                        <link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker.css">
                        //- PICK-A-DATE PICKER
                        <link rel="stylesheet" type="text/css" href="pickadate.css">
                        //- BOOTSTRAP DATERANGE PICKER
                        <link rel="stylesheet" type="text/css" href="daterangepicker.css">
                    
                

                    
                        //- Template JS for DateTimePicker
                        <script src="bootstrap-datetime.js"></script>
                        <script src="pick-a-datetime.js"></script>
                    
                

                    
                        <link rel="stylesheet" type="text/css" href="daterange.css">
                    
                

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

A simple jQuery image cropping plugin.

1. Required Vendor Files:

                
                    <script src="/path/to/cropper.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="/path/to/cropper.css">
                
            

2. Dom Binding:

Wrap the image or canvas element with a block element (container).

                
                    <div>
                        <img id="image" src="picture.jpg">
                    </div>
                
            

Limit image width to avoid overflow the container.

                
                    img {
                        max-width: 100%; /* This rule is very important, please do not ignore this! */
                    }
                
            

3. Initialization:

                
                    var $image = $('#image');

                    $image.cropper({
                        aspectRatio: 16 / 9,
                        crop: function(event) {
                            console.log(event.detail.x);
                            console.log(event.detail.y);
                            console.log(event.detail.width);
                            console.log(event.detail.height);
                            console.log(event.detail.rotate);
                            console.log(event.detail.scaleX);
                            console.log(event.detail.scaleY);
                        }
                    });

                    // Get the Cropper.js instance after initialized
                    var cropper = $image.data('cropper');
                
            

Refer following links for usage:

                    
                        <button>
                            <i class="fa fa-refresh spinner"></i>
                        </button>
                    
                

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

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.

1. Initialize the plugin by referencing the necessary files:

                
                    <script src="/path/to/dropzone.min.js"></script>
                
            

2. The typical way of using dropzone is by creating a form element with the class dropzone. That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input.

                
                    <form action="/file-upload" class="dropzone">
                        <div class="fallback">
                            <input name="file" type="file" multiple />
                        </div>
                    </form>
                
            

3. Alternatively you can create dropzones programmatically (even on non form elements) by instantiating the Dropzone class

                
                    // Dropzone class:
                    var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
                
            

                
                    // jQuery
                    $("div#myId").dropzone({ url: "/file/post" });
                
            

Notes

• If you do not want the default message at all (»Drop files to upload (or click)«), you can put an element inside your dropzone element with the class dz-message and dropzone will not create the message for you.
• Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the params option.
• Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it’s an image, as well as file.upload which is an object containing: progress (0-100), total (the total bytes) and bytesSent.
• If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event:

                          
                              myDropzone.on("sending", function(file, xhr, formData) {
                                  // Will send the filesize along with the file as POST data.
                                  formData.append("filesize", file.size);
                              });
                          
                      

• To access the preview html of a file, you can access file.previewElement. For example:

                          
                              myDropzone.on("addedfile", function(file) {
                                  file.previewElement.addEventListener("click", function() {
                                      myDropzone.removeFile(file);
                                  });
                              });
                          
                      

• If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContainer option. The previewsContainer should have the dropzone-previews or dropzone class to properly display the file previews.

                          
                              new Dropzone(document.body, {
                                  previewsContainer: ".dropzone-previews",
                                  // You probably don't want the whole body
                                  // to be clickable to select files
                                  clickable: false
                              });
                          
                      

• Look at the github wiki for more examples.

Refer following links for usage:

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();
                                    
                                    

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');
                
              

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="ex-component-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');
              
            

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');
		});
		
		

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="ex-component-treeview.css" rel="stylesheet">
			  
			

3. Dom Binding

			  
			  <div id="default-treeview"></div>
			  
			

4. Initialization

			  
				$('#default-treeview').treeview({
				selectedBackColor: [colorName],
				data: dataFunctionHere
				});
			  
			

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")]);
			  
			

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");
              })
            
          

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. Dom Binding

		
			<button class="btn btn-primary" id="basic-context-menu">Basic Context Menu>
		
	

2. 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" },
			}
			})
		
	

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".

1. Initialization

		
		$( document ).idleTimer( {
		timeout:10000,
		idle:true
		});
		
	

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

1. Initialization

		
		$(".yourClassHere").text(numeral(1000.234).format("$0,0.000"));