Plugins

Description of all plugins inlcuded in Supr theme, all plugins are included in /plugins folder grouped semantically

Supr plugin

This is custom plugin who control the whole template logic and some ui functions

Plugin is located in js/jquery.supr.js directory. Plugin is included in every page do not remove :)

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

Usage

Call the plugin in your main.js like this

//------------- Init our plugin -------------//
$('body').supr({
    customScroll: {
        color: '#c4c4c4', //color of custom scroll
        rscolor: '#95A5A6', //color of right sidebar
        size: '5px', //size in pixels
        opacity: '1', //opacity
        alwaysVisible: false //disable hide in
    },
    header: {
        fixed: true, //fixed header
        shrink: true //shrink header on scroll ( only when fixed is true.)
    },
    breadcrumbs: {
        auto: true, //auto populate breadcrumbs via js if is false you need to provide own markup see for example.
        homeicon: 's16 icomoon-icon-screen-2', //home icon 
        dividerIcon: 's16 icomoon-icon-arrow-right-3' //divider icon
    },
    sidebar: {
        fixed: true,//fixed sidebar
        rememberToggle: true, //remember if sidebar is hided
        offCanvas: false //make sidebar offcanvas in tablet and small screens
    },
    rightSidebar: {
        fixed: true,//fixed sidebar
        rememberToggle: true//remember if sidebar is hided
    },
    sideNav : {
        toggleMode: true, //close previous open submenu before expand new
        showArrows: true,//show arrow to indicate sub
        sideNavArrowIcon: 'icomoon-icon-arrow-down-2 s16', //arrow icon for navigation
        subOpenSpeed: 200,//animation speed for open subs
        subCloseSpeed: 300,//animation speed for close subs
        animationEasing: 'linear',//animation easing
        absoluteUrl: false, //put true if use absolute path links. example http://www.host.com/dashboard instead of /dashboard
        subDir: '' //if you put template in sub dir you need to fill here. example '/html'
    },
    panels: {
        refreshIcon: 'brocco-icon-refresh s12',//refresh icon for panels
        toggleIcon: 'icomoon-icon-plus',//toggle icon for panels
        collapseIcon: 'icomoon-icon-minus',//colapse icon for panels
        closeIcon: 'icomoon-icon-close', //close icon
        showControlsOnHover: false,//Show controls only on hover.
        loadingEffect: 'rotateplane',//loading effect for panels. bounce, none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear, ios, facebook, rotation, pulse.
        loaderColor: '#616469',
        rememberSortablePosition: true //remember panel position
    },
    accordion: {
        toggleIcon: 'icomoon-icon-minus s12',//toggle icon for accrodion
        collapseIcon: 'icomoon-icon-plus s12'//collapse icon for accrodion
    },
    tables: {
        responsive: true, //make tables resposnive
        customscroll: true //ativate custom scroll for responsive tables
    },
    alerts: {
        animation: true, //animation effect toggle
        closeEffect: 'bounceOutDown' //close effect for alerts see http://daneden.github.io/animate.css/
    },
    dropdownMenu: {
        animation: true, //animation effect for dropdown
        openEffect: 'fadeIn',//open effect for menu see http://daneden.github.io/animate.css/
    },
    backToTop: true //back to top
});

Options

All options are commented so change it if you like

Access some object or public function for template

Lets say you want to hide left sidebar you need to call this code

//hide leftsidebar
$('body').data('supr').hideLeftSidebar();

Methods

Here is the full list of public methods

.getBreakPoint()

Get the current breakpoint ( aviable values are - large, laptop, tablet, phone )

$('body').data('supr').getBreakPoint();

.fixedHeader(val)

Make header fixed or not, use true or false

//make header fixed
$('body').data('supr').fixedHeader(true);

.fixedSidebar(val)

Make sidebar fixed or not, use true or false

//make sidebar fixed
$('body').data('supr').fixedSidebar(true);

.removeFixedSidebar(val)

Remove fixed sidebar, use left or right

//remove fixed sidebar
$('body').data('supr').removeFixedSidebar('left');

.hideLeftSidebar()

Hide left sidebar

$('body').data('supr').hideLeftSidebar();

.showLeftSidebar()

Show left sidebar

$('body').data('supr').showLeftSidebar();

.hideRightSidebar()

Hide right sidebar

$('body').data('supr').hideRightSidebar();

.showRightSidebar()

Show right sidebar

$('body').data('supr').showRightSidebar();

If you want some method dont hesitate to contact us

Core plugins

This section contain list of core plugins in order template to work do not remove it in your page.

Bootstrap plugin

Bootstrap plugin include some core function not only in sprflat admin but in bootstrap system as well

Plugin is located in js/bootstrap/bootstrap.js directory. Plugin is included in every page do not remove :)

<!-- Bootstrap plugins -->
<script src="js/bootstrap/bootstrap.js"></script>    

