A beautiful replacement for javascript's "alert". SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable.
1. Initialize the plugin by referencing the necessary files:
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
2. Call the sweetAlert-function after the page has loaded
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://t4t5.github.io/sweetalert/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-sweet-alerts.html |
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.
1. Initialize the plugin by referencing the necessary files:
<script src="bootstrap-treeview.js"></script>
2. The component will bind to any existing DOM element.
<div id="tree"></div>
3. Basic usage may look something like this.
function getTree() {
// Some logic to retrieve, or generate tree structure
return data;
}
$('#tree').treeview({data: getTree()});
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/jonmiles/bootstrap-treeview |
| Template Page | http://demo.pixinvent.com/robust-admin/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 | http://demo.pixinvent.com/robust-admin/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 | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-ratings.html |
Context menu plugin for Twitter's Bootstrap framework
Using Data Attributes
1. Initialize the plugin by referencing the necessary files:
<script src="bootstrap-contextmenu.js"></script>
2. Add data-toggle="context" to any element that needs a custom context menu and via CSS set position: relative to the element. Point data-target attribute to your custom context menu.
<div class="context" data-toggle="context" data-target="#context-menu">
...
</div>
<div id="context-menu">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1" href="#">Action</a></li>
...
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Using Javascript
1. Initialize the plugin by referencing the necessary files:
<script src="bootstrap-contextmenu.js"></script>
2. Call the context menu via JavaScript:
$('.context').contextmenu({
target:'#context-menu',
before: function(e,context) {
// execute code before context menu if shown
},
onItem: function(context,e) {
// execute on menu item selection
}
})
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/sydcanem/bootstrap-contextmenu |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-context-menu.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 | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-noui-slider.html |
The smallest and most powerful jQuery UI date & time pickers.
Datedropper
1. Initialize the plugin by referencing the necessary files:
<script src="datedropper.js"></script>
<link rel="stylesheet" type="text/css" href="datedropper.css">
2. Bind component to DOM element.
<input type="text" id="datedropper" />
3. Basic usage may look something like this.
$('#datedropper').dateDropper();
Timedropper
1. Initialize the plugin by referencing the necessary files:
<script src="timedropper.js"></script>
<link rel="stylesheet" type="text/css" href="timedropper.css">
2. Bind component to DOM element.
<input type="text" id="alarm" />
3. Basic usage may look something like this.
$( "#alarm" ).timeDropper();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Datedropper Plugin Link | http://felicegattuso.com/projects/datedropper/ |
| Timedropper Plugin Link | http://felicegattuso.com/projects/timedropper/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-date-time-dropper.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. Initialize the plugin by referencing the necessary files:
<script src="list.js"></script>
2. The component will bind to existing DOM element.
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort
</button>
<ul class="list">
<li>
<h3 class="name">Jonny Stromberg</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Jonas Arnklint</h3>
<p class="born">1985</p>
</li>
<li>
<h3 class="name">Martina Elm</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Gustaf Lindqvist</h3>
<p class="born">1983</p>
</li>
</ul>
</div>
3. Basic usage may look something like this.
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://listjs.com/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-lists.html |
Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using icons and provides flexibility around the toolbars display and number of icons.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.toolbar.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.toolbar.css">
2. Define your toolbar HTML anywhere on the page. This is where you define the icons you want to appear in your toolbar. Remember to add the hidden class so the toolbar doesn't appear on the page..
<div id="toolbar-options" class="hidden">
<a href="#"><i class="icon-plane"></i></a>
<a href="#"><i class="icon-car"></i></a>
<a href="#"><i class="icon-bicycle"></i></a>
</div>
3. Basic usage may look something like this.
var options = {
content: '#toolbar-options',
position: 'bottom'
};
$('#element').toolbar( options );
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://paulkinzett.github.io/toolbar/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-toolbar.html |
Unslider is an ultra-simple jQuery slider for your website.
1. Initialize the plugin by referencing the necessary files:
<script src="unslider.js"></script>
2. The component will bind to existing DOM element.
<div class="banner">
<ul><li>This is my slider.</li><li>Pretty cool, huh?</li></ul>
</div>
3. Basic usage may look something like this.
$(function() { $('.banner').unslider() });
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://unslider.com/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-unslider.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 | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-knob.html |
jQuery plugin to ease the writing of accented or rare characters.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.longpress.js"></script>
<link rel="stylesheet" type="text/css" href="long-press.css">
2. Binding component to DOM element.
$('.long-press').first().longPress();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/CodeSeven/toastr |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-toastr.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 n umber of beautiful themes and requires no configuration.
1. Pick a theme, language and initialize the plugin by referencing the necessary files:
<script src="offline.min.js"></script>
<link rel="stylesheet" type="text/css" href="offline/themes/offline-theme-slide.css">
<link rel="stylesheet" type="text/css" href="offline/themes/offline-language-english.css">
2. Properties.
// Check the current status of the connection.
Offline.check()
// The current state of the connection 'up' or 'down'
Offline.state
// Bind an event.
Offline.on(event, handler, context)
// Unbind an event
Offline.off(event, handler)
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://github.hubspot.com/offline/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-offline.html |
It's the best way to zoom an image. It transitions/zooms in really smoothly, and then when you're done, scrolls away, [esc] keys away, clicks away… clean af.
If you hold your meta key (⌘ on mac) or (ctrl on windows), it will open in a new tab. wow.
ps. use a data-original attr to link to a separate image. Just for meta-clicking tho.
1. Initialize the plugin by referencing the necessary files:
<script src="zoom.js"></script>
<link rel="stylesheet" type="text/css" href="zoom.css">
2. zoom.js is dependent on transition.js file from Bootstrap, so make sure to include that as well.
<script src="transition.js"></script>
3.Add a data-action="zoom" attribute to the images you want to make zoomable. For example:
<img src="img/blog_post_featured.png" data-action="zoom">
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/fat/zoom.js |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/ex-component-zoom.html |