FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. 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).

Version

2.4.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file. Also some jQuery UI components are included (jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js) along with MomentJS plugin for supporting plugin's advanced features.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

To initialize the plugin on a div with id calendar (with example events), you need the following JS code:

$(function(){
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });
});

Documentation

For advanced usage & examples, you can have a look at http://arshaw.com/fullcalendar/

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

Version

1.0.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Image Lightbox
$('[data-toggle="lightbox-image"]').magnificPopup({type: 'image', image: {titleSrc: 'title'}});

You can enable the lightbox on a single image by using the following markup:

<a href="url/to/small/img/" data-toggle="lightbox-image">
    <img src="url/to/large/img/" alt="image">
</a>

Documentation

For advanced usage & examples, you can have a look at http://dimsemenov.com/plugins/magnific-popup/

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

Version

0.8.3

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file. The included flot plugins are: pie, resize, stack & time.

Usage

It has to be initialized directly in the page where you would like to create your charts. You can see usage examples in js/pages/compCharts.js

Documentation

For advanced usage & examples, you can have a look at http://www.flotcharts.org/

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.

Version

1.2.5

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Easy Pie Chart
$('.pie-chart').easyPieChart({
    barColor: $(this).data('bar-color') ? $(this).data('bar-color') : '#777777',
    trackColor: $(this).data('track-color') ? $(this).data('track-color') : '#eeeeee',
    lineWidth: $(this).data('line-width') ? $(this).data('line-width') : 3,
    size: $(this).data('size') ? $(this).data('size') : '80',
    animate: 800,
    scaleColor: false
});

You can create a pie chart by using the following markup:

<div class="pie-chart" data-percent="30" data-size="130">
    <span>30%</span>
</div>

Documentation

For advanced usage & examples, you can have a look at http://rendro.github.io/easy-pie-chart/

Sparkline generates small inline charts directly in the browser using data supplied either inline in the HTML, or via JavaScript.

Version

2.1.2

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

It has to be initialized directly in the page where you would like to create your charts. You can see usage examples in js/pages/compCharts.js

Documentation

For advanced usage & examples, you can have a look at http://omnipotent.net/jquery.sparkline/

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

Version

0.4.21

JavaScript

js/plugins/gmaps.min.js

Plugin's JavaScript code is included in this file.

Usage

Before using this plugin, you will have to include Google Maps API and the plugin itself in your page:

<!-- Google Maps API + Gmaps Plugin, must be loaded in the page you would like to use maps -->
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/plugins/gmaps.min.js"></script>

Then you can use it to create your maps. You can see usage examples in js/pages/compMaps.js

Documentation

For advanced usage & examples, you can have a look at http://hpneo.github.io/gmaps/

slimScroll 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.

Version

1.3.3

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

To initialize the plugin on a div with id example-scroll, you need the following JS code:

$(function(){
    $('#example-scroll').slimScroll({
        height: '300px'
    });
});

Documentation

For advanced usage & examples, you can have a look at http://rocha.la/jQuery-slimScroll

Bootstrap-growl is a simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.

Version

1.1.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

It has to be initialized directly in a page. You can see a usage example in js/pages/uiProgress.js

In general, the code along with all the available options for creating a notification, is the following:

$.bootstrapGrowl("Your message!", {
    ele: 'body', // which element to append to
    type: 'success', // ('success', 'info', 'warning', 'danger')
    offset: {from: 'top', amount: 20}, // 'top', or 'bottom'
    align: 'right', // ('left', 'right', or 'center')
    width: 250, // (integer, or 'auto')
    delay: 4000, // in ms
    allow_dismiss: true,
    stackup_spacing: 10 // spacing between consecutively stacked growls
});

Documentation

For advanced usage & examples, you can have a look at http://ifightcrime.github.io/bootstrap-growl/

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

Version

1.2.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

To initialize the plugin on a div with id example-timer, you can use the following example JS code (it will count up to 100):