Official documentation

Here is the official documentation for plugin - http://getbootstrap.com/javascript/

jRespond

jRespond is a simple way to globally manage JavaScript on responsive websites.

Plugin is located in js/jRespond.min.js Plugin is included in every page do not remove ever.

<!-- Core plugins ( not remove ever) -->
<script src="js/jRespond.min.js"></script>

Plugin init is used in jquery.SprFlat plugin so you not need to make anything in order to work.

Official documentation

Here is the official documentation for plugin - https://github.com/ten1seven/jRespond

Pace loader

Get a beautiful progress indicator for your page load and ajax navigation.

Plugin is located in plugins/core/pace/pace.min.js Plugin is included in every page do not remove ever.

<!-- Load pace first -->
<script src="plugins/core/pace/pace.min.js"></script>

Plugin is init after you include it to page

If you use less just import the pace styling or modify it :)

@import "plugins/pace.less";

If not use less styling for plugin is located in css/plugins.css file

Official documentation

Here is the official documentation for plugin - http://github.hubspot.com/pace/docs/welcome/

Slimscroll

Slimscroll is plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

Plugin is located in plugins/core/slimscroll/ Plugin is included in every page do not remove ever.

<!-- Custom scroll for sidebars -->
<script src="plugins/core/slimscroll/jquery.slimscroll.min.js"></script>
<script src="plugins/core/slimscroll/jquery.slimscroll.horizontal.min.js"></script>

Plugin is used for all custom scrollbars in template ( sidebars, tables etc )

Official documentation

Here is the official documentation for plugin - http://rocha.la/jQuery-slimScroll

QuickSearch

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

Plugin is located in plugins/core/quicksearch/ Plugin is included in every page do not remove ever.

<!-- Quick search plugin (fast search for many widgets) -->
<script src="plugins/core/quicksearch/jquery.quicksearch.js"></script>

Plugin is used for all custom searches in template

Official documentation

Here is the official documentation for plugin - https://github.com/riklomas/quicksearch

Velocity

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Plugin is located in plugins/core/velocity/ Plugin is included in every page do not remove ever.

<!-- Increase jquery animation speed -->
<script src="plugins/core/velocity/jquery.velocity.min.js"></script>

Plugin is used to speed all animations in template

Official documentation

Here is the official documentation for plugin - http://julian.com/research/velocity/

Fast click

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

Plugin is located in plugins/core/fastclick/ Plugin is included in every page do not remove ever.

<!-- Remove click delay in touch -->
<script src="plugins/core/fastclick/fastclick.js"></script>

Official documentation

Here is the official documentation for plugin - https://github.com/ftlabs/fastclick

Flot charts

Flot chart is the main chart plugin for template

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

Plugin is located in plugins/charts/flot/ directory. Include plugin in page like this

<script src="plugins/charts/flot/jquery.flot.js"></script>
<script src="plugins/charts/flot/jquery.flot.pie.js"></script>
<script src="plugins/charts/flot/jquery.flot.resize.js"></script>
<script src="plugins/charts/flot/jquery.flot.time.js"></script>
<script src="plugins/charts/flot/jquery.flot.growraf.js"></script>
<script src="plugins/charts/flot/jquery.flot.categories.js"></script>
<script src="plugins/charts/flot/jquery.flot.stack.js"></script>
<script src="plugins/charts/flot/jquery.flot.orderBars.js"></script>
<script src="plugins/charts/flot/jquery.flot.tooltip.min.js"></script>
<script src="plugins/charts/flot/date.js"></script>

Init plugin with custom options see charts-flot.js for example

Official documentation

Here is the official documentation for plugin - https://github.com/flot/flot/blob/master/API.md

Chartjs charts

Chartjs is pure plotting library

Simple, clean and engaging charts for designers and developers

Plugin is located in plugins/charts/chartjs/ directory. Include plugin in page like this

<script src="plugins/charts/chartjs/Chart.js"></script>

Init plugin with custom options see chartjs-charts.js for example

Official documentation

Here is the official documentation for plugin - http://www.chartjs.org/docs/

Morris charts

Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It's a very simple API for drawing line, bar, area and donut charts.

Plugin is located in plugins/charts/morris/ directory. Include plugin in page like this

<script src="plugins/charts/morris/morris.js"></script>

Init plugin with custom options see morris-charts.js for example

Official documentation

Here is the official documentation for plugin - http://morrisjs.github.io/morris.js/

Easy pie charts

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.

Plugin is located in plugins/charts/pie-charts/ directory. Include plugin in page like this

<script src="plugins/charts/pie-chart/jquery.easy-pie-chart.js"></script>

Init plugin with custom options see charts-other.js for example

Official documentation

Here is the official documentation for plugin - http://rendro.github.io/easy-pie-chart/

Sparklines

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

Plugin is located in plugins/charts/sparklines/ directory. Include plugin in page like this

