Make Admin Template Documentation

jQuery Sparkline

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

CSS Files (in header)

No CSS file

JavaScript Files (in footer for faster rendering)

<script src="assets/plugins/charts-sparkline/sparkline.min.js"></script>

Demo Page

http://omnipotent.net/jquery.sparkline

Official Documentation

http://omnipotent.net/jquery.sparkline

D3 Charts

Re-usable charts for d3.js. Collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

CSS Files

<link href="assets/plugins/charts-d3/nv.d3.css"  rel="stylesheet">

JavaScript Files

<script src="assets/plugins/charts-d3/d3.v3.js" ></script>
<script src="assets/plugins/charts-d3/nv.d3.js" ></script>

Demo Page

http://nvd3.org/examples/index.html

Official Documentation

http://nvd3.org

Morris Charts

API for drawing line, bar, area and donut charts.

CSS Files

<link href="assets/plugins/charts-morris/morris.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/charts-morris/raphael.min.js" ></script>
<script src="assets/plugins/charts-morris/morris.min.js" ></script>

Demo Page

http://morrisjs.github.io/morris.js

Official Documentation

https://github.com/morrisjs/morris.js

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

CSS Files

<link href="assets/plugins/charts-rickshaw/rickshaw.css"  rel="stylesheet">

JavaScript Files

<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Class.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Compat.ClassList.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Renderer.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Renderer.Area.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Renderer.Line.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Renderer.Bar.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Renderer.ScatterPlot.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Renderer.Stack.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.RangeSlider.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.RangeSlider.Preview.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.HoverDetail.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Annotate.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Legend.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Axis.Time.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Behavior.Series.Order.js" ></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Smoother.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Fixtures.Time.js" ></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Fixtures.Time.Local.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Fixtures.Number.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Fixtures.RandomData.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Fixtures.Color.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Color.Palette.js"></script>
<script src="assets/plugins/charts-rickshaw/src/js/Rickshaw.Graph.Axis.Y.js"></script>
<script src="assets/plugins/charts-rickshaw/examples/js/extensions.js"></script>

Demo Page

http://code.shutterstock.com/rickshaw/examples

Official Documentation

http://code.shutterstock.com/rickshaw/tutorial/introduction.html

HighStock Charts

Create interactive financial charts easily for your web projects.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/charts-highstock/js/highstock.min.js"></script> <!-- financial Charts -->
    <script src="assets/plugins/charts-highstock/js/modules/exporting.min.js"></script> <!-- Financial Charts Export Tool -->

Demo Page

http://www.highcharts.com/stock/demo

Official Documentation

http://api.highcharts.com/highstock

HighStock Charts

Create interactive financial charts easily for your web projects.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/charts-highstock/js/highstock.min.js"></script> <!-- financial Charts -->
    <script src="assets/plugins/charts-highstock/js/modules/exporting.min.js"></script> <!-- Financial Charts Export Tool -->

Demo Page

http://www.highcharts.com/stock/demo

Official Documentation

http://api.highcharts.com/highstock

ChartJS

Simple, clean and engaging charts for designers and developers

CSS Files

No CSS files

JavaScript Files

<script src="assets/plugins/charts-chartjs/Chart.min.js"></script>  <!-- ChartJS Chart -->

Demo Page

http://www.chartjs.org/

Official Documentation

http://www.chartjs.org/docs/

Icheck

Custom checkbox and radio buttons.

CSS Files

NO CSS file

JavaScript Files

<script src="assets/plugins/select2/select2.min.js"></script>

Demo Page

http://fronteed.com/iCheck

Official Documentation

https://github.com/fronteed/iCheck

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

CSS Files

NO CSS file

JavaScript Files

<script src="assets/plugins/select2/select2.min.js"></script>

Demo Page

https://select2.github.io/examples.html

Official Documentation

https://select2.github.io/options.html

Bootstrap Slider

