| December 14, 2015

Build with panelDrive®. If you have any questions that are beyond the scope of this documentation, please feel free to contact Us Here!

Changelog

BACKEND

  • CHANGES
    • Added: Get Started Version
  • FILES UPDATED
    • css/fonts/fontawesome/* Updated to 4.4.0

Introduction

panelDrive® is a handcrafted extensible cloud-based platform for building stunning amazing hybrid dashboards + 3rd party extension API ecoSystem developers can build on top of, by following this Documentation and help Us make the world become a place of optimized high quality on-Demand cloudSoftware + Extensions, unified and accessible across platforms for everyone, any time and from any digital devices.

Getting Started

When a Panel is installed an in-built ExtensionManager will be automatically activated, only accessible for panel-owners, admins and developers - or user groups with permissions granted, to manage, develop or connect new Extensions and get an overview of Licensekeys.


panelDrive® Core connects and communicates with ExtensionManager through panelDrive® Core API.


Extensions are built in PHP, HTML, CSS & JS with MVC structure and connects to ExtensionManager through Extension API.

Extension API

An Extension is the term that covers Modules and will be represented in the system as pageModules.


pageModules is hosted on panelDrive.com represented in the database with settings available for in-built dataStorage for each extension.


Extension API forms the basic handling of requests by routing and includes the collection of required controllers, models and views to be used.


Extension API comes with in-built functions ex. to obtain specific panelData or user information.

Connect with the Core

§ Master/Client Panel or PanelDriver
§ Extension (extDriver)
§ Communication (comDriver)
§ comDriver -> newPanel ( panelClient [id/int], initSettings [optional/Array] ): returns Panel object
§ comDriver -> masterAccess ( Panel [object], token [string] ): returns true/false
§ comDriver -> developerAccess (Panel [object], developerToken [string] ): returns true/false
§ comDriver -> getExtension ( Panel [object], extensionName [string] ): returns Extension object
§ Panel -> setCurrentLocalUser( ID [id/int], UserData [optional/Array] )
§ Panel -> getCurrentLocalUser( )
§ Extension -> info (): returns extension info as Array
§ Extension -> setData( Array object ): give the extension some data to work with
§ Extension -> run(): returns true, outputs everything
§ Extension -> silentRun(): returns true, outputs nothing
§ Extension -> getData(); returns extension data as array
§ Extension -> setFullRegistryData (): returns data as Array

Build Extensions

Build from Scratch enables developers to build on top of panelDrive® Platform, this is the structure :


<div id="page-content">
    <!-- Blank Header -->
     <div class="content-header">
         <div class="row">
             <div class="col-sm-6">
                <div class="header-section">
                     <h1>Demo Extension<br><small>A demo page to help you start!</small></h1>
                 </div>
             </div>
             <div class="col-sm-6 hidden-xs">
                 <div class="header-section">
                    <ul class="breadcrumb breadcrumb-top">
                        <li>Extra Pages</li>
                        <li><a href="">Blank</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END Blank Header -->

    <!-- Example Block -->
    <div class="block">
        <!-- Example Title -->
        <div class="block-title">
            <h2>Block Title</h2>
        </div>
        <!-- END Example Title -->

        <!-- Example Content -->
        <p>Your content..</p>
        <!-- END Example Content -->
    </div>
    <!-- END Example Block -->
</div>

Fork from GitHub

Bootstrap Framework

Bootstrap is one of the most popular front-end frameworks at the moment and is full of features. It is easy to use and it offers a large variety of CSS as well as JavaScript components.

panelDrive® was built on top of this framework and it extends it to a large degree featuring modern design, widgets, many ready to use pages as well as integration of many popular jQuery plugins such as FullCalendar, Datatables and Flot Charts. It has its own unique, modern and fresh style and supports all of the features the Bootstrap framework has to offer.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component I already present in panelDrive®. What is vital to know, is that the two files the framework consists of (required for panelDrive®), are the following.

  • /css/bootstrap.min.css (unaltered, original framework)
  • /js/vendor/bootstrap.min.js (unaltered, original framework)

The above files include all the features the framework has, except for the default Glyphicons set. Those were not included because Glyphicons PRO ($59) and FontAwesome were used (superior, font-based icon solutions).

CSS Classes Reference

Here you can find a quick reference of many useful CSS classes available in panelDrive®. For more details, you can have a look at the official Bootstrap CSS guide at http://getbootstrap.com/css/

CLASS DESCRIPTION
LAYOUT
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.pull-left Floats the element left
.pull-right Floats the element right
.clearfix Clears all floats in the element
.content-float Puts margin (right or left + bottom) in floated child elements (with .pull-left or .pull-right classes). Useful for paragraphs with floated images.
.content-float-hor Puts margin (only right or left) in floated child elements (with .pull-left or .pull-right classes). Useful for paragraphs with floated images.
.center-block Centers a block element with a specific width inside its container.
.border-* Adds a light border to the element (available positions: top right bottom left)
Text
.text-* Aligns the text (available options: left center right justify)
.h1 Adjusts text to match with <h1> tag
.h2 Adjusts text to match with <h2> tag
.h3 Adjusts text to match with <h3> tag
.h4 Adjusts text to match with <h4> tag
.h5 Adjusts text to match with <h5> tag
.h6 Adjusts text to match with <h6> tag
Color Themes Replace * with: default classy amethyst flat creme passion
.themed-color Sets the text color to the main color of the active theme
.themed-color-dark Sets the text color to the main dark color of the active theme
.themed-color-* Sets the text color to the main color of a specific theme
.themed-color-dark-* Sets the text color to the main dark color of a specific theme
.themed-background Sets the background color to the main color of the active theme
.themed-background-dark Sets the background color to the main dark color of the active theme
.themed-background-* Sets the background color to the main color of a specific theme
.themed-background-dark-* Sets the background color to the main dark color of a specific theme
Contextual Colors
.text-primary Sets the text color to the main color of the active theme. Can be used on <a> elements.
.text-warning Sets the text color to an orange one. Can be used on <a> elements.
.text-danger Sets the text color to a red one. Can be used on <a> elements.
.text-info Sets the text color to a blue one. Can be used on <a> elements.
.text-success Sets the text color to a green one. Can be used on <a> elements.
.text-dark Sets the text color to a dark one based on the active theme. Can be used on <a> elements.
.text-light Sets the text color to white. Can be used on <a> elements.
.text-dark-op Sets the text color to a dark one with opacity based on the active theme. Can be used on <a> elements. Great on light backgrounds for a perfect match.
.text-light-op Sets the text color to white with opacity. Can be used on <a> elements. Great on dark backgrounds for a perfect match.
Helpers
.push Pushes the element by adding a bottom margin (15px).
.push-bit Pushes the element by adding a bottom margin (10px).
.push-top Pushes the element by adding a top margin (15px).
.push-bit-top Pushes the element by adding a top margin (10px).
.remove-margin Removes the margin from an element.
.remove-padding Removes the padding from an element.
.visible-lt-ie10 Makes the element visible only in IE9.
.hidden-lt-ie10 Hides the element in IE9.

JavaScript

Below, you can see the JavaScript files along with their description.

There are a lot of examples in panelDrive® but you can check out their websites where you could find more examples. At last, all JavaScript files are included at the bottom of the page (/inc/template_scripts.php for the PHP version), except from the /js/vendor/modernizr-2.8.3.min.js which needs to be loaded in the <head> tag (/inc/template_start.php for the PHP version).

Various Plugins

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

Version

1.10.9

JavaScript

js/plugins.js

Plugin's JavaScript code as well as Bootstrap pagination integration code are included in this file.

js/app.js

Plugin's Bootstrap integration code is included in this file. It needs to be called before plugin's initialization. Please check usage below.

CSS

css/plugins.css

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

Images

img/jquery.datatables/*

This plugin uses the images included in this folder.

Usage

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

$(function(){
    /* Initialize Bootstrap Datatables Integration */
    App.datatables();

    /* Initialize Datatables */
    $('#example-datatable').dataTable();

    /* Add placeholder attribute to the search input */
    $('.dataTables_filter input').attr('placeholder', 'Search');
});