<script src="plugins/charts/sparklines/jquery.sparkline.js"></script>

Init plugin with custom options see charts-other.js for example

Official documentation

Here is the official documentation for plugin - http://omnipotent.net/jquery.sparkline/#s-docs

Gauge

100% native and cool looking animated JavaScript

Plugin is located in plugins/charts/gauge/ directory. Include plugin in page like this

<script src="plugins/charts/gauge/gauge.js"></script>

Init plugin with custom options see charts-other.js for example

Official documentation

Here is the official documentation for plugin - http://bernii.github.io/gauge.js/

Progressbar chart

Beautiful and responsive progress bars with animated SVG paths.

Plugin is located in plugins/charts/progressbars/ directory. Include plugin in page like this

<script src="plugins/charts/progressbars/progressbar.js"></script>

Init plugin with custom options see dashboard.js for example

Official documentation

Here is the official documentation for plugin - http://kimmobrunfeldt.github.io/progressbar.js/

Autosize text area

A plugin to automatically adjust textarea height.

Plugin is located in plugins/forms/autosize/ directory. Include plugin in page like this

<script src="plugins/forms/autosize/jquery.autosize.js"></script>

Init plugin like this

//------------- Autosize Text area -------------//
$('.elastic').autosize({append: "\n"});

Official documentation

Here is the official documentation for plugin - http://www.jacklmoore.com/autosize/

Bootstrap filestyle

The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms. This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.

Plugin is located in plugins/forms/bootstrap-filestyle/

Include plugin via js like this:

<script src="plugins/forms/bootstrap-filestyle/bootstrap-filestyle.js"></script>

And init plugin for desired input field

//------------- File input styling -------------//
$(":file").filestyle({
    buttonText: "Select file",
    classButton: "btn btn-primary",
    classInput: "form-control file-upload",
    classIcon: "fa-plus-sign"
});

Official documentation

Here is the official documentation for plugin - http://markusslima.github.io/bootstrap-filestyle/#Methods

Bootstrap color picker

Colorpicker plugin for the Twitter Bootstrap toolkit.

Plugin is located in plugins/forms/color-picker/

Include plugin via js like this:

<script src="plugins/forms/color-picker/bootstrap-colorpicker.js"></script>

And init plugin with multiple options

//------------- Colorpicker -------------//
$('#default-colorpicker').colorpicker();
//as component
$('#component-colorpicker').colorpicker({
    color: '#1fba5d'
});
//horizontal
$('#horizontal-colorpicker').colorpicker({
    horizontal: true
});
//inline
 $('#inline-colorpicker').colorpicker({
    inline: true,
    container: '.inline-picker'
});

Official documentation

Here is the official documentation for plugin - http://mjolnic.github.io/bootstrap-colorpicker/

Datepicker picker

Date picker component for Bootstrap

Plugin is located in plugins/forms/bootstrap-datepicker/

Include plugin via js like this:

<script src="plugins/forms/bootstrap-datepicker/bootstrap-datepicker.js"></script>

And init plugin with multiple options

//------------- Datepicker -------------//
$("#basic-datepicker").datepicker();
//multiple date
$("#multiple-datepicker").datepicker({
    multidate: true
});
//date range
$(".input-daterange").datepicker();
//inline
$("#inline-datepicker").datepicker();

Official documentation

Here is the official documentation for plugin - https://github.com/eternicode/bootstrap-datepicker

Time picker

Time picker for bootstrap.

Plugin is located in plugins/forms/bootstrap-timepicker/

Include plugin via js like this:

<script src="plugins/forms/bootstrap-timepicker/bootstrap-timepicker.js"></script>

And init plugin with multiple options

//------------- Timepicker -------------//
$('#default-timepicker').timepicker({
    upArrowStyle: 'fa fa-angle-up',
    downArrowStyle: 'fa fa-angle-down',
});
//custom time
$('#customtime-timepicker').timepicker({
    upArrowStyle: 'fa fa-angle-up',
    downArrowStyle: 'fa fa-angle-down',
    defaultTime: '22:45 AM'
});
//custom minute step
$('#minute-step-timepicker').timepicker({
    upArrowStyle: 'fa fa-angle-up',
    downArrowStyle: 'fa fa-angle-down',
    minuteStep: 30
});
//show seconds
$('#show-seconds-timepicker').timepicker({
    upArrowStyle: 'fa fa-angle-up',
    downArrowStyle: 'fa fa-angle-down',
    showSeconds: true
});

Official documentation

Here is the official documentation for plugin - https://github.com/jdewit/bootstrap-timepicker

Dual list box

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. Works on all modern browsers and on touch devices.

Plugin is located in /plugins/forms/dual-list-box/

Include plugin via js like this:

<script src="/plugins/forms/dual-list-box/jquery.bootstrap-duallistbox.js"></script>

And init plugin with multiple options

