Boostbox

DataTables is an external library that will add advanced interaction controls to any HTML table.
DataTables provides documentation and examples on their website .

Example

You can view basic examples of DataTables here .

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after  which can be seen in getting started .
All additional Javascripts should be included after  which can be seen in getting started .

Additional CSS

<link type="text/css" rel="stylesheet" href="assets/css/theme-default/libs/DataTables/jquery.dataTables.css">

Additional Javascript

<script src="assets/js/libs/DataTables/jquery.dataTables.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

$('#table1').dataTable({ options });

This code must be executed after the page has loaded the Javascript libraries.
The best way to do this, is with jQuery's $(document).ready. You can create your own implementation or use the example code provided by Boostbox which can be located in:

<script src="boostbox/assets/js/core/demo/DemoTableDynamic.js"></script>

HTML

The Javascript is tied to an element in the body of your page. The DataTable will be placed inside this element:

<table id="table1" class="table">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 4.0</td>
			<td>Win 95+</td>
			<td>4</td>
			<td>X</td>
		</tr>
		...
	</tbody>
</table>

Options

DataTables has many options that can be found in their documentation . Boostbox has provided extra options for the DataTables that are described below.

Sorting icons

The standard sorting icons for the DataTables are:

If you add the class .sort-numeric to a <th> element:

If you add the class .sort-alpha to a <th> element:

<thead>
	<tr>
		<th>Header 1</th>
		<th class="sort-numeric">Header 2</th>
		<th class="sort-alpha">Header 3</th>
	</tr>
</thead>

Table tools

There are a number of extras for DataTables. TableTools is one of these extras. Boostbox has provided a stylesheet for the TableTools.

<link type="text/css" rel="stylesheet" href="assets/css/theme-default/libs/DataTables/TableTools.css">

Also remember to include the TableTools Javascript.

<script src="assets/js/libs/DataTables/extras/TableTools/media/js/TableTools.min.js"></script>

FullCalendar 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. It exposes hooks for user-triggered events.
FullCalendar provides documentation on their website .

Example

You can view a basic example of FullCalendar here .

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after  which can be seen in getting started .
All additional Javascripts should be included after  which can be seen in getting started .

Additional CSS

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/fullcalendar/fullcalendar.css">

Additional Javascript

<script src="assets/js/libs/fullcalendar/fullcalendar.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

$('#calendar').fullCalendar({ options });

This code must be executed after the page has loaded the Javascript libraries.
The best way to do this, is with jQuery's $(document).ready. You can create your own implementation or use the example code provided by Boostbox which can be located in:

<script src="boostbox/assets/js/core/demo/DemoCalendar.js"></script>

The DemoCalendar.js also adds a draggable events list to the FullCalendar. This code is demonstrated in the function _initEventslist().

HTML

The Javascript is tied to an element in the body of your page. FullCalendar will be placed inside this element:

<div id="calendar"></div>

Boostbox FullCalendar

To get the style in the Boostbox example , you need to place a .box-tiles around the FullCalendar.

<div class="box box-tiles style-support3">
	<div class="row">
		<div class="col-md-3">
			<!-- FullCalendar sidebar -->
		</div>
		<div class="col-md-9 style-white">
			<div id="calendar"></div>
		</div>
	</div>
</div>

FullCalendar sidebar

The FullCalendar sidebar has two .box-body classes which seperates the FullCalendar controls and the FullCalendar events list.
Because the example uses the .box class, you can use any color you want for the sidebar.

The FullCalendar controlbar has the following HTML structure:

<div class="box-body box-body-darken small-padding style-support3">
	<!-- Month/week/day controls -->
	<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-sm btn-support3 active">
			<input type="radio" name="calendarMode" value="month">Month
		</label>
		<label class="btn btn-sm btn-support3">
			<input type="radio" name="calendarMode" value="agendaWeek">Week
		</label>
		<label class="btn btn-sm btn-support3">
			<input type="radio" name="calendarMode" value="agendaDay">Day
		</label>
	</div>
	<!-- Next/Prev day controls -->
	<div class="btn-group pull-right">
		<button id="calender-prev" type="button" class="btn btn-sm btn-equal btn-support3"><i class="fa fa-chevron-left"></i></button>
		<button id="calender-next" type="button" class="btn btn-sm btn-equal btn-support3"><i class="fa fa-chevron-right"></i></button>
	</div>