Documentation

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

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/

Form Plugins

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

Version

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

Usage

To initialize the plugin on a form, you just have to add the class dropzone:

<form action="url/to/upload/script" class="dropzone"></form>

It will submit the dropped file the same way the default file upload form would.

Documentation

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

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

Helper Plugins

HTML5 Placeholder jQuery Plugin enables the input placeholder feature on older browsers (eg IE9).

Version

2.1.3

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 Placeholder
$('input, textarea').placeholder();

It will run automatically if the browser does not support the placeholder attribute.

Online

For more info, you can have a look at http://mths.be/placeholder

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/

Quick Tips

  • Mobile First
    The default CSS styles work great in mobiles. The responsive CSS code alter the styles in larger resolutions.
  • Cloud First
  • Client-side Logic
  • Border-Box
    The Bootstrap framework make use of the border-box CSS model. That means that if you want to alter the width of an element with CSS, you can do it without worrying about the padding or the border size of that element (they will be adjusted to the width you will set).
  • Build once - Deploy and run anywhere
  • Liquid-Data Structure
  • Zero-knowledge

Retina

panelDrive® is retina ready! This means that it looks crystal clear on retina displays found on high-end mobile or other devices. If such display is available, the high resolution images will be served. If you add extra images and you want to have a retina ready interface, just add along with the original images (in the same folder), the same images with double pixels and append the text @2x to their original name. They will automatically be served if necessary! You only have to use the default image in your project. The high res image (@2x) will be served automatically if needed.