//------------- Dual list box -------------//
$('.duallistbox').bootstrapDualListbox({
    nonselectedlistlabel: 'Non-selected',
    selectedlistlabel: 'Selected',
    preserveselectiononmove: 'moved',
    moveonselect: false,
    iconMove: 'en-arrow-right8 s16',
    iconMoveAll: 'fa-double-angle-right s16',
    iconRemove: 'en-arrow-left8 s16',
    iconRemoveAll: 'fa-double-angle-left s16'
});

Official documentation

Here is the official documentation for plugin - https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

Masked input

It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

Plugin is located in plugins/forms/maskedinput/

Include plugin via js like this:

<script src="plugins/forms/maskedinput/jquery.maskedinput.js"></script>

And init plugin with multiple options

//------------- Masked input fields -------------//
$("#mask-phone").mask("(999) 999-9999", {completed:function(){alert("Callback action after complete");}});
$("#mask-phoneExt").mask("(999) 999-9999? x99999");
$("#mask-phoneInt").mask("+40 999 999 999");
$("#mask-date").mask("99/99/9999");
$("#mask-ssn").mask("999-99-9999");
$("#mask-productKey").mask("a*-999-a999", { placeholder: "*" });
$("#mask-eyeScript").mask("~9.99 ~9.99 999");
$("#mask-percent").mask("99%");

Official documentation

Here is the official documentation for plugin - http://digitalbush.com/projects/masked-input-plugin/

Maxlength

This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Plugin is located in plugins/forms/maxlength/

Include plugin via js like this:

<script src="plugins/forms/maxlength/bootstrap-maxlength.js"></script>

And init plugin with multiple options

//------------- Max Lenght input filed -------------//
$('.limitInput').maxlength({
    alwaysShow: true,
    threshold: 10,
    warningClass: "label label-success",
    limitReachedClass: "label label-danger",
    validate: true
});
//------------- Max Lenght Textarea -------------//
$('.limitTextarea').maxlength({
    alwaysShow: true,
    threshold: 10,
    warningClass: "label label-success",
    limitReachedClass: "label label-danger",
    separator: ' of ',
    preText: 'You have ',
    postText: ' chars remaining.',
    validate: true
});

Official documentation

Here is the official documentation for plugin - https://github.com/mimo84/bootstrap-maxlength

Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Plugin is located in /plugins/forms/select2/

Include plugin via js like this:

<script src="/plugins/forms/select2/select2.js"></script>

And init plugin with multiple options

//------------- Select 2 -------------//
$('.select2').select2({placeholder: 'Select state'});

Official documentation

Here is the official documentation for plugin - http://ivaynberg.github.io/select2/

Tags

jQuery plugin providing a Twitter Bootstrap user interface for managing tags

Plugin is located in plugins/forms/bootstrap-tagsinput/

Include plugin via js like this:

<script src="plugins/forms/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>

And init plugin with multiple options

//------------- Tags -------------//
//from json
var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: 'ajax/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; });
    }
  }
});
citynames.initialize();

$('#json-tags').tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    }
});

Official documentation

Here is the official documentation for plugin - http://timschlechter.github.io/bootstrap-tagsinput/examples/

Summernote

Super simple WYSIWYG Editor using Bootstrap

Plugin is located in /plugins/forms/summernote/

Include plugin via js like this:

<script src="/plugins/forms/summernote/summernote.js"></script>

And init plugin

//------------- WYSIWYG summernote -------------//
$('#summernote').summernote({
    height: 200
});

Official documentation

Here is the official documentation for plugin - https://github.com/summernote/summernote

Form validation

his jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization

Plugin is located in /plugins/forms/validation/

Include plugin via js like this:

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

And init plugin with multiple options