Slider component with different options: vertical or horizontal orientation, minimum and maxim values, step incrementor, range selector.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/bootstrap-slider/bootstrap-slider.min.js"></script>

Demo Page

http://www.eyecon.ro/bootstrap-slider

IOS Switch

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/switchery/switchery.min.js"></script>

Official Documentation

http://abpetkov.github.io/switchery/

Ion Range Slider

A javascript range slider with many options.

CSS Files

<link href="assets/plugins/ion-slider/style.min.css" rel="stylesheet" >

JavaScript Files

<assets/plugins/ion-slider/ion.rangeSlider.min.js"></script>

Demo Page

http://ionden.com/a/plugins/ion.rangeSlider/demo.html

Official Documentation

http://ionden.com/a/plugins/ion.rangeSlider/en.html

Bootstrap Dropdown Hover

Bootstrap dropdown activated on hover.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/bootstrap-dropdown/bootstrap-hover-dropdown.min.js"></script>

Demo Page

http://cameronspear.com/demos/bootstrap-hover-dropdown

Official Documentation

https://github.com/CWSpear/bootstrap-hover-dropdown

Jquery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="assets/plugins/jquery-validation/additional-methods.min.js"></script>

Demo Page

http://jqueryvalidation.org/files/demo/

Official Documentation

http://jqueryvalidation.org/documentation/

Form Wizard

This plugin can generate step navigation for your purpose. You can use it for registration, settings, introduction or presentation of your projects.

CSS Files

<link href="assets/plugins/step-form-wizard/css/step-form-wizard.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/step-form-wizard/plugins/parsley/parsley.min.js"></script> <!-- OPTIONAL, IF YOU NEED VALIDATION -->
<script src="assets/plugins/step-form-wizard/js/step-form-wizard.js"></script> <!-- Step Form Validation -->

Demo Page

http://ajoke.cz/wizard/examples

Official Documentation

http://ajoke.cz/wizard/documentation

Switch Input IOS: Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS.

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/switchery/switchery.min.js"></script>

Official Documentation and demo

http://abpetkov.github.io/switchery/

Bootstrap Context Menu

Add context menu on right click.

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/bootstrap-context-menu/bootstrap-contextmenu.min.js"></script>

Official Documentation and Demo

http://sydcanem.com/bootstrap-contextmenu/

Bootstrap Dropdown menu on hover

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

CSS Files

No CSS File

Official Documentation and Demo

https://github.com/CWSpear/bootstrap-hover-dropdown

Bootstrap Editable

In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery.

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/bootstrap-editable/js/bootstrap-editable.min.js"></script>

Demo Page

http://vitalets.github.io/x-editable/demo-bs3.html

Official Documentation and Demo

http://vitalets.github.io/x-editable/docs.html

Bootstrap Loading Button

Buttons with built-in loading indicators.

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/bootstrap-loading/lada.min.js"></script>

Demo Page

http://lab.hakim.se/ladda/

Official Documentation and Demo

https://github.com/hakimel/Ladda

Bootstrap Progressbar

jQuery plugin for twitter bootstrap's progressbar for displaying text and animations

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>

Demo Page

http://www.minddust.com/project/bootstrap-progressbar/demo/

Official Documentation

http://www.minddust.com/project/bootstrap-progressbar/

Bootstrap Slider

Slider component with different options: vertical / horizontal, range...

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/bootstrap-slider/bootstrap-slider.js"></script>

Official Documentation and demo

http://www.eyecon.ro/bootstrap-slider/

Bootstrap Tags Input

jQuery tags input plugin based on Twitter Bootstrap.

CSS Files

No CSS File

JavaScript Files

<script src="assets/plugins/bootstrap-slider/bootstrap-slider.js"></script>

Official Documentation and demo

http://timschlechter.github.io/bootstrap-tagsinput/examples/

Summernote

Super Simple WYSIWYG Editor on Bootstrap.

CSS Files

<link href="assets/plugins/summernote/summernote.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/summernote/summernote.min.js"></script>

