Boostbox

File Upload widget with multiple file selection, drag & drop support, progress bar, validation and preview images, audio and video for jQuery. File Upload provides documentation on GitHub .

Example

You can view a basic example of the File Upload 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/blueimp-file-upload/jquery.fileupload.css">

Additional Javascript

<script src="assets/js/libs/blueimp-file-upload/vendor/jquery.ui.widget.js"></script>
<script src="assets/js/libs/blueimp-file-upload/vendor/tmpl.min.js"></script>
<script src="assets/js/libs/blueimp-file-upload/vendor/load-image.min.js"></script>
<script src="assets/js/libs/blueimp-file-upload/vendor/jquery.blueimp-gallery.min.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.iframe-transport.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload-process.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload-image.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload-audio.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload-video.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload-validate.js"></script>
<script src="assets/js/libs/blueimp-file-upload/jquery.fileupload-ui.js"></script>

Javascript

Once you have your dependencies, you need to write the JavaScript code wich can be found in the following file:

<script src="assets/js/libs/blueimp-file-upload/main.js"></script>

HTML

The Javascript is tied to a form. Inside the form you can add a .row with basic Bootstrap components. In the example, the buttons are a .btn-group. Below the .btn-group a .progress bar is added.

<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
	<div class="row fileupload-buttonbar">
		<div class="col-lg-7">
			<div class="btn-group">
				<span class="btn btn-success btn-rounded fileinput-button">
					<i class="glyphicon glyphicon-plus"></i>
					<span>Add files...</span>
					<input type="file" name="files[]" multiple="">
				</span>
				<button type="submit" class="btn btn-primary btn-rounded start">
					<i class="glyphicon glyphicon-upload"></i>
					<span>Start upload</span>
				</button>
				<button type="reset" class="btn btn-warning btn-rounded cancel">
					<i class="glyphicon glyphicon-ban-circle"></i>
					<span>Cancel upload</span>
				</button>
				<button type="button" class="btn btn-danger btn-rounded delete">
					<i class="glyphicon glyphicon-trash"></i>
					<span>Delete</span>
				</button>
			</div>
			<input type="checkbox" class="toggle">
			<span class="fileupload-process"></span>
		</div>
		<div class="col-lg-5 fileupload-progress fade">
			<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
				<div class="progress-bar progress-bar-success" style="width:0%;"></div>
			</div>
			<div class="progress-extended">&nbsp;</div>
		</div>
	</div>
	<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>

Templates

To make the uploads or downloads visible, the Fileupload uses javascript templates:

Upload template

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
	<tr class="template-upload fade">
		<td>
			<span class="preview"></span>\n\
		</td>
		<td>
			<p class="name">{%=file.name%}</p>
			<strong class="error text-danger"></strong>
		</td>
		<td>
			<p class="size">Processing...</p>
			<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
				<div class="progress-bar progress-bar-success" style="width:0%;"></div>\n\
			</div>
		</td>
		<td>
			{% if (!i && !o.options.autoUpload) { %}
			<button class="btn btn-primary start" disabled>
				<i class="glyphicon glyphicon-upload"></i>
				<span>Start</span>
			</button>
			{% } %}
			{% if (!i) { %}
			<button class="btn btn-warning cancel">
				<i class="glyphicon glyphicon-ban-circle"></i>
				<span>Cancel</span>
			</button>
			{% } %}
		</td>
	</tr>
{% } %}
</script>

Download template

<script id="template-download" type="text/x-tmpl">
{% verbatim %}
{% for (var i=0, file; file=o.files[i]; i++) { %}
	<tr class="template-download fade">
		<td>
			<span class="preview">
				{% if (file.thumbnailUrl) { %}
				<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
				{% } %}
			</span>
		</td>
		<td>
			<p class="name">
				{% if (file.url) { %}
				<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
				{% } else { %}
				<span>{%=file.name%}</span>
				{% } %}
			</p>
			{% if (file.error) { %}
			<div><span class="label label-danger">Error</span> {%=file.error%}</div>
			{% } %}
		</td>
		<td>
			<span class="size">{%=o.formatFileSize(file.size)%}</span>
		</td>
		<td>
			{% if (file.deleteUrl) { %}
			<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
				<i class="glyphicon glyphicon-trash"></i>
				<span>Delete</span>
			</button>
			<input type="checkbox" name="delete" value="1" class="toggle">
			{% } else { %}
			<button class="btn btn-warning cancel">
				<i class="glyphicon glyphicon-ban-circle"></i>
				<span>Cancel</span>
			</button>
			{% } %}
		</td>
	</tr>
{% } %}
{% endverbatim %}
</script>

Adds a color picker to a field or any other element. Bootstrap Colorpicker provides documentation on GitHub .

Example

You can view a basic example of the Colorpicker 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/bootstrap-colorpicker/bootstrap-colorpicker.css">