</div>

The FullCalendar events list has the following HTML structure:

<div class="box-body">
	<h1 class="text-light selected-day"></h1>
	<h3 class="text-light selected-date"></h3>
	<br/><br/>
	<ul class="list-events list-group">
		<li class="list-group-header">
			<h4 class="text-light">
				<i class="fa fa-plus-circle fa-fw"></i> 
				Draggable events
			</h4>
		</li>
		<li class="list-group-item"><span>Call clients for follow-up</span></li>
		<li class="list-group-item"><span>Schedule meeting</span></li>
		...
	</ul>
</div>

Nestable can add drag & drop functionality to hierarchical lists with mouse and touch compatibility.
Nestable provides some examples on their website and GitHub .

Example

You can view a basic example of Nestable here .

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after  which can be seen in getting started .
All additional Javascripts should be included after  which can be seen in getting started .

Additional CSS

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/nestable/nestable.css">

Additional Javascript

<script src="assets/js/libs/nestable/jquery.nestable.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

$('#nestable-list').nestable({ options });

This code must be executed after the page has loaded the Javascript libraries.
The best way to do this, is with jQuery's $(document).ready. You can create your own implementation or use the example code provided by Boostbox which can be located in:

<script src="boostbox/assets/js/core/demo/DemoUILists.js"></script>

HTML

The Javascript is tied to an element in the body of your page.
BoostBox made some adjustments, so you can use the .btn class inside the Nestable list. This way you can use the available button classes to style your list.

<div id="nestable-list" class="dd">
	<ol class="dd-list">
		<li class="dd-item" data-id="1">
			<div class="dd-handle btn btn-primary">Item 1</div>
		</li>
		<li class="dd-item" data-id="2">
			<div class="dd-handle btn btn-default">Item 2</div>
		</li>
		<li class="dd-item" data-id="3">
			<div class="dd-handle btn btn-default">Item 3</div>
			<ol class="dd-list">
				<li class="dd-item" data-id="4">
					<div class="dd-handle btn btn-default">Item 4</div>
				</li>
				<li class="dd-item" data-id="5">
					<div class="dd-handle btn btn-default">Item 5</div>
				</li>
				<li class="dd-item" data-id="6">
					<div class="dd-handle btn btn-default">Item 6</div>
				</li>
				<li class="dd-item" data-id="7">
					<div class="dd-handle btn btn-default">Item 7</div>
				</li>
			</ol>
		</li>
	</ol>
</div>

slimScroll is a small plugin that transforms any <div> into a scrollable area with a nice scrollbar.
slimScroll provides examples on their website .

Example

slimScroll is integrated in BoostBox. You just have to add the class .scroll to an element, restrict its height, and slimScroll will be added.

Example

Boxes can be given a fixed height with a custom scroll bar.

Cu conceptam vituperata temporibus has. Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Omnis modus phaedrum an vim, pri ipsum quando no.

Eros facete ponderum et vix. Quo nisl pertinax at, mea ea ullum simul ponderum. Postulant definiebas ius et, quas voluptaria moderatius pro ex, ea augue aeque labitur mea. Cu quo explicari iracundia, et quo primis ceteros moderatius. Veniam ubique laboramus ut pri, cu mea causae docendi. Cum an tritani civibus, est quem error malorum ei, quod fuisset eu sed.

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

<div class="box box-outlined style-primary">
	<div class="box-body height-5 scroll">
		...
	</div>
</div>

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after  which can be seen in getting started .

Additional Javascript

<script src="assets/js/libs/slimscroll/jquery.slimscroll.min.js"></script>

Toastr is a Javascript library for non-blocking notifications. Toastr provides documentation on GitHub .

Example

You can view a basic example of Toastr here .

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after  which can be seen in getting started .
All additional Javascripts should be included after  which can be seen in getting started .

Additional CSS

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/toastr/toastr.css">

Additional Javascript

<script src="assets/js/libs/toastr/toastr.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

// Display an info toast with no title
toastr.info('Are you the one?')

// Display a warning toast, with no title
toastr.warning('My name is John Doe. You have to go on!')

// Display a success toast, with a title
toastr.success('Good luck!', 'Max Smith says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Impossible!')

// Clears the current list of toasts
toastr.clear()