Demo Page

http://hackerwins.github.io/summernote

Official Documentation

https://github.com/HackerWins/summernote

CKE Editor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/cke-editor/ckeditor.js"></script>
<script src="assets/plugins/cke-editor/adapters/adapters.min.js"></script>

Demo Page

http://ckeditor.com/demo

Official Documentation

http://docs.cksource.com/Main_Page

Date & Time Picker

The timepicker addon adds a timepicker to jQuery UI Datepicker.

CSS Files

NO CSS file

JavaScript Files

<script src="assets/plugins/timepicker/jquery-ui-timepicker-addon.min.js"></script>

Official Documentation

http://trentrichardson.com/examples/timepicker/

Magnific Popup

Responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

CSS Files

<link href="assets/plugins/magnific/magnific-popup.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/magnific/jquery.magnific-popup.min.js"></script>

Demo Page

http://dimsemenov.com/plugins/magnific-popup

Official Documentation

http://dimsemenov.com/plugins/magnific-popup/documentation.html

Image Cropper

Powerful image cropping engine for jQuery.

CSS Files

<link href="assets/plugins/cropper/cropper.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/cropper/cropper.min.js"></script>

Demo Page and documentation

http://fengyuanchen.github.io/cropper/

Dropzone JS

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

CSS Files

<link href="assets/plugins/dropzone/dropzone.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/dropzone/dropzone.min.js"></script>

Demo Page

http://www.dropzonejs.com

Official Documentation

https://github.com/enyo/dropzone

Jquery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/jquery-ui/jquery-ui-1.11.2.min.js" ></script>

Demo Page

http://jqueryui.com/demos/

Official Documentation

http://jqueryui.com/

Jquery Jstree

Tree view for jQuery.

CSS Files

<link href="assets/plugins/jstree/src/themes/default/style.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/jstree/jstree.min.js"></script>

Demo Page

http://www.jstree.com/demo

Official Documentation

https://github.com/vakata/jstree

Idle Timeout

Allows you to detect when a user becomes idle and notify the user his/her session is about to expire.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/idle-timeout/jquery.idletimer.min.js"></script>
<script src="assets/plugins/idle-timeout/jquery.idletimeout.min.js"></script>

Demo Page

http://www.erichynds.com/examples/jquery-idle-timeout/example-dialog.htm

Official Documentation

https://github.com/ehynds/jquery-idle-timeout

Backstretch

Allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/backstretch/backstretch.min.js"></script>

Demo Page

http://srobbin.com/jquery-plugins/backstretch

Official Documentation

https://github.com/srobbin/jquery-backstretch

Bootbox Modal

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/bootbox/bootbox.min.js"></script>

Official Documentation

http://bootboxjs.com/

Bootstrap Progressbar

Extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>

Demo Page

http://www.minddust.com/bootstrap-progressbar/bootstrap-3.1.0.html

Official Documentation

https://github.com/minddust/bootstrap-progressbar

jQuery DataTables

Tables plug-in for jQuery.

CSS Files

<link href="assets/plugins/datatables/dataTables.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>

Demo Page

https://datatables.net/examples

Official Documentation

https://datatables.net

Gmaps

Allows you to use the potential of Google Maps in a simple way.

CSS Files

No CSS file

JavaScript Files

<script src="//maps.google.com/maps/api/js?sensor=true"></script> <!-- Google Maps -->
<script src="assets/plugins/google-maps/gmaps.min.js"></script>  <!-- Google Maps Easy -->

Demo Page

http://hpneo.github.io/gmaps/examples.html

Official Documentation

http://hpneo.github.io/gmaps/documentation.html

Fullcalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar.

CSS Files

<link href="assets/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/fullcalendar/moment.min.js"></script>
<script src="assets/plugins/fullcalendar/fullcalendar.min.js"></script>

Demo Page

http://arshaw.com/fullcalendar

Official Documentation

http://arshaw.com/fullcalendar/docs