//------------- Form validation -------------//
$("#validate").validate({
    ignore: null,
    ignore: 'input[type="hidden"]',
    errorPlacement: function( error, element ) {
        var place = element.closest('.input-group');
        if (!place.get(0)) {
            place = element;
        }
        if (place.get(0).type === 'checkbox') {
            place = element.parent();
        }
        if (error.text() !== '') {
            place.after(error);
        }
    },
    errorClass: 'help-block',
    rules: {
        email: {
            required: true,
            email: true
        },
        select2: "required",
        password: {
            required: true,
            minlength: 5
        },
        textarea: {
            required: true,
            minlength: 10
        },
        maxLenght: {
            required: true,
              maxlength: 10
        },
        rangelenght: {
          required: true,
          rangelength: [10, 20]
        },
        url: {
          required: true,
          url: true
        },
        range: {
          required: true,
          range: [5, 10]
        },
        minval: {
          required: true,
          min: 13
        },
        maxval: {
          required: true,
          max: 13
        },
        date: {
          required: true,
          date: true
        },
        number: {
          required: true,
          number: true
        },
        digits: {
          required: true,
          digits: true
        },
        ccard: {
          required: true,
          creditcard: true
        },
        agree: "required"
    },
    messages: {
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        agree: "Please accept our policy",
        textarea: "Write some info for you",
        select2: "Please select something"
    },
    highlight: function( label ) {
        $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function( label ) {
        $(label).closest('.form-group').removeClass('has-error');
        label.remove();
    }
});

Official documentation

Here is the official documentation for plugin - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Form Wizard

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

Plugin is located in plugins/forms/bootstrap-wizard/

Include plugin via js like this:

<script src="plugins/forms/bootstrap-wizard/jquery.bootstrap.wizard.js"></script>

And init plugin with multiple options

//------------- Form wizard -------------//

//add validation to wizard
var $validator = $("#wizard form").validate({
    errorPlacement: function( error, element ) {
        var place = element.closest('.input-group');
        if (!place.get(0)) {
            place = element;
        }
        if (place.get(0).type === 'checkbox') {
            place = element.parent();
        }
        if (error.text() !== '') {
            place.after(error);
        }
    },
    errorClass: 'help-block',
    rules: {
        firstname: {
             required: true
         },
         email: {
             required: true,
             email: true
         },
         username: {
             required: true
         },
         password: {
             required: true,
             minlength: 5
         },
         password_2: {
             required: true,
            minlength: 5,
            equalTo: "#password"
         }
     },
     messages: {
         firstname: {
             required: "I need to know your first name Sir"
         },
         email: {
             required: "You email is required Sir"
         }
     },
     highlight: function( label ) {
        $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function( label ) {
        $(label).closest('.form-group').removeClass('has-error');
        label.remove();
    }
});

//init first wizard
$('#wizard').bootstrapWizard({
    tabClass: 'bwizard-steps',
    nextSelector: 'ul.pager li.next',
    previousSelector: 'ul.pager li.previous',
    firstSelector: null,
    lastSelector: null,
    onNext: function( tab, navigation, index, newindex ) {
        var validated = $('#wizard form').valid();
        if( !validated ) {
            $validator.focusInvalid();
            return false;
        }
    },
    onTabClick: function( tab, navigation, index, newindex ) {
        if ( newindex == index + 1 ) {
            return this.onNext( tab, navigation, index, newindex);
        } else if ( newindex > index + 1 ) {
            return false;
        } else {
            return true;
        }
    },
    onTabShow: function( tab, navigation, index ) {
        tab.prevAll().addClass('completed');
        tab.nextAll().removeClass('completed');
        var $total = navigation.find('li').length;
        var $current = index+1;
        // If it's the last tab then hide the last button and show the finish instead
        if($current >= $total) {
            $('#wizard').find('.pager .next').hide();
            $('#wizard').find('.pager .finish').show();
            $('#wizard').find('.pager .finish').removeClass('disabled');
        } else {
            $('#wizard').find('.pager .next').show();
            $('#wizard').find('.pager .finish').hide();
        }
    }
});

//wizard is finish
$('#wizard .finish').click(function() {
    //show message
});

Official documentation

Here is the official documentation for plugin - https://github.com/VinceG/twitter-bootstrap-wizard

Spinner

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Plugin is located in /plugins/forms/spinner/

Include plugin via js like this:

<script src="/plugins/forms/spinner/jquery.bootstrap-touchspin.js"></script>

And init plugin

//------------- Spinners -------------//
$("#basic-spinner").TouchSpin({
    min: 0,
    max: 100
});
//with postfix
$("#postfix-spinner").TouchSpin({
    min: 0,
    max: 100,
    postfix: '%'
});
//with prefix
$("#prefix-spinner").TouchSpin({
    min: 0,
    max: 100,
    prefix: '
    </div>
    <div class="col-md-3">
      <div class="bs-docs-sidebar hidden-print" role="complementary">
        <ul class="nav bs-docs-sidenav">


          <!--  -->
  • Plugins
  • Supr plugin
  • Core plugins
  • Chart plugins
  • Form plugins
  • Misc plugins
  • Datatables
  • UI plugins
  •         </ul>
            <a class="back-to-top" href="#top">
              Back to top
            </a>
          </div>
        </div>
      </div>
    
    </div>
    
    <footer class="bs-docs-footer" role="contentinfo">
      <div class="container">
    
      </div>
    </footer>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/plugins/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="assets/js/app.js"></script>

    }); //decimal spinner $("#decimal-spinner").TouchSpin({ min: 1, max: 10, step: 0.1, decimals: 2 }); //vertical buttons $("#vertical-spinner").TouchSpin({ verticalbuttons: true, verticalupclass: 'fa fa-angle-up s12', verticaldownclass: 'fa fa-angle-down s12' });

    Official documentation

    Here is the official documentation for plugin - http://www.virtuosoft.eu/code/bootstrap-touchspin/

    Fancyselect

    A better select for discerning web developers.

    Plugin is located in /plugins/forms/fancyselect/

    Include plugin via js like this:

    <script src="/plugins/forms/fancyselect/fancySelect.js"></script>

    And init plugin

    //------------- Fancy select -------------//
    $('.fancy-select').fancySelect();
    //custom templating
    $('.fancy-select1').fancySelect({
        optionTemplate: function(optionEl) {
            return optionEl.text() + '<i class="pull-left ' + optionEl.data('icon') + '"></i>';
        }
    });

    Official documentation

    Here is the official documentation for plugin - https://github.com/octopuscreative/fancyselect

    Dropzone

    DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

    Plugin is located in /plugins/forms/dropzone/

    Include plugin via js like this:

    <script src="/plugins/forms/dropzone/dropzone.js"></script>

    And init plugin

    <form action="/file-upload"class="dropzone" id="my-awesome-dropzone"></form>

    Official documentation

    Here is the official documentation for plugin - http://www.dropzonejs.com/

    Codemirror

    CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

    Plugin is located in /plugins/forms/codemirror/

    Include plugin via js like this:

    <script src="/plugins/forms/codemirror/codemirror.js"></script>

    And init plugin

    //------------- Code mirror  -------------//
    
    //mixed mode
    var mixedMode = {
        name: "htmlmixed",
        scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
           mode: null},
          {matches: /(text|application)\/(x-)?vb(a|script)/i,
           mode: "vbscript"}]
    };
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        theme: 'monokai',
        mode: mixedMode
    });
    
    //javascript example
    var editor1 = CodeMirror.fromTextArea(document.getElementById("code1"), {
        lineNumbers: true,
        matchBrackets: true,
        theme: 'monokai',
        mode:  "javascript"
    });
    
    editor1.setSize('auto', '100%');
    
    //css example
    var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
        lineNumbers: true,
        matchBrackets: true,
        theme: 'monokai',
        mode:  "css"
    });

    Official documentation

    Here is the official documentation for plugin - http://codemirror.net/

    Markdown editor

    Bootstrap plugin for markdown editing

    Plugin is located in /plugins/forms/bootstrap-markdown/

    Include plugin via js like this:

    <script src="/plugins/forms/bootstrap-markdown/bootstrap-markdown.js"></script>

    Official documentation

    Here is the official documentation for plugin - https://github.com/toopay/bootstrap-markdown

    Count to

    A jQuery plugin that will count up (or down) to a target number at a specified speed.

    Plugin is located in plugins/misc/countTo/

    Include plugin via js like this:

    <script src="plugins/misc/countTo/jquery.countTo.js"></script>

    Init plugin like this

     $('.timer').countTo({
        from: 50,
        to: 2500,
        speed: 1000,
        refreshInterval: 50,
        formatter: function (value, options) {
            return value.toFixed(options.decimals);
        },
        onUpdate: function (value) {
            console.debug(this);
        },
        onComplete: function (value) {
            console.debug(this);
        }
    });

    Official documentation

    Here is the official documentation for plugin - https://github.com/mhuggins/jquery-countTo

    Google maps

    gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

    Plugin is located in plugins/misc/gmaps/

    Include plugin via js like this:

    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="plugins/misc/gmaps/gmaps.js"></script>

    Init plugin like this

    //------------- Google maps -------------//
    //basic map
    var bmap = new GMaps({
        el: '#gmap',
        lat: -12.043333,
        lng: -77.028333,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false,
        streetViewControl : false,
        mapTypeControl: false,
        overviewMapControl: false
    });

    Official documentation

    Here is the official documentation for plugin - http://hpneo.github.io/gmaps/

    Vector maps

    Show vector maps

    Plugin is located in assets/plugins/misc/vectormaps/

    Include plugin via js like this:

    <script src="assets/plugins/misc/vectormaps/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="assets/plugins/misc/vectormaps/maps/jquery-jvectormap-world-mill-en.js"></script>

    Init plugin like this

    //------------- Vector maps -------------//
    $('#world-map-markers').vectorMap({
        map: 'world_mill_en',
        scaleColors: [colours.teal, colours.blue],
        normalizeFunction: 'polynomial',
        hoverOpacity: 0.7,
        hoverColor: false,
        focusOn:{
            x: 0.5,
            y: 0.5,
            scale: 2.0
        },
        zoomMin:0.85,
        markerStyle: {
          initial: {
            fill: colours.red,
            stroke: colours.red
          }
        },
        backgroundColor: colours.white,
        regionStyle:{
            initial: {
                fill: colours.teal,
                "fill-opacity": 1,
                stroke: colours.teal,
                "stroke-width": 0,
                "stroke-opacity": 0
            },
            hover: {
                "fill-opacity": 0.8
            },
            selected: {
                fill: 'yellow'
            }
        },
        markers: [
            {latLng: [41.90, 12.45], name: 'Vatican City'},
            {latLng: [43.73, 7.41], name: 'Monaco'},
            {latLng: [-0.52, 166.93], name: 'Nauru'},
            {latLng: [-8.51, 179.21], name: 'Tuvalu'},
            {latLng: [43.93, 12.46], name: 'San Marino'},
            {latLng: [47.14, 9.52], name: 'Liechtenstein'},
            {latLng: [7.11, 171.06], name: 'Marshall Islands'},
            {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
            {latLng: [3.2, 73.22], name: 'Maldives'},
            {latLng: [35.88, 14.5], name: 'Malta'},
            {latLng: [12.05, -61.75], name: 'Grenada'},
            {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
            {latLng: [13.16, -59.55], name: 'Barbados'},
            {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
            {latLng: [-4.61, 55.45], name: 'Seychelles'},
            {latLng: [7.35, 134.46], name: 'Palau'},
            {latLng: [42.5, 1.51], name: 'Andorra'},
            {latLng: [14.01, -60.98], name: 'Saint Lucia'},
            {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
            {latLng: [1.3, 103.8], name: 'Singapore'},
            {latLng: [1.46, 173.03], name: 'Kiribati'},
            {latLng: [-21.13, -175.2], name: 'Tonga'},
            {latLng: [15.3, -61.38], name: 'Dominica'},
            {latLng: [-20.2, 57.5], name: 'Mauritius'},
            {latLng: [26.02, 50.55], name: 'Bahrain'},
            {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
        ]
    });

    Official documentation

    Here is the official documentation for plugin - http://jvectormap.com/documentation/

    Datatables

    DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

    Plugin is located in plugins/tables/datatables/

    Include plugin via js like this:

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

    If you want to use tabletools for datatables include this two files too

    <script src="plugins/tables/datatables/tabletools/ZeroClipboard.js"></script>
    <script src="plugins/tables/datatables/tabletools/TableTools.js"></script>

    Init plugin like this

    //------------- Data tables -------------//
    //basic datatables
    $('#basic-datatables').dataTable({
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": "<span>_MENU_</span>"
        },
        "sDom": "<'row'<'col-md-6 col-xs-12 'l><'col-md-6 col-xs-12'f>r>t<'row'<'col-md-4 col-xs-12'i><'col-md-8 col-xs-12'p>>"
    });
    
    //vertical scroll
    $('#vertical-scroll-datatables').dataTable( {
        "scrollY":        "200px",
        "scrollCollapse": true,
        "paging":         false
    });
    
    //responsive datatables
    $('#responsive-datatables').dataTable({
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": "<span>_MENU_</span>"
        },
        "sDom": "<'row'<'col-md-6 col-xs-12 'l><'col-md-6 col-xs-12'f>r>t<'row'<'col-md-4 col-xs-12'i><'col-md-8 col-xs-12'p>>"
    });
    
    //with tabletools
    $('#tabletools').DataTable( {
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": "<span>_MENU_</span>"
        },
        "sDom": "T<'row'<'col-md-6 col-xs-12 'l><'col-md-6 col-xs-12'f>r>t<'row'<'col-md-4 col-xs-12'i><'col-md-8 col-xs-12'p>>",
        tableTools: {
            "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
            "aButtons": [ 
              "copy", 
              "csv", 
              "xls",
              "print",
              "select_all", 
              "select_none" 
          ]
        }
    });

    Official documentation

    Here is the official documentation for plugin - https://datatables.net/

    Ui plugins

    Bootbox.js

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

    Plugin is located in plugins/ui/bootbox/

    Include plugin via js like this:

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

    Init plugin like this

    //------------- Modals -------------//
    //Alert modal
    $('#alert-modal').click(function() {
        bootbox.dialog({
            message: "This is custom alert",
            title: "Alert!!!",
            buttons: {
                success: {
                  label: "Ok i got it",
                  className: "btn-primary btn-alt",
                  callback: function() {
                      //callback result
                  }
                }
            }
        });
    });
    
    //Confirm modal
    $('#confirm-modal').click(function() {
        bootbox.confirm({
            message: "Confirm results:",
            title: "Are you sure ?",
            callback: function(result) {
                  //callback result
                  console.log(result);
            }
        });
    });
    
    //Prompt modal
    $('#prompt-modal').click(function() {
        bootbox.prompt({
            title: "What is your name ?",
            callback: function(result) {
                  //callback result
                  console.log(result);
            }
        });
    });

    Official documentation

    Here is the official documentation for plugin - http://bootboxjs.com/

    Fullcalendar

    FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event)

    Plugin is located in plugins/ui/calendar/

    Include plugin via js like this:

    <script src="plugins/ui/calendar/fullcalendar.js"></script>

    Init plugin like this

    /* initialize the external events
        -----------------------------------------------------------------*/
    
    $('#external-events div.external-event').each(function() {
    
        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };
    
        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);
    
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    
    });
    
    
    /* initialize the calendar
    -----------------------------------------------------------------*/
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        buttonText: {
            prev: '<i class="en-arrow-left8 s16"></i>',
            next: '<i class="en-arrow-right8 s16"></i>',
            today:'Today'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date) { // this function is called when something is dropped
    
            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');
    
            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);
    
            // assign it the date that was reported
            copiedEventObject.start = date;
    
            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
    
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }    
        },
        events: [
            {
                title: 'Meeting',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                description: 'Morning meeting with all staff.',
            },
            {
                title: 'Important',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                description: 'Important backup on some servers.',
            }
        ]
    
    });

    Official documentation

    Here is the official documentation for plugin - http://arshaw.com/fullcalendar/

    Gritter

    notification bubble/popup that appears in the top right of your desktop

    Plugin is located in plugins/ui/notify/

    Include plugin via js like this:

    <script src="plugins/ui/notify/jquery.gritter.js"></script>

    Init plugin like this

    //info notice
    $('#regular-notice').click(function() {
        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'Eric Hofman',
            // (string | mandatory) the text inside the notification
            text: 'User is just logged into system.',
            // (string | optional) the image to display on the left
            image: 'https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg',
            // (string) specify font-face icon  class for close message
            close_icon: 'en-cross',
        });        
    });

    Official documentation

    Here is the official documentation for plugin - http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/

    Circliful

    Turn elements into circliful Circles.

    Plugin is located in plugins/ui/progressbar/

    Include plugin via js like this:

    <script src="plugins/ui/progressbar/jquery.circliful.min.js"></script>

    Init plugin like this

    //------------- Circfull progress bar -------------//
    //red color
    $('.progress-circular-red').circliful({ backgroundColor: colours.gray,  foregroundColor: colours.red    });
    //blue color
    $('.progress-circular-blue').circliful({ backgroundColor: colours.gray,  foregroundColor: colours.blue    });
    //green color
    $('.progress-circular-green').circliful({ backgroundColor: colours.gray,  foregroundColor: colours.green });
    //yellow color
    $('.progress-circular-yellow').circliful({ backgroundColor: colours.gray,  foregroundColor: colours.yellow });

    Official documentation

    Here is the official documentation for plugin - http://ladensia.com/circliful/index.html

    Bootstrap slider

    Modern touch slider.

    Plugin is located in plugins/ui/slider/

    Include plugin via js like this:

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

    Init plugin like this

    //------------- Sliders -------------//
    //Basic slider
    $('#basic-slider').slider({
        min: 1,
        max: 100,
        step: 1,
        value: 50,
        formater: function(value) {
            return value;
        }
    });
    $("#basic-slider").on('slide', function(slideEvt) {
        $("#slider1val").text(slideEvt.value);
    });
    
    //custom step slider
    $('#step-slider').slider({
        min: 1,
        max: 100,
        step: 25,
        value: 25,
        formater: function(value) {
            return value;
        }
    });
    $("#step-slider").on('slide', function(slideEvt) {
        $("#slider2val").text(slideEvt.value);
    });
    
    //range slider
    $('#range-slider').slider({
        min: 1,
        max: 1000,
        step: 1,
        value: [100,500],
        formater: function(value) {
            return value;
        }
    });
    $("#range-slider").on('slide', function(slideEvt) {
        $("#slider3val").text(slideEvt.value);
    });
    
    //vertical slider
    $('#vertical-slider').slider({
        orientation: 'vertical',
        reversed: true,
        selection: 'after',
        min: 1,
        max: 10,
        step: 1,
        value: 5,
        formater: function(value) {
            return value;
        }
    });
    $("#vertical-slider").on('slide', function(slideEvt) {
        $("#slider4val").text(slideEvt.value);
    });

    Official documentation

    Here is the official documentation for plugin - http://www.eyecon.ro/bootstrap-slider/

    Tab Drop

    Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.

    Plugin is located in plugins/ui/tabdrop/

    Include plugin via js like this:

    <script src="plugins/ui/tabdrop/bootstrap-tabdrop.js"></script>

    Init plugin like this

    //------------- Tab drop -------------//
    function tabdrop() {
        $('.tabdrop').tabdrop({
            text: '<i class="fa-align-justify"></i>'
        }).on("click", function(){
            $(this).tabdrop('layout');
        });
    }
    $(window).on("load", function(){
       tabdrop();
    });
    $(window).resize(tabdrop);

    Official documentation

    Here is the official documentation for plugin - http://www.eyecon.ro/bootstrap-tabdrop/

    Waypoint plugin

    Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

    Plugin is located in plugins/ui/waypoint/

    Include plugin via js like this:

    <script src="plugins/ui/waypoint/waypoint.js"></script>

    Please see detailed documentation for how to setup plugin

    Official documentation

    Here is the official documentation for plugin - http://imakewebthings.com/jquery-waypoints/#docs