A Beautiful, Responsive, Customizable, Accessible (Wai-Aria) Replacement For Javascript'S Popup Boxes.
1. Required Vendor files:
<script src="sweetalert2.all.min.js"></script>
<script src="polyfill.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert2.min.css">
<link rel="stylesheet" type="text/css" href="animate.css">
2. Initialization:
$('#basic-alert').on('click', function () {
Swal.fire({
title: 'Any fool can use a computer',
confirmButtonClass: 'btn btn-primary',
buttonsStyling: false,
})
});
Refer following links for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | https://sweetalert2.github.io/ |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-sweet-alerts.html |
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
});
Type | URL |
---|---|
Plugin Link | https://github.com/jonmiles/bootstrap-treeview |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-tree-views.html |
toastr is a Javascript library for Gnome / Growl type non-blocking notifications.
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:
Type | URL |
---|---|
Plugin Link | https://github.com/CodeSeven/toastr |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-toastr.html |
jQuery Raty - A Star Rating Plugin
Usage with Image
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.raty.js"></script>
2. The component will bind to any existing DOM element.
<div id="star-rating"></div>
3. Basic usage may look something like this.
$('#star-rating').raty();
Usage with Font
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.raty.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.raty.css">
2. The component will bind to any existing DOM element.
<div id="star-rating"></div>
3. Basic usage may look something like this.
$('#star-rating').raty({ starType: 'i' });
Refer following links for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | https://github.com/wbotelhos/raty |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-ratings.html |
noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
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:
Type | URL |
---|---|
Plugin Link | https://refreshless.com/nouislider/ |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-noui-slider.html |
datedropper is a jQuery plugin developed down to the very last detail to offer you a responsive datepicker with fantastic ease of use and a marvelous design.
1. Required Template Specific Vendor Js files
<script src="datedropper.min.js"></script>
<script src="timedropper.min.js"></script>
2. Required Template Specific Vendor css files
<link rel="stylesheet" type="text/css" href="datedropper.min.css">
<link rel="stylesheet" type="text/css" href="timedropper.min.css">
3. Required Template Specific Js Files
<script src="date-time-dropper.js"></script>
Refer following link for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | https://felicegattuso.com/datedropper/ |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/app-kanban.html |
Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
1. Required Template Specific Vendor Js files
<script src="list.fuzzysearch.min.js"></script>
<script src="list.pagination.min.js"></script>
<script src="list.min.js"></script>
3. Required Template Specific Js Files
<script src="list.js"></script>
Refer following link for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/app-kanban.html |
Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable and provides flexibility around the toolbars display and number of icons.
1. Required Template Specific Vendor Js files
<script src="jquery.toolbar.min.js"></script>
2. Required Template Specific Vendor css files
<link rel="stylesheet" type="text/css" href="jquery.toolbar.css">
3. Required Template Specific Js Files
<script src="toolbar.js"></script>
Refer following link for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | https://paulkinzett.github.io/toolbar/ |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-toolbar.html |
Nice, downward compatible, touchable, jQuery dial.
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:
Type | URL |
---|---|
Plugin Link | http://anthonyterrien.com/knob/ |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-knob.html |
Longpress is a jQuery plugin that makes it easy to support long press events on mobile devices and desktop borwsers.
1. Required Template Specific Vendor Js files
<script src="jquery.mousewheel.js"></script>
<script src="jquery.longpress.js"></script>
<script src="plugins.js"></script>
2. Required Template Specific Vendor css files
<link rel="stylesheet" type="text/css" href="long-press.css">
3. Required Template Specific Js Files
<script src="long-press.js"></script>
4. Initialization
$(document).ready(function () {
$('.long-press').first().longPress();
});
Refer following link for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-long-press.html |
Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail. It captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration.
1. Required Template Specific Vendor Js files
<script src="offline.min.js"></script>
2. Required Template Specific Vendor css files
<link rel="stylesheet" type="text/css" href="offline-theme-slide.css">
<link rel="stylesheet" type="text/css" href="offline-language-english.css">
3. Required Template Specific Js Files
<script src="offline.js"></script>
Refer following link for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-offline.html |
A simple jQuery plugin for image zooming.
1. Required Template Specific Vendor Js files
<script src="transition.js"></script>
<script src="zoom.min.js"></script>
2. Required Template Specific Vendor css files
<link rel="stylesheet" type="text/css" href="zoom.css">
Refer following link for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-zoom.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-media-player.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-tour.html |
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');
Type | URL |
---|---|
Plugin Link | https://idangero.us/swiper/ |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-swiper.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/miscellaneous.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/miscellaneous.html |
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. 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
});
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/miscellaneous.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ext-component-block-ui.html |
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:
Type | URL |
---|---|
Plugin Link | https://fengyuanchen.github.io/cropper |
Github Page | https://github.com/fengyuanchen/cropper |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/add-on-image-cropper.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/add-on-drag-drop.html |
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 accessfile.width
andfile.height
if it’s an image, as well asfile.upload
which is an object containing:progress
(0-100),total
(the total bytes) andbytesSent
. - 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. ThepreviewsContainer
should have thedropzone-previews
ordropzone
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:
Type | URL |
---|---|
Plugin Link | http://www.dropzonejs.com/ |
Github Page | https://github.com/enyo/dropzone |
Template Page | https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/ex-component-file-uploader-dropzone.html |
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://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/i18n-xhr-backend.html |