This code must be executed after the page has loaded the Javascript libraries.
The best way to do this, is with jQuery's $(document).ready. You can create your own implementation or use the example code provided by Boostbox which can be located in:

<script src="boostbox/assets/js/core/demo/DemoUIMessages.js"></script>

Example

Box loader can add a spinning loader to any .box.

Example

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

Methods

boostbox.App.addBoxLoader(box)

Adds a loader to your .box class. It requires an instance of your box.

var box = $('.box');
boostbox.App.addBoxLoader(box);

boostbox.App.removeBoxLoader(box)

Removes the loader of .box class. It requires an instance of your box.

var box = $('.box');
boostbox.App.removeBoxLoader(box);

Example

Add collapsing functionality to any .box with this method.

Example

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

Methods

boostbox.App.toggleBoxCollapse(box)

Toggles the collapse state of a .box class. It requires an instance of your box.

var box = $('.box');
boostbox.App.toggleBoxCollapse(box);

Events

Box collapse class exposes a few events for hooking into custom functionality.

Event Type	Description
box.bb.collapse	This event is fired when a `.box` element has been expanded or collapsed (will wait for the transitions to complete).

$('.box').on('box.bb.collapse', function (event, collapsed) {
	event.target // activated box
	collapsed // true or false
});

Example

Removing a box from stage is easy with this method.

Example

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

Methods

boostbox.App.removeBox(box)

Removes your box from stage. It requires an instance of your box.

var box = $('.box');
boostbox.App.removeBox(box);

Example

To create a tasklist, add .list-tasks to a .list-group.
A tasklist has a .task-body that contains the text and a .task-checkbox that contains the checkbox.

To select a task on load, add .active to the .btn class which styles the checkbox.

Example

Receive shipment Today
Go to concert
Call clients for follow-up

<ul class="list-tasks list-group list-support1" id="doc-task-list">
	<li class="list-group-item" data-id="10">
		<div class="task-checkbox">
			<div data-toggle="buttons" class="btn btn-checkbox-gray-inverse active"><input type="checkbox"></div>
		</div>
		<div class="task-body">
			<span>Receive shipment</span>
			<span class="label label-danger">Today</span>
		</div>
	</li>
	<li class="list-group-item" data-id="20">
		<div class="task-checkbox">
			<div data-toggle="buttons" class="btn btn-checkbox-gray-inverse"><input type="checkbox"></div>
		</div>
		<div class="task-body">
			<span>Go to concert</span>
		</div>
	</li>
	...
</ul>

There is no extra Javascript needed to create a tasklist. If you however want your list to be sortable, you have to include jQuery-ui:

<script src="assets/js/libs/jquery-ui/jquery-ui-1.10.3.custom.min"></script>

Events

Tasklist exposes a few events for hooking into custom functionality.

Event Type	Description
task.bb.completed	This event is fired when a `.box` element has been expanded or collapsed (will wait for the transitions to complete).
All sortable events are triggered by the jQuery-ui. They have documentation online. Below is an example of how to implement these events.
sortchange	This event is triggered during sorting, but only when the DOM position has changed.

$('#doc-task-list').on('task.bb.completed', function(event, task, completed) {
	task // changed task
	completed // true or false
});

$('#doc-task-list').on( "sortchange", function( event, ui ) {
	// Place your code here
});

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

Example

You can view a basic example of Flot here .

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after  which can be seen in getting started .

Additional Javascript

<script src="assets/js/libs/flot/jquery.flot.min.js"></script>
<!--
	Flot provides different javascript files some charts. Check their website to see wich ones you need.
	The example page uses the following additional includes.
-->
<script src="assets/js/libs/flot/jquery.flot.time.min.js"></script>
<script src="assets/js/libs/flot/jquery.flot.resize.min.js"></script>
<script src="assets/js/libs/flot/jquery.flot.orderBars.min.js"></script>
<script src="assets/js/libs/flot/jquery.flot.pie.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

$.plot($('#flot-chart'), data, options);

Html

The Javascript is tied to an element in the body of your page. Give it a .flot class to easily style the legend.

<div id="flot-chart" class="flot"></div>

Knob charts are a downward compatible, touchable, jQuery dial. jQuery Knob provides documentation on GitHub .

Example

You can view a basic example of jQuery Knob here .

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after  which can be seen in getting started .

