Flot

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

Usage

Include jquery.flot.js into your document.

<script src="../../vendors/charts/flot/jquery.flot.js"></script>

The markup

<div id="doc-line-chart" style="width:50%;height:300px" ></div>

Call the plugin

Finally you need to initiate the plugin by adding the following code.

var d1 = [[0,30],[1,35],[2,35],[3,30],[4,30],[5,35],[6,32],[7,37],[8,30],[9,35],[10,30],[11,31]];var d2 = [[0,50],[1,40],[2,45],[3,60],[4,50],[5,50],[6,60],[7,55],[8,50],[9,50],[10,60],[11,35]];var d3 = [[0,40],[1,50],[2,35],[3,25],[4,40],[5,45],[6,55],[7,50],[8,35],[9,40],[10,48],[11,40]];//Chart Optionsvar options = {	series: {		shadowSize: 0,		lines: {			show: true,		},	},	grid: {		borderWidth: 1,		labelMargin:10,		mouseActiveRadius:6,		borderColor: '#eee',		show : true,		hoverable : true,		clickable : true	},	xaxis: {		tickColor: '#fff',		tickDecimals: 0,		font :{			lineHeight: 13,			style: "normal",			color: "#9f9f9f"		},		shadowSize: 0,		ticks: [[0,"Jan"], [1,"Feb"], [2,"Mar"], [3,"Apr"], [4,"May"], [5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Oct"], [10,"Nov"], [11,"Dec"]]	},	yaxis: {		tickColor: '#eee',		tickDecimals: 0,		font :{			lineHeight: 13,			style: "normal",			color: "#9f9f9f",		},		shadowSize: 0	},	legend: {		container: '.flc-line',		backgroundOpacity: 0.5,		noColumns: 0,		backgroundColor: "white",		lineWidth: 0	},	colors: ["#6baa01", "#33bdda", "#008ee4"]};// Create a regular Line Chart$.plot($("#doc-line-chart"), [	{data: d1, lines: { show: true  }, label: 'Product A', stack: true, color: '#F9D900' },	{data: d2, lines: { show: true }, label: 'Product B', stack: true, color: '#A9E200' },	{data: d3, lines: { show: true }, label: 'Product C', stack: true, color: '#22BAD9' }], options);

Please refer to http://www.flotcharts.org//for detailed documentation

Sweet Alert2 (Dialogs)

A beautiful and customizable replacement for JavaScript's popup boxes Supported fork of t4t5/sweetalert. SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable. Here is a basic example

swal("Here is a message!")

Please refer to http://limonte.github.io/sweetalert2/for detailed documentation

Amaze use Paper design style for buttons, with various colors and options.

BasicButtons

We use any of the available button classes to quickly create a styled button.

BootstrapDefault, disabled and customized Paper design Buttons

<button type="button" class="btn btn-default">Default</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-success  btn-fill">Button Fill</button>

ButtonSizes

You can have larger or smaller buttons by adding sizing classes.

<button class="btn btn-default btn-lg">Large</button><button class="btn btn-default">Default</button><button class="btn btn-default btn-sm">Small</button><button class="btn btn-default btn-xs">Extra Small</button>

ButtonDropdowns

<div class="dropdown">	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown		<span class="caret"></span>	</button>	<ul class="dropdown-menu" role="menu">		<li><a href="#">Dropdown link</a></li>		<li><a href="#">Dropdown link</a></li>	</ul></div>

ButtonIcons and Shapes

<button class="btn btn-primary btn-icon-text"><i class="ti-home"></i> Home</button><button class="btn btn-primary btn-round"><i class="ti-heart"></i></button>

ButtonGroups

<div class="btn-group btn-group-lg" role="group">	<button type="button" class="btn btn-primary">Left</button>	<button type="button" class="btn btn-primary">Middle</button>	<button type="button" class="btn btn-primary">Right</button></div>

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7.

Here is an example of an icon:

<iclass="ti-heart"></i>

See Themify Icons

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Button trigger modal --><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">  Launch demo modal</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">	<div class="modal-dialog" role="document">		<div class="modal-content">			<div class="modal-header">				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>				<h4 class="modal-title" id="myModalLabel">Modal title</h4>			</div>			<div class="modal-body">			Content goes here			</div>			<div class="modal-footer">				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>				<button type="button" class="btn btn-primary">Save changes</button>			</div>		</div>	</div></div>

<a data-toggle="modal" href="#modalDefault" class="btn btn-sm btn-default">Modal -	Default</a>

Bootstrap Notify- This plugin helps to turn standard bootstrap alerts into "growl" like notifications.

