Forms - Bootstrap Colorpicker

Plugin Information

A nice and customizable colorpicker plugin for Twitter Bootstrap 3

Plugin Name: Bootstrap Colorpicker
Author: Mjolnic
License: MIT licensed
Website: http://mjolnic.com
Git Branch: mjolnic/bootstrap-colorpicker
Dependencies:
<link href="vendor/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/colorpicker/js/bootstrap-colorpicker.min.js"></script>

Colorpicker Element

Copy 

<button id="demo-cp-btn" class="btn btn-primary" data-color="#5384ce">Click to open me!</button>
Copy 

// on button
$('#demo-cp-btn').colorpicker({
    color: '#4a89dc'
});

Colorpicker Input

Copy 

<input id="demo-cp-input" type="text" class="form-control" value="#5367ce" />
Copy 

// on input
$('#demo-cp-input').colorpicker({
    color: '#4a89dc'
});

Colorpicker Addon

Copy 

<div id="demo-cp-addon" class="input-group cursor">
    <span class="input-group-addon"><i></i>
    </span>
    <input type="text" value="" class="form-control" />
</div>
Copy 

// with addon
$('#demo-cp-addon').colorpicker({
    color: '#4a89dc'
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://dimsemenov.com/docs

Forms - Bootstrap Datepicker

Plugin Information

Date/Time picker widget based on Twitters Bootstrap 3.

Plugin Name: Bootstrap Colorpicker
Author: Eonasdan
License: MIT licensed
Website: http://eonasdan.github.io
Git Branch: Eonasdan/bootstrap-datetimepicker
Dependencies:
<link href="vendor/plugins/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/datepicker/js/bootstrap-datetimepicker.js"></script>

Basic Datepicker

The simplest way to initilize a Datepicker

Copy 

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

// basic
$('#datetimepicker').datetimepicker();

Datepicker Addon

Copy 

<div class="input-group date" id="datetimepicker">
    <span class="input-group-addon cursor"><i class="fa fa-calendar"></i>
    </span>
    <input type="text" class="form-control">
</div>
Copy 

// with addon
$('#datetimepicker').datetimepicker();

Inline Datepicker

Copy 

<div id="datetimepicker">
    <input type="text" class="form-control" style="max-width: 250px;">
</div>
Copy 

// Inline
$('#datetimepicker').datetimepicker({
    defaultDate: "9/4/2014", 
    inline: true
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://eonasdan.github.io/bootstrap-datetimepicker/

Forms - Bootstrap Datepicker

Plugin Information

Date range picker component for Bootstrap 3.

Plugin Name: Bootstrap DateRangepicker
Author: Dan Grossman
License: MIT licensed
Website: http://www.dangrossman.info
Git Branch: dangrossman/bootstrap-daterangepicker
Dependencies:
<link href="vendor/plugins/daterange/daterangepicker.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/daterange/daterangepicker.js"></script>

Basic Setup

The simplest way to initilize a Daterangepicker

Copy 

<input type="text" class="form-control" name="daterangepicker" id="daterangepicker">
Copy 

// DateRangepicker Input
$('#daterangepicker1').daterangepicker();

DateRangepicker Addon

Copy 

<div class="input-group" id="daterangepicker">
    <input type="text" class="form-control">
    <span class="input-group-addon cursor"><i class="fa fa-calendar"></i>
    </span>
</div>
Copy 

// Set DateRangepicker Options
var rangeOptions = {
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
        'Last 7 Days': [moment().subtract('days', 6), moment()],
        'Last 30 Days': [moment().subtract('days', 29), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    },
    startDate: moment().subtract('days', 29),
    endDate: moment()
}

// DateRangepicker Component
$('#daterangepicker2').daterangepicker(
    rangeOptions,
    function(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
);

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: https://github.com/dangrossman/bootstrap-daterangepicker

Forms - Dropzone

Plugin Information

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Plugin Name: Dropzone
Author: Enyo
License: MIT licensed
Website: http://www.dropzonejs.com/
Git Branch: enyo/dropzone
Dependencies:
<link href="vendor/plugins/dropzone/css/dropzone.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/dropzone/dropzone.min.js"></script>

Basic Setup

Copy 

<form action="/file-upload" class="dropzone" id="dropZone" style="height: 250px;">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>
Copy 

Dropzone.options.dropZone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 0, // Max file size - in MB
    addRemoveLinks: true, // Toggle remove links
    dictDefaultMessage: '<i class="fa fa-cloud-upload"></i> \
     <span class="main-text"><b>Drop Files</b> to upload</span> <br /> \
     <span class="sub-text">(or click)</span> \
    ',
    dictResponseError: 'Server not Configured'
};

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://www.dropzonejs.com/#usage

Forms - FileUpload

Plugin Information

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

Plugin Name: Fileupload
Author: Jasny
License: MIT licensed
Website: http://jasny.github.io
Dependencies:
None Required
<script src="vendor/plugins/fileupload/fileupload.js"></script>

Basic Setup

You can also use the "Holder.js" plugin to create a temporary placeholder image.

Change Change
Copy 

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-preview thumbnail cursor mb15">
        <img src="../../assets/img/stock/5.jpg" title="placeholder img">
    </div>
    <span class="btn btn-primary btn-file btn-block">
      <span class="fileupload-new">Change</span>
      <span class="fileupload-exists">Change</span>
      <input type="file">
    </span>
</div>
Copy 

// None Required. Fileupload will autoattach to DOM instances

// You can use the code below if you wish to grant the
// FileUpload preview frame the ability to open onclick 
$('.fileupload-preview').on('click', function() {
    $('.btn-file > input').click();
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://jasny.github.io/bootstrap/javascript/#fileinput

Forms - Ladda Loading Buttons

Plugin Information

Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.

Plugin Name: Ladda Loaders
Author: Msurguy
License: MIT licensed
Website: http://msurguy.github.io
Git Branch: msurguy/ladda-bootstrap
Dependencies:
<link href="vendor/plugins/ladda/ladda.min.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/ladda/ladda.min.js"></script>

Loading Button

Copy 

<button type="button" class="btn btn-primary ladda-button" data-style="expand-right">
    <span class="ladda-label">Load Right</span>
</button>
Copy 

// Init Ladda Plugin on buttons
Ladda.bind('.ladda-button', {
    timeout: 3000
});

Progress Loading Button

Copy 

<button type="button" class="btn btn-primary ladda-button progress-button" data-style="expand-right">
    <span class="ladda-label">Load Right</span>
</button>
Copy 

// Bind progress buttons and simulate loading progress. Still requires ".ladda-button" class.
Ladda.bind('.progress-button', {
    callback: function(instance) {
        var progress = 0;
        var interval = setInterval(function() {
            progress = Math.min(progress + Math.random() * 0.1, 1);
            instance.setProgress(progress);

            if (progress === 1) {
                instance.stop();
                clearInterval(interval);
            }
        }, 200);
    }
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://msurguy.github.io/ladda-bootstrap/

Forms - JQuery Mask

Plugin Information

An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, etc.

Plugin Name: JQuery Mask
Author: Josh Bush
License: MIT licensed
Website: http://digitalbush.com
Dependencies:
None Required
<script src="vendor/plugins/jquerymask/jquery.maskedinput.min.js"></script>

Masking Examples

Copy 

<!-- masked date -->
<input type="text" id="maskedDate" class="form-control" maxlength="10" placeholder="11/11/1111">

<!-- masked time -->
<input type="text" id="maskedTime" class="form-control" maxlength="10" placeholder="00:00:00">

<!-- masked datetime -->
<input type="text" id="maskedDateTime" class="form-control" maxlength="10" placeholder="99/99/9999 00:00:00">

<!-- masked zip -->
<input type="text" id="maskedZip" class="form-control" maxlength="10" placeholder="99999-999">

<!-- masked phone -->
<input type="text" id="maskedPhone" class="form-control " maxlength="10" placeholder="(999) 999-9999">

<!-- masked money -->
<input type="text" id="maskedMoney" class="form-control" maxlength="10" placeholder="000.000.000.000">

<!-- masked TIN -->
<input type="text" id="maskedID" class="form-control" maxlength="10" placeholder="99999-999">

<!-- masked SSN -->
<input type="text" id="maskedSSN" class="form-control" maxlength="10" placeholder="999-99-9999">

<!-- masked eyescript -->
<input type="text" id="maskedScript" class="form-control" maxlength="10" placeholder="0ZZ.0ZZ.0ZZ.0ZZ">

<!-- custom mask -->
<input type="text" id="maskedCustom" class="form-control" maxlength="10" placeholder="1-22-333-4444">
Copy 

// Init jQuery masked inputs
$('#maskedDate').mask('99/99/9999');
$('#maskedTime').mask('99:99:99');
$('#maskedDatetime').mask('99/99/9999 99:99:99');
$('#maskedZip').mask('99999-999');
$('#maskedPhone').mask('(999) 999-9999');
$("#maskedMoney").mask("999,999,999.999");
$("#maskedID").mask("99-9999999");
$("#maskedSSN").mask("999-99-9999");
$("#maskedScript").mask("~9.99 ~9.99 999");
$("#maskedCustom").mask("9.99.999.9999");

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://digitalbush.com/projects/masked-input-plugin/

Forms - Tag Manager

Plugin Information

A jQuery plugin to create tag input fields using Twitters Bootstrap 3

Plugin Name: Tag Manager
Author: Max Favilli
License: MIT licensed
Website: http://welldonethings.com
Git Branch: max-favilli/tagmanager
Dependencies:
<link href="vendor/plugins/tagmanager/tagmanager.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/tagmanager/tagmanager.js"></script>

Basic Setup

Copy 

<!-- Tag Input Field -->
<input type="text" id="tagmanager" class="form-control" placeholder="Create a new tag..">

<!-- Tag Container  -->
<div class="tag-container tags"></div>
Copy 

// Init jQuery Tags Manager 
$("#tagmanager").tagsManager({
    tagsContainer: '.tags', // set tag container
    tagClass: 'tm-tag-primary', // set tag contextual
    prefilled: ["Tag 1", "Tag 2", "Tag 3"], // set initial tags
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://welldonethings.com/tags/manager/v3

Forms - JQuery Input Spinners

Plugin Information

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

Plugin Name: JQuery Spinners
Author: JQuery UI
License: MIT licensed
Website: https://jqueryui.com/spinner/
Documentation: http://api.jqueryui.com/spinner/
Dependencies:
None Required - In Core
None Required - In Core

Basic Spinner Setup

Copy 

<div class="form-group mw400">
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-level-up"></i>
    </span>
    <input id="spinner-basic" class="form-control ui-spinner-input" name="spinner" value="15" />
  </div>
</div>
Copy 

// Init jQuery spinner init - default
$("#spinner-basic").spinner();

Currency Spinner

Copy 

<div class="form-group mw400">
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-usd"></i>
    </span>
    <input id="spinner-currency" class="form-control ui-spinner-input" name="spinner" value="35" />
  </div>
</div>
Copy 

// Init jQuery spinner init - currency 
$("#spinner-currency").spinner({
  min: 5,
  max: 2500,
  step: 25,
  start: 1000,
  //numberFormat: "C"
});

Decimal Spinner

Copy 

<div class="form-group mw400">
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-signal"></i>
    </span>
    <input id="spinner-decimal" class="form-control ui-spinner-input" name="spinner" value="13.5" />
  </div>
</div>
Copy 

// Init jQuery spinner init - decimal  
$("#spinner-decimal").spinner({
  step: 0.01,
  numberFormat: "n"
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Advanced Examples: https://jqueryui.com/spinner/#default
Documentation: http://api.jqueryui.com/spinner/

Forms - Select2

Plugin Information

The jQuery replacement for select boxes

Plugin Name: Select2
Author: Kevin Brown
License: MIT licensed
Website: https://select2.github.io/
Git Branch: select2/select2
Dependencies:
<link href="vendor/plugins/select2/css/core.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/select2/select2.min.js"></script>

Basic Single

Copy 

<div class="form-group">
 <select class="basic-single form-control w200">
    <option value="CA">California</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
Copy 

// basic single
$(".basic-single").select2();

Basic Contextual

Copy 

<div class="form-group">
 <select class="contextual-single form-control select-primary w200">
    <option value="CA">California</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
Copy 

// contextual single
$(".contextual-single").select2();

Basic Multiple

Copy 

<div class="form-group">
  <select class="basic-multiple form-control w200" multiple="multiple">
    <option value="CA">California</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
Copy 

// basic multiple
$(".basic-multiple").select2({
  placeholder: "Select a state"
});

Basic Tags

Copy 

<div class="form-group">
  <select class="basic-tags form-control w200" multiple="multiple">
    <option value="CA" selected>California</option>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
Copy 

// basic tags
$(".basic-tags").select2({
  tags: true,
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: https://select2.github.io/examples.html

Forms - Tag Manager

Plugin Information

A JQuery multiselect plugin based on Twitter Bootstrap

Plugin Name: Bootstrap Multiselect
Author: David Stutz
License: MIT licensed
Website: http://davidstutz.com/bootstrap-multiselect/
Git Branch: bootstrap-multiselect
Dependencies:
None Required - In Core
None Required - In Core

Basic Single

Copy 

<div class="form-group">
  <select id="multiselect-single">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella" selected>Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
  </select>
</div>
Copy 

// multiselect - single 
$('#multiselect-single').multiselect();

Basic Multiple

Copy 

<div class="form-group">
  <select id="multiselect-multiple" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella" selected>Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
  </select>
</div>
Copy 

// multiselect - muliple
$('#multiselect-multiple').multiselect({
  includeSelectAllOption: true
});

Basic Label

Copy 

<div class="form-group">
  <select id="multiselect-labels" class="multiselect-withlabels" multiple="multiple">
    <optgroup label="Mathematics">
      <option value="analysis">Analysis</option>
      <option value="discrete">Discrete Mathematics</option>
      <option value="probability">Probability Theory</option>
    </optgroup>
    <optgroup label="Computer Science">
      <option value="programming">Introduction to Programming</option>
      <option value="automata">Automata Theory</option>
      <option value="complexity">Complexity Theory</option>
    </optgroup>
  </select>
</div>
Copy 

// multiselect with labels
$('#multiselect-labels').multiselect();

Basic Search

Copy 

<div class="form-group">
  <select id="multiselect-sorting" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
  </select>
</div>
Copy 

// multiselect with sorting
$('#multiselect-sorting').multiselect({
  enableFiltering: true,
});

Basic Contextual

Copy 

<div class="form-group">
  <select id="multiselect-contextual">
    <option value="mozarella">Mozzarella</option>
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
  </select>
</div>
Copy 

// multiselect - contextual 
$('#multiselect-contextual').multiselect({
  buttonClass: 'multiselect dropdown-toggle btn btn-primary'
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://welldonethings.com/tags/manager/v3

Forms - NProgress

Plugin Information

For slim progress bars like on YouTube, Medium, etc

Plugin Name: NProgress
Author: Rico Sta. Cruz
License: MIT licensed
Website: http://ricostacruz.com/nprogress/
Git Branch: rstacruz/nprogress
Dependencies:
None Required - Can be modified via plugins.less
<script src="vendor/plugins/nprogress/nprogress.js"></script>

Basic Usage

Simply call start() and done() to control the progress bar.

Copy 

// Start/Stop NProgress
NProgress.start();
NProgress.done();

Advanced Usage

Percentages: To set a progress percentage, call .set(n), where n is a number between 0..1.

Copy 

// Percentages
NProgress.set(0.0);  // Sort of the same as .start()
NProgress.set(0.4);  // Move bar to 40%
NProgress.set(1.0);  // Sort of the same as .done()

Incrementing: To increment the progress bar, just use .inc(). This increments it with a random amount. This will never get to 100%: use it for every image load (or similar).

Copy 

// Increment
NProgress.inc();
NProgress.inc(0.2);  // This will get the current status value and adds 0.2 until status is 0.994

Plugin Configuration

Copy 

// Init jQuery Tags Manager 
<!-- Configure NProgress -->
NProgress.configure({
  minimum: 0.15, // minimum bar load
  trickleRate: .07, // rate at which bar increases
  trickleSpeed: 360, // speed at which bar increases
  showSpinner: false, // show/hide additional spinner during load
  barColor: '', // npr-warning, npr-success, npr-primary, etc (all contextuals available)
  barPos: '' // 'null' - (default) - bar position: top of page
    // 'npr-bottom' -  bar position: bottom of page header      
    // 'npr-header' -  bar position: below header                
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: https://github.com/rstacruz/nprogress
Theme Example: https://chadcollins.com/framework/form_nprogress.html

Forms - Dual Select-List

Plugin Information

A jQuery plugin to create tag input fields using Twitters Bootstrap 3

Plugin Name: Bootstrap Dual Listbox
Author: István Ujj-Mészáros
License: MIT licensed
Website: http://www.virtuosoft.eu/duallistbox
Git Branch: /istvan-ujjmeszaros/duallistbox
Dependencies:
None Required - Can be modified via plugins.less
<script src="vendor/plugins/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

Basic Setup

Created inside panel element

Dual Select Listbox
Copy 

  <form id="list-demo" class="mw700 pl30" action="#" method="post">
    <div class="panel-heading">
      <span class="panel-title"> Dual Select Listbox </span>
    </div>
    <div class="panel-body p25">
      <select class="list-basic" multiple="multiple" size="10" name="list-basic">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
        <option value="option7">Option 7</option>
        <option value="option8">Option 8</option>
        <option value="option9">Option 9</option>
        <option value="option10">Option 10</option>
        <option value="option11">Option 11</option>
        <option value="option12">Option 12</option>
      </select>
    </div>
    <div class="panel-footer">
      <button type="submit" class="btn btn-default light btn-block">Submit Data</button>
    </div>
  </form>
Copy 

// Create Dual Select List
var duallist = $('.list-basic').bootstrapDualListbox({
  nonSelectedListLabel: 'Options',
  selectedListLabel: 'Selected',
  preserveSelectionOnMove: 'moved',
  moveOnSelect: true,
  nonSelectedFilter: 'ion ([7-9]|[1][0-2])',
  selectorMinimalHeight: 200,
});

// Catch form submit and alert options
$("#list-demo").submit(function() {
  alert("Options Selected: " + $('.demo1').val());
  return false;
});

Settings

When calling $("#element").bootstrapDualListbox() you can pass a parameters object with zero or more of the following:

Option Description
bootstrap2Compatible false: set this to true if you want graphic compatibility with Bootstrap 2.
filterTextClear 'show all': the text for the "Show All" button.
filterPlaceHolder 'Filter': the placeholder for the input element for filtering elements.
moveSelectedLabel 'Move selected': the label for the "Move Selected" button.
moveAllLabel 'Move all': the label for the "Move All" button.
removeSelectedLabel 'Remove selected': the label for the "Remove Selected" button.
removeAllLabel 'Remove all': the label for the "Remove All" button.
moveOnSelect true: determines whether to move options upon selection. This option is forced to true on the Android browser.
preserveSelectionOnMove false: can be 'all' (for selecting both moved elements and the already selected ones in the target list) or 'moved' (for selecting moved elements only)
selectedListLabel false: can be a string specifying the name of the selected list.
nonSelectedListLabel false: can be a string specifying the name of the non selected list.
helperSelectNamePostfix '_helper': The added selects will have the same name as the original one, concatenated with this string and 1 (for the non selected list, e.g. element_helper1) or 2 (for the selected list, e.g. element_helper2).
selectorMinimalHeight 100: represents the minimal height of the generated dual listbox.
showFilterInputs true: whether to show filter inputs.
nonSelectedFilter '': initializes the dual listbox with a filter for the non selected elements. This is applied only if showFilterInputs is set to true.
selectedFilter '': initializes the dual listbox with a filter for the selected elements. This is applied only if showFilterInputs is set to true.
infoText 'Showing all {0}': determines which string format to use when all options are visible. Set this to false to hide this information. Remember to insert the {0} placeholder.
infoTextFiltered '<span class="label label-warning">Filtered</span> {0} from {1}': determines which element format to use when some element is filtered. Remember to insert the {0} and {1} placeholders.
infoTextEmpty 'Empty list': determines the string to use when there are no options in the list.
filterOnValues false: set this to true to filter the options according to their values and not their HTML contents.

Methods

You can modify the behavior and aspect of the dual listbox by calling its methods, all of which accept a value and a refresh option. The value determines the new parameter value, while refresh (optional, defaults to false) tells whether to update the plugin UI or not. To call methods on the dual listbox instance, use the following syntax:

$(selector).bootstrapDualListbox(methodName, parameter);

Method Description
refresh() update the plugin element UI.
destroy() restore the original select element and delete the plugin element.
getContainer() get the container element.
setBootstrap2Compatible(value, refresh) change the bootstrap2Compatible parameter.
setFilterTextClear(value, refresh) change the filterTextClear parameter.
setFilterPlaceHolder(value, refresh) change the filterPlaceHolder parameter.
setMoveSelectedLabel(value, refresh) change the moveSelectedLabel parameter.
setMoveAllLabel(value, refresh) change the moveAllLabel parameter.
setRemoveSelectedLabel(value, refresh) change the removeSelectedLabel parameter.
setRemoveAllLabel(value, refresh) change the removeAllLabel parameter.
setMoveOnSelect(value, refresh) change the moveOnSelect parameter.
setPreserveSelectionOnMove(value, refresh) change the preserveSelectionOnMove parameter.
setSelectedListLabel(value, refresh) change the selectedListLabel parameter.
setNonSelectedListLabel(value, refresh) change the nonSelectedListLabel parameter.
setHelperSelectNamePostfix(value, refresh) change the helperSelectNamePostfix parameter.
setSelectOrMinimalHeight(value, refresh) change the selectOrMinimalHeight parameter.
setShowFilterInputs(value, refresh) change the showFilterInputs parameter.
setNonSelectedFilter(value, refresh) change the nonSelectedFilter parameter.
setSelectedFilter(value, refresh) change the selectedFilter parameter.
setInfoText(value, refresh) change the infoText parameter.
setInfoTextFiltered(value, refresh) change the infoTextFiltered parameter.
setInfoTextEmpty(value, refresh) change the infoTextEmpty parameter.
setFilterOnValues(value, refresh) change the filterOnValues parameter.

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://welldonethings.com/tags/manager/v3

Forms - Typeahead

Plugin Information

typeahead.js is a fast and fully-featured autocomplete library

Plugin Name: Typeahead
Author: Twitter Inc.
License: MIT licensed
Website: https://twitter.github.io/typeahead.js/
Git Branch: twitter/typeahead.js
Dependencies:
None Required
<script src="vendor/plugins/typeahead/typeahead.bundle.min.js"></script>

Basic Setup

Copy 

<!-- Typeahead Input Field -->
<input type="text" class="form-control typeahead" id="typeahead-field" placeholder="Fruit List">
Copy 

// Init Twitter Typeahead.js
var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({
          value: str
        });
      }
    });

    cb(matches);
  };
};

// Define List
var fruits = ['Apple', 'Orange', 'Lemon', 'Banana', 'Watermelon'];

// Init Typeahead
$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'fruits',
  displayKey: 'value',
  source: substringMatcher(fruits)
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Advanced Examples: http://twitter.github.io/typeahead.js/examples/
Documentation: https://github.com/twitter/typeahead.js/doc/jquery_typeahead.md

Forms - Bootstrap MaxLength

Plugin Information

A plugin that integrates with Twitter bootstrap to display a fields maximum length via badges.

Plugin Name: Bootstrap Maxlength
Author: Maurizio
License: MIT licensed
Website: http://mimo84.github.io/bootstrap-maxlength/
Git Branch: mimo84/bootstrap-maxlength
Dependencies:
None Required - Can be modified via plugins.less
<script src="vendor/plugins/maxlength/bootstrap-maxlength.min.js"></script>

Basic Setup

Copy 

<!-- Maxlength Input Field -->
<input type="text" class="form-control" maxlength="15" placeholder="Maxlength of 15 characters..">
Copy 

// Init Bootstrap Maxlength Plugin
$('input[maxlength]').maxlength({
  threshold: 15,
  placement: "right"
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Advanced Examples: http://mimo84.github.io/bootstrap-maxlength/
Documentation: https://github.com/mimo84/bootstrap-maxlength/

Forms - JQuery Validate

Plugin Information

A jQuery plugin to create tag input fields using Twitters Bootstrap 3

Plugin Name: JQuery Validate
Author: Jorn Zaefferer
License: MIT licensed
Website: http://jqueryvalidation.org/
Git Branch: jzaefferer/jquery-validation
Dependencies:
None Required
<script src="vendor/plugins/validate/jquery.validate.min.js"></script>

Method 1: From an HTML element

Open popup
Copy 

<a class="test-popup-link btn btn-primary" href="path-to-image.jpg">Open popup</a>
Copy 

$('.test-popup-link').magnificPopup({ 
  type: 'image'
  // other options
  // gallery:{enabled:true}
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: https://github.com/jzaefferer/jquery-validation
Return to Top