Additional Javascript

<script src="assets/js/libs/jquery-knob/jquery-knob.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

var options = boostbox.App.getKnobStyle($('#knob-chart'));
$(this).knob(options);

Html

The Javascript is tied to an element in the body of your page.

<div class="knob knob-support2 knob-inverse-track size-3">
	<input type="text" id="knob-chart" data-min="0" data-max="100" data-thickness=.1 value="40">
</div>

Options

Boostbox provides ready made classes so you can easily style the knob charts. You only need to put the <input> element inside a .knob class. You then can add the following classes to the .knob class:

<!-- Styles for the progress indicator -->
<div class="knob knob-primary">..</div>
<div class="knob knob-success">..</div>
<div class="knob knob-warning">..</div>
<div class="knob knob-danger">..</div>
<div class="knob knob-info">..</div>
<div class="knob knob-black">..</div>
<div class="knob knob-white">..</div>
<div class="knob knob-gray">..</div>
<div class="knob knob-inverse">..</div>
<div class="knob knob-body">..</div>
<div class="knob knob-support1">..</div>
<div class="knob knob-support2">..</div>
<div class="knob knob-support3">..</div>
<div class="knob knob-support4">..</div>
<div class="knob knob-support5">..</div>
<!-- Styles for the track -->
<div class="knob knob-inverse-track">..</div>
<div class="knob knob-primary-track">..</div>
<div class="knob knob-success-track">..</div>
<div class="knob knob-warning-track">..</div>
<div class="knob knob-danger-track">..</div>
<div class="knob knob-info-track">..</div>
<div class="knob knob-black-track">..</div>
<div class="knob knob-white-track">..</div>
<div class="knob knob-gray-track">..</div>
<div class="knob knob-inverse-track">..</div>
<div class="knob knob-body-track">..</div>
<div class="knob knob-support1-track">..</div>
<div class="knob knob-support2-track">..</div>
<div class="knob knob-support3-track">..</div>
<div class="knob knob-support4-track">..</div>
<div class="knob knob-support5-track">..</div>
<!-- You can combine these styles like so: -->
<div class="knob knob-support2 knob-inverse-track">..</div>

Morris.js has good-looking charts. Morris.js provides documentation on their website .

Example

You can view a basic example of Morris.js here .

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after  which can be seen in getting started .
All additional Javascripts should be included after  which can be seen in getting started .

Additional CSS

<link type="text/css" rel="stylesheet" href="assets/theme-default/libs/morris/morris.core.css">

Additional Javascript

<script src="assets/js/libs/morris.js/morris.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

Morris.Donut(options);
Morris.Line(options);
Morris.Bar(options);
Morris.Area(options);

Html

The Javascript is tied to an element in the body of your page.

<div id="morris-line-graph" class="height-8" data-colors="#6bafbd"></div>

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

Example

You can view a basic example of jQuery Sparklines here .

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after  which can be seen in getting started .

Additional Javascript

<script src="assets/js/libs/sparkline/jquery.sparkline.min.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code.

var options = $('#inline-sparkline').data();
$('#inline-sparkline').sparkline('html', options);

Html

The Javascript is tied to an element in the body of your page.

 <span id="inline-sparkline" data-type="pie">1,1,2</span>

JavaScript

DataTables

Example

Getting started

Dependencies

Javascript

HTML

Options

Sorting icons

Table tools

FullCalendar

Example

Getting started

Dependencies

Javascript

HTML

Boostbox FullCalendar

FullCalendar sidebar

Nestable

Example

Getting started

Dependencies

Javascript

HTML

slimScroll

Example

Getting started

Dependencies

Toastr

Example

Getting started

Dependencies

Javascript

Box loader

Example

Methods

boostbox.App.addBoxLoader(box)

boostbox.App.removeBoxLoader(box)

Box collapse

Example

Methods

boostbox.App.toggleBoxCollapse(box)

Events

Box remove

Example

Methods

boostbox.App.removeBox(box)

Tasklist

Example

Events

Flot charts

Example

Getting started

Dependencies

Javascript

Html

jQuery Knob

Example

Getting started

Dependencies

Javascript

Html

Options

Morris.js

Example

Getting started

Dependencies

Javascript

Html

jQuery Sparklines

Example

Getting started

Dependencies

Javascript

Html