Card collapse

Example

Add collapsing functionality to any .card with this method.

Methods

materialadmin.App.toggleCardCollapse(card)

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

var card = $('.card');
materialadmin.AppCard.toggleCardCollapse(card);

Events

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

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

Card loader

Example

Card loader can add a spinning loader to any .card.

Methods

materialadmin.App.addCardLoader(card)

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

var card = $('.card');
materialadmin.App.addCardLoader(card);

materialadmin.App.removeCardLoader(card)

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

var card = $('.card');
materialadmin.App.removeCardLoader(card);

Card remove

Example

Removing a card from stage is easy with this method.

Methods

materialadmin.App.removeCard(card)

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

var card = $('.card');
materialadmin.App.removeCard(card);

DataTables

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 <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> 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 Material Admin which can be located in:

<script src="materialadmin/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 . Material Admin 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 an <th> element:

If you add the class .sort-alpha to an <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. Material Admin has provided a stylesheet for the TableTools.

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

Also remember to include the TableTools Javascript.

<script src="assets/js/libs/DataTables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>

ColVis

ColVis is another one of these extras. Material Admin has provided a stylesheet for ColVis.

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

Also remember to include the ColVis Javascript.

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

gmaps.js

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

Example

You can view basic examples of gmaps.js here

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript

<script src="assets/js/libs/gmaps/gmaps.js"></script>

Javascript

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

var map = new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});

Html

The Javascript is tied to an element in the body of your page. To make the map visible, your <div> element needs to have a fixed height. For this you can use one of the height-* classes

<div id="map" class="height-5"></div>

Flot charts

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 <!-- Additional JS includes --> 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 which 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>

FullCalendar

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 <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> 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/moment/moment.min.js"></script>
<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 Material Admin which can be located in:

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

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>

jQuery Knob

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 <!-- Additional JS includes --> 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 = materialadmin.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

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

<!-- Styles for the progress indicator -->
<div class="knob knob-primary-dark">..</div>
<div class="knob knob-primary">..</div>
<div class="knob knob-primary-light">..</div>
<div class="knob knob-primary-bright">..</div>
<div class="knob knob-accent-dark">..</div>
<div class="knob knob-accent">..</div>
<div class="knob knob-accent-light">..</div>
<div class="knob knob-accent-bright">..</div>
<div class="knob knob-default-dark">..</div>
<div class="knob knob-default">..</div>
<div class="knob knob-default-light">..</div>
<div class="knob knob-default-bright">..</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>
<!-- Styles for the track -->
<div class="knob knob-primary-dark-track">..</div>
<div class="knob knob-primary-track">..</div>
<div class="knob knob-primary-light-track">..</div>
<div class="knob knob-primary-bright-track">..</div>
<div class="knob knob-accent-dark-track">..</div>
<div class="knob knob-accent-track">..</div>
<div class="knob knob-accent-light-track">..</div>
<div class="knob knob-accent-bright-track">..</div>
<div class="knob knob-default-dark-track">..</div>
<div class="knob knob-default-track">..</div>
<div class="knob knob-default-light-track">..</div>
<div class="knob knob-default-bright-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>
<!-- You can combine these styles like so: -->
<div class="knob knob-primary knob-primary-dark-track">..</div>

jQuery Sparklines

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 <!-- Additional JS includes --> 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>

Micro-Templating

Micro-Templating is a super-simple templating function that is fast, caches quickly, and is easy to use. Micro-Templating provides documentation on their website .

Example

You can view basic examples of Micro-Templating here

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript

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

Morris.js

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 <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> 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="#0aa89e"></div>

nanoScroll

The jQuery plugin nanoScroller.js offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website.
nanoScroll provides examples on their website .

Example

nanoScroller is integrated in Material Admin. You just have to add the class .scroll to an element, restrict it's height, and nanoScroll will be added.

<div class="card card-outlined style-primary">
	<div class="card-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 <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript

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

Nestable

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 <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> 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 Material Admin which can be located in:

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

HTML

The Javascript is tied to an element in the body of your page.
Material Admin 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>

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs. Rickshaw provides documentation on their website .

Example

You can view a basic example of Rickshaw here .

Getting started

Dependencies

The first step is to have the right JavaScript and CSS files included.
All additional CSS should be included after <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional CSS

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

Additional Javascript

<script src="assets/js/libs/d3/d3.v3.js"></script>
<script src="assets/js/libs/rickshaw/rickshaw.min.js"></script>

Javascript

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

var graph = new Rickshaw.Graph(options);
graph.render();

Html

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

<div id="chart"></div>

Skycons

Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. Skycons provides documentation on github .

Example

You can view a basic example of Skycons here .

Getting started

Dependencies

The first step is to have the right JavaScript files included.
All additional Javascripts should be included after <!-- Additional JS includes --> which can be seen in getting started .

Additional Javascript

<script src="assets/js/libs/skycons/skycons.js"></script>

Javascript

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

var skycons = new Skycons({"color": "black"});
skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);
skycons.play();

Html

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

<canvas id="icon1" width="128" height="128"></canvas>

Toastr

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 <!-- Additional CSS includes --> which can be seen in getting started .
All additional Javascripts should be included after <!-- Additional JS includes --> 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 Material Admin which can be located in:

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