Mcustom Srollbar

Custom scrollbar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support (via jQuery mousewheel plugin), scrolling buttons, scroll inertia with easing, auto-adjustable scrollbar length, nested scrollbars, scroll-to functionality, user defined callbacks and much more.

CSS Files

<link href="assets/plugins/mcustom-scrollbar/mcustom_scrollbar.min.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/mcustom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

Demo Page

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html

Official Documentation

http://manos.malihu.gr/jquery-custom-content-scroller

Mmenu

A jQuery plugin for creating slick, app look-alike sliding menus for you mobile website.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/mmenu/js/jquery.mmenu.min.all.js"></script>

Demo Page

http://mmenu.frebsite.nl

Official Documentation

http://mmenu.frebsite.nl/tutorial.php

Metro JS

Flipping and sliding live tiles.

CSS Files

<link href="assets/plugins/metrojs/metroJs.css" rel="stylesheet">

JavaScript Files

<script src="assets/plugins/metrojs/metroJs.min.js"></script>

Demo Page

http://www.drewgreenwell.com/projects/metrojs

Official Documentation

http://www.drewgreenwell.com/projects/metrojs

Noty

NOTY is a jQuery plugin that makes it easy to create alert / success / error / warning / information messages as an alternative the standard alert dialog.

CSS Files

NO CSS file

JavaScript Files

<script src="assets/plugins/noty/jquery.noty.packaged.min.js"></script>

Demo Page and Documentation

http://ned.im/noty/

Countup

A jQuery plugin that permit to quickly create animations that display numerical data in a more interesting way.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/countup/countUp.min.js"></script>

Official Documentation & Demo

http://inorganik.github.io/countUp.js/

Count Down

A simple and html agnostic date countdown plugin for jQuery.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/countdown/jquery.countdown.min.js"></script>;

Official Documentation & Demo

http://hilios.github.io/jQuery.countdown/

Slick Slider

Slider fully responsive. Scales with its container.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/slick/slick.min.js"></script>

Official Documentation & Demo

http://kenwheeler.github.io/slick/

Quick Search

A jQuery based plug-in for filtering large data sets with user input.

CSS Files

No CSS file

JavaScript Files

<script src="assets/plugins/quicksearch/quicksearch.min.js"></script>

Demo Page

http://deuxhuithuit.github.io/quicksearch/r/examples

Official Documentation

https://github.com/DeuxHuitHuit/quicksearch

Javascript Plugins

Select Plugin:

jQuery Sparkline

CSS Files (in header)

JavaScript Files (in footer for faster rendering)

Demo Page

Official Documentation

D3 Charts

CSS Files

JavaScript Files

Demo Page

Official Documentation

Morris Charts

CSS Files

JavaScript Files

Demo Page

Official Documentation

Rickshaw

CSS Files

JavaScript Files

Demo Page

Official Documentation

HighStock Charts

CSS Files

JavaScript Files

Demo Page

Official Documentation

HighStock Charts

CSS Files

JavaScript Files

Demo Page

Official Documentation

ChartJS

CSS Files

JavaScript Files

Demo Page

Official Documentation

Icheck

CSS Files

JavaScript Files

Demo Page

Official Documentation

Select2

CSS Files

JavaScript Files

Demo Page

Official Documentation

Bootstrap Slider

CSS Files

JavaScript Files

Demo Page

IOS Switch

CSS Files

JavaScript Files

Official Documentation

Ion Range Slider

CSS Files

JavaScript Files

Demo Page

Official Documentation

Bootstrap Dropdown Hover

CSS Files

JavaScript Files

Demo Page

Official Documentation

Jquery Validation

CSS Files

JavaScript Files

Demo Page

Official Documentation

Form Wizard

CSS Files

JavaScript Files

Demo Page

Official Documentation

Switch Input IOS: Switchery

CSS Files

JavaScript Files

Official Documentation and demo

Bootstrap Context Menu