Additional Javascript

<script src="assets/js/libs/bootstrap-colorpicker/bootstrap-colorpicker.min.js"></script>

Javascript

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

<input type="text" class="demo1" value="#5367ce" />
<script>
    $(function(){
        $('.demo1').colorpicker();
    });
</script>

jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Bootstrap Tags Input provides documentation on GitHub .

Example

You can view a basic example of the Colorpicker 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/bootstrap-tagsinput/bootstrap-tagsinput.css">

Additional Javascript

<script src="assets/js/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>

Html

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

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. CKEditor provides documentation on their website .

Example

You can view a basic example of CKEditor 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/ckeditor/ckeditor.js"></script>
<script src="assets/js/libs/ckeditor/adapters/jquery.js"></script>

Javascript

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

$( '#ckeditor' ).ckeditor();

Html

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

<textarea id="ckeditor">
	...
</textarea>

WYSIHTML5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. WYSIHTML5 provides documentation on GitHub .

Example

You can view a basic example of WYSIHTML5 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/wysihtml5/wysihtml5.css">

Additional Javascript

<script src="assets/js/libs/wysihtml5/advanced.js"></script>
<script src="assets/js/libs/wysihtml5/wysihtml5-0.4.0pre.min.js"></script>

Javascript

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

var editor = new wysihtml5.Editor("wysiwyg", {
	toolbar: "toolbar",
	parserRules: wysihtml5ParserRules
});
boostbox.App.monitorWysihtml5(editor);

Html

WYSIHTML5 is applied to a textarea element:

<textarea id="wysiwyg" class="form-control control-12-rows">
	...
</textarea>

WYSIHTML5 needs a custom toolbar wich you can provide with the code below. Notice the toolbar is made with standard Bootstrap classes and can therefore be easily modified.

<div id="toolbar" class="wysihtml5-toolbar" style="display: none;">
	<div class="btn-group">
		<a class="btn btn-default btn-equal" data-wysihtml5-command="bold" title="CTRL+B"><i class="fa fa-bold"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="italic" title="CTRL+I"><i class="fa fa-italic"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="underline" title="CTRL+u"><i class="fa fa-underline"></i></a>
	</div>
	<div class="btn-group">
		<a class="btn btn-default" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1"><strong>H1</strong></a>
		<a class="btn btn-default" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2"><strong>H2</strong></a>
	</div>
	<div class="btn-group">
		<a class="btn btn-default btn-equal" data-wysihtml5-command="justifyLeft"><i class="fa fa-align-left"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="justifyCenter"><i class="fa fa-align-center"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="justifyRight"><i class="fa fa-align-right"></i></a>
	</div>
	<div class="btn-group">
		<a class="btn btn-default btn-equal" data-wysihtml5-command="insertUnorderedList"><i class="fa fa-list-ul"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="insertOrderedList"><i class="fa fa-list-ol"></i></a>
	</div>
	<div class="btn-group">
		<a class="btn btn-default btn-equal" data-wysihtml5-command="createLink"><i class="fa fa-link"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="insertImage"><i class="fa fa-picture-o"></i></a>
	</div>
	<div class="btn-group">
		<a class="btn btn-default btn-equal" data-wysihtml5-command="undo"><i class="fa fa-undo"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="redo"><i class="fa fa-repeat"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-command="insertSpeech"><i class="fa fa-microphone"></i></a>
		<a class="btn btn-default btn-equal" data-wysihtml5-action="change_view"><i class="fa fa-code"></i></a>
	</div>
	<div class="panel-bar">
		<div data-wysihtml5-dialog="createLink" style="display: none;">
			<div class="form-inline">
				<label>Link:</label>
				<input class="form-control control-width-normal" data-wysihtml5-dialog-field="href" value="http://">

				<a class="btn btn-primary" data-wysihtml5-dialog-action="save">OK</a>&nbsp;
				<a class="btn btn-default" data-wysihtml5-dialog-action="cancel">Cancel</a>
			</div>
		</div>
		<div data-wysihtml5-dialog="insertImage" style="display: none;">
			<div class="form-inline">
				<label>Image:</label>
				<input class="form-control control-width-normal" data-wysihtml5-dialog-field="src" value="http://">
				<label>Align:</label>
				<select class="form-control control-width-small" data-wysihtml5-dialog-field="className">
					<option value="">default</option>
					<option value="wysiwyg-float-left">left</option>
					<option value="wysiwyg-float-right">right</option>
				</select>
				<a class="btn btn-primary" data-wysihtml5-dialog-action="save">OK</a>&nbsp;
				<a class="btn btn-default" data-wysihtml5-dialog-action="cancel">Cancel</a>
			</div>
		</div>
	</div><!--end .panel-bar -->
</div><!--end #wysihtml5-toolbar -->

