Plugins
Information about included plugins in template
Information about included plugins in template
Description of all plugins inlcuded in Supr theme, all plugins are included in /plugins folder grouped semantically
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>
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
});
All options are commented so change it if you like
Lets say you want to hide left sidebar you need to call this code
//hide leftsidebar
$('body').data('supr').hideLeftSidebar();
Here is the full list of public methods
Get the current breakpoint ( aviable values are - large, laptop, tablet, phone )
$('body').data('supr').getBreakPoint();
Make header fixed or not, use true or false
//make header fixed
$('body').data('supr').fixedHeader(true);
Make sidebar fixed or not, use true or false
//make sidebar fixed
$('body').data('supr').fixedSidebar(true);
Remove fixed sidebar, use left or right
//remove fixed sidebar
$('body').data('supr').removeFixedSidebar('left');
Hide left sidebar
$('body').data('supr').hideLeftSidebar();
Show left sidebar
$('body').data('supr').showLeftSidebar();
Hide right sidebar
$('body').data('supr').hideRightSidebar();
Show right sidebar
$('body').data('supr').showRightSidebar();
If you want some method dont hesitate to contact us
This section contain list of core plugins in order template to work do not remove it in your page.
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>
Here is the official documentation for plugin - http://getbootstrap.com/javascript/
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.
Here is the official documentation for plugin - https://github.com/ten1seven/jRespond
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
Here is the official documentation for plugin - http://github.hubspot.com/pace/docs/welcome/
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 )
Here is the official documentation for plugin - http://rocha.la/jQuery-slimScroll
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
Here is the official documentation for plugin - https://github.com/riklomas/quicksearch
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
Here is the official documentation for plugin - http://julian.com/research/velocity/
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>
Here is the official documentation for plugin - https://github.com/ftlabs/fastclick
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
Here is the official documentation for plugin - https://github.com/flot/flot/blob/master/API.md
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
Here is the official documentation for plugin - http://www.chartjs.org/docs/
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
Here is the official documentation for plugin - http://morrisjs.github.io/morris.js/
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
Here is the official documentation for plugin - http://rendro.github.io/easy-pie-chart/
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
Here is the official documentation for plugin - http://omnipotent.net/jquery.sparkline/#s-docs
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
Here is the official documentation for plugin - http://bernii.github.io/gauge.js/
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
Here is the official documentation for plugin - http://kimmobrunfeldt.github.io/progressbar.js/
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"});
Here is the official documentation for plugin - http://www.jacklmoore.com/autosize/
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"
});
Here is the official documentation for plugin - http://markusslima.github.io/bootstrap-filestyle/#Methods
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'
});
Here is the official documentation for plugin - http://mjolnic.github.io/bootstrap-colorpicker/
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();
Here is the official documentation for plugin - https://github.com/eternicode/bootstrap-datepicker
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
});
Here is the official documentation for plugin - https://github.com/jdewit/bootstrap-timepicker
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'
});
Here is the official documentation for plugin - https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
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%");
Here is the official documentation for plugin - http://digitalbush.com/projects/masked-input-plugin/
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
});
Here is the official documentation for plugin - https://github.com/mimo84/bootstrap-maxlength
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'});
Here is the official documentation for plugin - http://ivaynberg.github.io/select2/
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()
}
});
Here is the official documentation for plugin - http://timschlechter.github.io/bootstrap-tagsinput/examples/
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
});
Here is the official documentation for plugin - https://github.com/summernote/summernote
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();
}
});
Here is the official documentation for plugin - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
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
});
Here is the official documentation for plugin - https://github.com/VinceG/twitter-bootstrap-wizard
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">
<!-- -->
</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>