<div class="alert alert-info">	<button type="button" aria-hidden="true" class="close">		<i class="material-icons">close</i>	</button>	<span>This is a notification with close button.</span></div>

HTML

<button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>

Javascript

<script>showNotification: function(from, align){	type = ['','info','success','warning','danger','rose','primary'];	color = Math.floor((Math.random() * 6) + 1);	$.notify({		icon: "notifications",		message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."	},{		type: type[color],		timer: 3000,		placement: {			from: from,			align: align		}	});}</script>

Headings

All HTML headings, <h1>through <h6>, are available. .h1through .h6classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

<h1>h1. Amaze heading</h1><h2>h2. Amaze heading</h2><h3>h3. Amaze heading</h3><h4>h4. Amaze heading</h4><h5>h5. Amaze heading</h5><h6>h6. Amaze heading</h6>

Paragraph

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

<p>I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.</p>

Quote

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Maya Angelou

<blockquote>	<p>		I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.	</p>	<small>		Maya Angelou	</small></blockquote>

Muted Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-muted">	To live is the rarest thing in the world. Most people exist, that is all.</p>

Primary Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-primary">	To live is the rarest thing in the world. Most people exist, that is all. </p>

Info Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-info">	To live is the rarest thing in the world. Most people exist, that is all. </p>

Success Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-success">	To live is the rarest thing in the world. Most people exist, that is all. </p>

Warning Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-warning">	To live is the rarest thing in the world. Most people exist, that is all.</p>

Danger Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-danger">	To live is the rarest thing in the world. Most people exist, that is all. </p>

Small Tag

<h2>	<h5>Small Tag</h5>	Header with small subtitle	<br>	<small>Use "small" tag for the headers</small></h2>

Lists

Unordered

A list of items in which the order does notexplicitly matter.

<ul>	<li>...	</li></ul>

Ordered

A list of items in which the order doesexplicitly matter.

<ol>	<li>...	</li></ol>

Ordered - Roman

<ol type="i">	<li>...	</li></ol>

Custom - 1

<ul class="clist clist-angle">	<li>...</li></ul>

Custom - 2

<ul class="clist clist-check">	<li>...</li></ul>

DateTime Picker

Extend form controls by adding text or buttons before, after, or on both sides of any text-based inputs.

Basic Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

<div class="container">    <div class="row">        <div class='col-sm-6'>            <div class="form-group">                <div class='input-group date' id='datetimepicker1'>                    <input type='text' class="form-control" />                    <span class="input-group-addon">                        <span class="glyphicon glyphicon-calendar"></span>                    </span>                </div>            </div>        </div>        <script type="text/javascript">            $(function () {                $('#datetimepicker1').datetimepicker();            });        </script>    </div></div>

Custom Select

A custom select for Bootstrap using it's Dropdown component

Basic Example

HTML

<legend>Select</legend>	<div class="col-sm-6">		<p>Basic Example</p>		<div class="form-group">			<div class="select">				<select class="form-control">					<option>Select an Option</option>					<option>Option 1</option>					<option>Option 2</option>					<option>Option 3</option>				</select>			</div>		</div>	</div>

Disabled State

Javascript

<script src="../../vendors/bootstrap-select/dist/js/bootstrap-select.js"></script>

HTML

<div class="col-sm-6">		<p>Disabled State</p>		<div class="form-group">			<div class="select">				<select class="form-control" disabled>					<option>Select an Option</option>					<option>Option 1</option>					<option>Option 2</option>					<option>Option 3</option>				</select>			</div>		</div>	</div>

HTML

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7">			<option disabled selected>Choose city</option>			<option value="2">Foobar</option>			<option value="3">Is great</option>		</select>

HTML

<select class="selectpicker" data-style="select-with-transition" multiple title="Choose City" data-size="7">			<option disabled> Choose city</option>			<option value="2">Paris </option>			<option value="3">Bucharest</option>			<option value="4">Rome</option>			<option value="5">New York</option>			<option value="6">Miami </option>		</select>

Toggle Switch

Default and Disabled options. Use the given data attribute to change the color scheme of the Toggle Switch

<input type="checkbox" checked data-toggle="switch" class="ct-primary"/><input type="checkbox" data-toggle="switch" />

Input Slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.

Javascript

<script src="../../vendors/nouislider/distribute/nouislider.min.js"></script>

HTML

<div id="input-slider" class="input-slider m-b-25"></div>

Simple File Input

The file input plugin allows you to create a visually appealing file or image input widgets

Javascript

<script src="../../vendors/fileinput/fileinput.min.js"></script>

HTML

<div class="fileinput fileinput-new" data-provides="fileinput">	<span class="btn btn-primary btn-file m-r-10">		<span class="fileinput-new">Select file</span>		<span class="fileinput-exists">Change</span>		<input type="file" name="...">	</span>	<span class="fileinput-filename"></span>	<a href="#" class="close fileinput-exists" data-dismiss="fileinput">&times;</a></div>

Javascript

<link href="../../vendors/dropzone/dropzone.min.css" rel="stylesheet"><script src="../../vendors/dropzone/dropzone.min.js"></script>

HTML

<div id="dropzone">	<form action="/upload" class="dropzone needsclick" id="demo-upload">		<div class="dz-message needsclick">		Drop files here or click to upload.<br />		<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>		</div>	</form></div>

Image Preview

HTML

<div class="fileinput fileinput-new" data-provides="fileinput">	<div class="fileinput-preview thumbnail" data-trigger="fileinput"></div>	<div>		<span class="btn btn-info btn-file">			<span class="fileinput-new">Select image</span>			<span class="fileinput-exists">Change</span>			<input type="file" name="...">		</span>		<a href="#" class="btn btn-danger fileinput-exists"		   data-dismiss="fileinput">Remove</a>	</div></div>

Basic Example

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Input with success

<div class="form-group label-floating is-empty has-success">	<label class="control-label"></label>	<input type="text" class="form-control" value="Success">	<span class="material-icons form-control-feedback">done</span></div>

Input with error

<div class="form-group label-floating is-empty has-error">	<label class="control-label"></label>	<input type="text" class="form-control" value="Error Input">	<span class="material-icons form-control-feedback">clear</span></div>

<input class="form-control" type="text" name="required" required="required"/><input class="form-control" type="text" name="email" email="true"/><input class="form-control" type="text" name="number" number="true"/><input class="form-control" type="text" name="url" url="true" /><input class="form-control" id="idSource" type="text" placeholder="#idSource"/><input class="form-control" id="idDestination" type="text" placeholder="#idDestination" equalTo="#idSource"/>

<input class="form-control" type="text" name="min_length" minLength="5"/><input class="form-control" type="text" name="max_length" maxLength="5"/><input class="form-control" type="text" name="range" range="[6,10]"/><input class="form-control" type="text" name="min" min="6"/><input class="form-control" type="text" name="max" max="6"/>

Form Wizard

<div id="formwizard_simple" class="form-wizard form-wizard-horizontal">	<form class="form floating-label">		<div class="form-wizard-nav">			<div class="progress" style="width: 75%;"><div class="progress-bar progress-bar-primary" style="width: 0%;"></div></div>			<ul class="nav nav-justified nav-pills">				<li class="active"><a href="#fws_tab1" data-toggle="tab"><span class="step">1</span> <span class="form-wizard-title">LOCATION</span></a></li>				<li><a href="#fws_tab2" data-toggle="tab"><span class="step">2</span> <span class="form-wizard-title">ADDRESS</span></a></li>				<li><a href="#fws_tab3" data-toggle="tab"><span class="step">3</span> <span class="form-wizard-title">SETTINGS</span></a></li>				<li><a href="#fws_tab4" data-toggle="tab"><span class="step">4</span> <span class="form-wizard-title">CONFIRM</span></a></li>			</ul>		</div><!--end .form-wizard-nav -->		<div class="tab-content clearfix p-30">			<div class="tab-pane active" id="fws_tab1">			</div><!--end #tab1 -->			<div class="tab-pane" id="fws_tab2">			</div><!--end #tab2 -->			<div class="tab-pane" id="fws_tab3">			</div><!--end #tab3 -->			<div class="tab-pane" id="fws_tab4">			</div><!--end #tab4 -->			<ul class="pager wizard ">				<li class="previous first disabled"><a class="btn-raised" href="javascript:void(0);">First</a></li>				<li class="previous disabled"><a class="btn-raised" href="javascript:void(0);">Previous</a></li>				<li class="next last"><a class="btn-raised" href="javascript:void(0);">Last</a></li>				<li class="next"><a class="btn-raised" href="javascript:void(0);">Next</a></li>			</ul>		</div><!--end .tab-content -->	</form></div><!--end #rootwizard -->

Validation Form Wizard

<div id="formwizard_validation" class="form-wizard form-wizard-horizontal">	<form class="form floating-label form-validation" role="form" novalidate="novalidate">		<div class="form-wizard-nav">			<div class="progress" style="width: 75%;"><div class="progress-bar progress-bar-primary" style="width: 0%;"></div></div>			<ul class="nav nav-justified nav-pills">				<li class="active"><a href="#fwv_step1" data-toggle="tab"><span class="step">1</span> <span class="form-wizard-title">PERSONAL</span></a></li>				<li><a href="#fwv_step2" data-toggle="tab"><span class="step">2</span> <span class="form-wizard-title">ACCOUNT</span></a></li>				<li><a href="#fwv_step3" data-toggle="tab"><span class="step">3</span> <span class="form-wizard-title">SETTINGS</span></a></li>				<li><a href="#fwv_step4" data-toggle="tab"><span class="step">4</span> <span class="form-wizard-title">CONFIRM</span></a></li>			</ul>		</div><!--end .form-wizard-nav -->		<div class="tab-content clearfix p-30">			<div class="tab-pane active" id="fwv_step1">			</div><!--end #step1 -->			<div class="tab-pane" id="fwv_step2">			</div><!--end #step2 -->			<div class="tab-pane" id="fwv_step3">			</div><!--end #step3 -->			<div class="tab-pane" id="fwv_step4">			</div><!--end #step4 -->			<ul class="pager wizard">				<li class="previous first disabled"><a class="btn-raised" href="javascript:void(0);">First</a></li>				<li class="previous disabled"><a class="btn-raised" href="javascript:void(0);">Previous</a></li>				<li class="next last"><a class="btn-raised" href="javascript:void(0);">Last</a></li>				<li class="next"><a class="btn-raised" href="javascript:void(0);">Next</a></li>			</ul>		</div><!--end .tab-content -->	</form></div><!--end #rootwizard -->

<form method="#" action="#">	<div class="form-group label-floating">		<label class="control-label">Email address</label>		<input type="email" class="form-control">	</div>	<div class="form-group label-floating">		<label class="control-label">Password</label>		<input type="password" class="form-control">	</div>	<div class="checkbox">		<label>			<input type="checkbox" name="optionsCheckboxes"> Subscribe to newsletter		</label>	</div>	<button type="submit" class="btn btn-fill btn-default">Submit</button></form>

<form class="form-horizontal">	<div class="row">		<label class="col-md-3 label-on-left">Email</label>		<div class="col-md-9">			<div class="form-group label-floating is-empty">				<label class="control-label"></label>				<input type="email" class="form-control">			</div>		</div>	</div>	<div class="row">		<label class="col-md-3 label-on-left">Password</label>		<div class="col-md-9">			<div class="form-group label-floating is-empty">				<label class="control-label"></label>				<input type="password" class="form-control">			</div>		</div>	</div>	<div class="row">		<label class="col-md-3"></label>		<div class="col-md-9">			<div class="checkbox form-horizontal-checkbox">				<label>					<input type="checkbox" name="optionsCheckboxes"> Remember Me				</label>			</div>		</div>	</div>	<div class="row">		<label class="col-md-3"></label>		<div class="col-md-9">			<div class="form-group form-button">				<button type="submit" class="btn btn-fill btn-default">Sign in</button>			</div>		</div>	</div></form>

DataTables Table plug-in for jQuery

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

include CSS and Javascript files

<head>	<link href="../../vendors/DataTables/jquery.dataTables.min.css" rel="stylesheet"></head>

<body>	....	<!-- jQuery -->		<script src="../../vendors/jquery/dist/jquery.min.js"></script>	<!-- DataTables.net plugins -->		<script src="../../vendors/DataTables/jquery.dataTables.min.js"></script></body>

HTML

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.

<table id="table_id" class="display">    <thead>        <tr>            <th>Column 1</th>            <th>Column 2</th>        </tr>    </thead>    <tbody>        <tr>            <td>Row 1 Data 1</td>            <td>Row 1 Data 2</td>        </tr>        <tr>            <td>Row 2 Data 1</td>            <td>Row 2 Data 2</td>        </tr>    </tbody></table>

If you are generating your HTML document using a server-side program, such as a PHP script, a Ruby script, a C# program or anything else - all they need to do is output your table like this. This is exactly what you would have for a normal HTML table, although sometimes you might need to add the theadand tbodytags, as these aren't always used (they allow DataTables to know what should be used for the column headers and the click-to-order controls).

Note that DataTables can actually generate the theadand tbodyfor you, along with all of the rows and cells of the table, if you are using Ajax sourced data, but for the moment we'll focus on a plain HTML. For more information about the different data sources DataTables can use, please see the data sourcessection

Javascript

$("#myTable").DataTable();