Adds a datepicker to a field or any other element. Bootstrap datepicker provides documentation on their website .

Example

You can view a basic example of the Colorpicker 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/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

Additional Javascript

<script src="assets/js/libs/moment/moment.min.js"></script>
<script src="assets/js/libs/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>

Javascript

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

$('#datepicker').datepicker()

Html

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

<input type="text" class="form-control" id="datepicker">

jquery.inputmask is a jQuery plugin which creates an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, etc.
jquery.inputmask provides documentation on GitHub .

Example

You can view a basic example of jquery.inputmask 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/inputmask/jquery.inputmask.bundle.min.js"></script>

Javascript

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

$(":input").inputmask();

Html

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

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
jQuery Validation provides documentation on their website .

Example

You can view a basic example of jQuery Validation 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-validation/dist/jquery.validate.min.js"></script>
<script src="assets/js/libs/jquery-validation/dist/additional-methods.min.js"></script>

Javascript

You can enable validation by adding attributes to input elements.

This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
Bootstrap Wizard provides documentation on GitHub .

Example

You can view a basic example of Bootstrap Wizard 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/wizard/wizard.css">

Additional Javascript

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

Javascript

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

$('#wizard').bootstrapWizard(options);

Html

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

<div id="wizard" class="form-wizard form-wizard-horizontal">
	<form class="form-horizontal form-bordered" role="form" novalidate="novalidate">
		<div class="form-wizard-nav">
			<div class="progress"><div class="progress-bar progress-bar-primary"></div></div>
			<ul class="nav nav-justified">
				<li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span> <span class="title">Location information</span></a></li>
				<li><a href="#tab2" data-toggle="tab"><span class="step">2</span> <span class="title">Address information</span></a></li>
				<li><a href="#tab3" data-toggle="tab"><span class="step">3</span> <span class="title">User settings</span></a></li>
				<li><a href="#tab4" data-toggle="tab"><span class="step">4</span> <span class="title">Confirmation</span></a></li>
			</ul>
		</div><!--end .form-wizard-nav -->
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">
				...
			</div><!--end #tab1 -->
			<div class="tab-pane" id="tab2">
				...
			</div><!--end #tab2 -->
			<div class="tab-pane" id="tab3">
				...
			</div><!--end #tab3 -->
			<div class="tab-pane" id="tab4">
				...
			</div><!--end #tab4 -->
		</div><!--end .tab-content -->
		<ul class="pager wizard">
			<li class="previous first"><a href="javascript:void(0);">First</a></li>
			<li class="previous"><a href="javascript:void(0);">Previous</a></li>
			<li class="next last"><a href="javascript:void(0);">Last</a></li>
			<li class="next"><a href="javascript:void(0);">Next</a></li>
		</ul>
	</form>
</div><!--end #rootwizard -->

User-friendly drop-in replacement for the standard <select> with multiple attribute activated.
Multi select provides documentation on their website GitHub .

Example

You can view a basic example of Multi select 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/multi-select/multi-select.css">

Additional Javascript

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

Javascript

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

$('#multi-select').multiSelect({});

Html

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

<select multiple="multiple" id="multi-select" name="my-select[]">
	<option value='elem_1'>elem 1</option>
	<option value='elem_2'>elem 2</option>
	...
</select>

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Select2 provides documentation on GitHub .

Example

You can view a basic example of Select2 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/select2/select2.css">

Additional Javascript

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

Javascript

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

$("#select2").select2();

Html

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

<select id="select2">
	<option value="AL">Alabama</option>
	...
	<option value="WY">Wyoming</option>
</select>

Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.
Typeahead.js provides documentation on GitHub .

Example

You can view a basic example of the Typeahead.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/typeahead/typeahead.css">

Additional Javascript

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

Javascript

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

$('#typeahead').typeahead(options);

Html

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

<input type="text" id="typeahead" class="form-control" data-source="data/countries.json" placeholder="Countries">

JavaScript forms

File Upload

Example

Getting started

Dependencies

Javascript

HTML

Templates

Bootstrap Colorpicker

Example

Getting started

Dependencies

Javascript

Bootstrap Tags Input

Example

Getting started

Dependencies

Html

CKEditor

Example

Getting started

Dependencies

Javascript

Html

WYSIHTML5

Example

Getting started

Dependencies

Javascript

Html

Bootstrap datepicker

Example

Getting started

Dependencies

Javascript

Html

jquery.inputmask

Example

Getting started

Dependencies

Javascript

Html

jQuery Validation

Example

Getting started

Dependencies

Javascript

Bootstrap Wizard

Example

Getting started

Dependencies

Javascript

Html

Multi select

Example

Getting started

Dependencies

Javascript

Html

Select2

Example

Getting started

Dependencies

Javascript

Html

Typeahead.js

Example

Getting started

Dependencies

Javascript

Html