$(function(){
    $('#example-timer').countTo({
        to: 100,
        speed: 1000,
        refreshInterval: 25
    });
});

Documentation

For advanced usage & examples, you can have a look at https://github.com/mhuggins/jquery-countTo

Nestable is a jQuery plugin that enables to drag & drop hierarchical lists with mouse and touch compatibility.

Version

1.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

To initialize the plugin on the following list

<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

you can use the following JS code:

$(function(){
    $('.dd').nestable();
});

Documentation

For advanced usage & examples, you can have a look at https://github.com/dbushell/Nestable

EasyTree is a small and lightweight JS Menu system designed to be easy to set up but still have a rich set of features and be capable of more complex scenarios.

Version

1.0.1

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.easytree/*

This plugin uses the images included in this folder.

Usage

You can enable it on the following list..

<div id="easy-tree">
    <ul>
        <li><a href="http://www.easyjstree.com" target="_blank">Home</a></li>
        <li class="isFolder isExpanded" title="Bookmarks">
            Folder 1
            <ul>
               <li><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
            </ul>
        </li>
        <li>
            Node 1
            <ul>
                <li>Sub Node 1</li>
                <li>Sub Node 2</li>
                <li>Sub Node 3</li>
            </ul>
        </li>
        <li>Node 2</li>
    </ul>
</div>

..by running the following code:

// Initialize EasyTree
$('#easy-tree').easytree();

Documentation

For advanced usage & examples, you can have a look at http://www.easyjstree.com/

Bootstrap plugins offer extra functionality such as modals, alerts, tooltips & popovers. All plugins can be used directly in the template.

Version

3.3.5

JavaScript

js/vendor/bootstrap.min.js

Bootstrap plugins’ JavaScript code is included in this file.

Documentation

For usage examples of all Bootstrap plugins, you can have a look at http://getbootstrap.com/JavaScript/

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

Version

1.4.2

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.chosen/*

This plugin uses the images included in this folder.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Chosen
$('.select-chosen').chosen({width: "100%"});

You can enable it on a select element, just by adding the class select-chosen:

<select class="select-chosen" style="width: 250px;">
    <option value="">Choose a Country...</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    ...
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
</select>

Documentation

For advanced usage & examples, you can have a look at http://harvesthq.github.io/chosen/

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

Version

4.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.select2/*

This plugin uses the images included in this folder.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Select2
$('.select-select2').select2();

You can enable it on a select element, just by adding the class select-select2:

<select class="select-select2" style="width: 100%;">
    <option value="">Choose a Country...</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    ...
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
</select>

Documentation

For advanced usage & examples, you can have a look at http://ivaynberg.github.io/select2

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.

Version

4.5.4

JavaScript

js/plugins/ckeditor/

All plugin's required files are included in this folder.

Usage

You have to include the file js/plugins/ckeditor/ckeditor.js to your page:

<script src="js/ckeditor/ckeditor.js"></script>

You can enable it on a textarea, just by adding the class ckeditor:

<textarea class="ckeditor"></textarea>

Online

For more info, you can have a look at http://ckeditor.com/

Bootstrap Colorpicker is plugin for adding a color picker to an input.

Version

2.3.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.colorpicker/*

This plugin uses the images included in this folder.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Bootstrap Colorpicker
$('.input-colorpicker').colorpicker({format: 'hex'});
$('.input-colorpicker-rgba').colorpicker({format: 'rgba'});

You can enable it on an input element, just by adding a class input-colorpicker or input-colorpicker-rga:

<input type="text" id="example-colorpicker" name="example-colorpicker" class="form-control input-colorpicker">

Documentation

For advanced usage & examples, you can have a look at http://mjolnic.github.io/bootstrap-colorpicker/

Bootstrap Typeahead is a plugin for simple autocomplete use cases.

Version

Not available

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Typeahead - Example with countries
var exampleTypeheadData = ["Afghanistan","Albania","Algeria","...","Zambia","Zimbabwe"];
$('.input-typeahead').typeahead({ source: exampleTypeheadData });

You can enable it on an input element, just by adding the class input-typeahead:

<input type="text" id="example-typeahead" name="example-typeahead" class="form-control input-typeahead" autocomplete="off" placeholder="Search Countries..">

Documentation

For advanced usage & examples, you can have a look at https://github.com/bassjobsen/Bootstrap-3-Typeahead

Bootstrap Datepicker is a simple datepicker component for Twitter Bootstrap.

Version

1.4.1

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Datepicker
$('.input-datepicker, .input-daterange').datepicker({weekStart: 1}).on('changeDate', function(e){ $(this).datepicker('hide'); });

You can enable a simple datepicker on a text input, just by adding the class input-datepicker:

<input type="text" class="form-control input-datepicker" data-date-format="mm/dd/yy">

You can enable a date range picker, just by using the following markup:

<div class="input-group input-daterange" data-date-format="mm/dd/yyyy">
    <input type="text" class="form-control text-center" placeholder="From">
    <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
    <input type="text" class="form-control text-center" placeholder="To">
</div>

Documentation

For advanced usage & examples, you can have a look at http://bootstrap-datepicker.readthedocs.org/en/v1.4.0/

Bootstrap Timepicker is a simple timepicker component for Twitter Bootstrap.

Version

0.2.5

Small custom improvements were made for BS3 support.

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Timepicker
$('.input-timepicker')
    .timepicker({minuteStep: 1,showSeconds: true,showMeridian: true});
$('.input-timepicker24')
    .timepicker({minuteStep: 1,showSeconds: true,showMeridian: false});

You can enable it on a text input, just by adding the class input-timepicker:

<input type="text" class="form-control input-timepicker">

You can enable it 24-hour format timepicker, just by adding the class input-timepicker24:

<input type="text" class="form-control input-timepicker24">

Documentation

For advanced usage & examples, you can have a look at http://jdewit.github.io/bootstrap-timepicker/

Slider for Bootstrap is a simple component for adding sliders to your forms.

Version

5.2.1

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Slider for Bootstrap
$('.input-slider').slider();

You can enable it on a text input, just by using the following markup (you can adjust the attributes to your own preferences):

<input type="text" class="form-control input-slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="20" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show">

For more slider examples, you can check out the forms components page.

Documentation

For advanced usage & examples, you can have a look at https://github.com/seiyria/bootstrap-slider

jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

Version

1.14.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

It has to be initialized directly in the page where your form is. You can see usage examples at js/pages/formsValidation.js

Documentation

For advanced usage & examples, you can have a look at http://jqueryvalidation.org

Form Wizard can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.

Version

3.0.7

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

It has to be initialized directly in the page where your form is. You can see usage examples at js/pages/formsWizard.js

Documentation

For advanced usage & examples, you can have a look at http://www.thecodemine.org

jQuery Tags Input Plugin will turn your tag list into an input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!

Version

1.3.6

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Tags Input
$('.input-tags').tagsInput({ width: 'auto', height: 'auto'});

You can enable it on a text input, just by using the class input-tags

<input type="text" class="input-tags">

Online

For more info, you can have a look at https://github.com/xoxco/jQuery-Tags-Input

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

Version

1.1.0

Small custom improvements were made.

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

This plugin is auto initialized and replaces images automatically if a retina screen is used. You just have to provide additional - double the pixels - images (and appending '@2x' to their name) along with your original images.

Online

For more info, you can have a look at http://retinajs.com/

JS Cookie is a simple, lightweight JavaScript API for handling cookies.

Version

2.0.3

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

You can save a cookie by using the following code:

Cookies.set('name', 'value');

You can retrieve a value from a cookie by using the following code:

Cookies.get('name'); // => "value"

Online

For more info, you can have a look at https://github.com/js-cookie/js-cookie