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