Data - DataTables

Plugin Information

DataTables will add advanced interaction controls to any HTML table.

Plugin Name: DataTables
Author: SpryMedia
License: MIT licensed
Website: http://datatables.net/
Git Branch: DataTables/DataTables
Dependencies:
<link href="vendor/plugins/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/datatables/media/js/jquery.dataTables.js"></script>
<script src="vendor/plugins/datatables/media/js/dataTables.bootstrap.js"></script>
DataTables has many addons, check official documentation for detailed usage of what's required

Basic DataTable

Name Office Salary
Tiger Nixon Edinburgh $320,800
Cedric Kelly Edinburgh $433,060
Brielle Williamson New York $372,000
Tiger Nixon Edinburgh $320,800
Copy 

<div class="panel-body pn">
  <table class="table table-striped" id="datatable">
      <thead>
          <tr>
              <th>Name</th>
              <th>Office</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Tiger Nixon</td>
              <td>Edinburgh</td>
              <td>$320,800</td>
          </tr>
          <tr>
              <td>Cedric Kelly</td>
              <td>Edinburgh</td>
              <td>$433,060</td>
          </tr>
          <tr>
              <td>Brielle Williamson</td>
              <td>New York</td>
              <td>$372,000</td>
          </tr>
          <tr>
              <td>Tiger Nixon</td>
              <td>Edinburgh</td>
              <td>$320,800</td>
          </tr>
      </tbody>
  </table>
</div>
Copy 

$('#datatable').dataTable({
    "sDom": 't<"dt-panelfooter clearfix"ip>', // required for generating styling markup
});

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://datatables.net/reference/index
Advanced Examples: http://datatables.net/examples/index

Data - FancyTree

Plugin Information

Tree plugin for jQuery with support for persistence, keyboard, checkboxes, tables (grid), drag'n'drop, and lazy loading.

Plugin Name: FancyTree
Author: Martin Wendt
License: MIT licensed
Website: http://wwwendt.de/tech/fancytree
Git Branch: mar10/fancytree
Dependencies:
<link href="vendor/plugins/fancytree/skin-win8/ui.fancytree.min.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/fancytree/jquery.fancytree-all.min.js"></script>
FancyTree has many addons, check official documentation for detailed usage of what's required

Basic Example

  • Node 1
  • Folder 1
    • Node 2.1
    • Node 2.2
Copy 

<div id="tree">
    <ul id="treeData" style="display: none;">
        <li id="1">Node 1 </li>
        <li id="2" class="folder expanded active">Folder 1
            <ul>
                <li id="2.1">Node 2.1 </li>
                <li id="2.2">Node 2.2 </li>
            </ul>
        </li>
    </ul>
</div>
Copy 

// Init Basic FancyTree
$("#tree").fancytree();

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/mar10/fancytree/wiki
Advanced Examples: http://wwwendt.de/tech/fancytree/demo/

Data - FullCalendar

Plugin Information

A Full-sized drag & drop event calendar.

Plugin Name: FullCalendar
Author: Adam Shaw
License: MIT licensed
Website: http://fullcalendar.io/
Git Branch: arshaw/fullcalendar
Dependencies:
<link href="vendor/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/fullcalendar/lib/moment.min.js"></script>
<script src="vendor/plugins/fullcalendar/fullcalendar.min.js"></script>

Basic Example

Copy 

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

$('#calendar').fullCalendar({
    // put your options and callbacks here
});

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://fullcalendar.io/docs/
Advanced Examples: http://fullcalendar.io/

Data - Mixitup

Plugin Information

MixItUp is a jQuery plugin providing animated filtering and sorting.

Plugin Name: Mixitup
Author: Patrickkunka
License: Mixed - Commercial
Website: https://mixitup.kunkalabs.com/
Git Branch: patrickkunka/mixitup
Dependencies:
None Required
<script src="vendor/plugins/mixitup/jquery.mixitup.min.js"></script>

Method 1: From an HTML element

Copy 

<!-- Mixitup Filters -->
<div class="controls mt15">
  <label class="ml5 mr10">Filter:</label>
  <button class="filter btn btn-primary btn-sm" data-filter="all">All</button>
  <button class="filter btn btn-primary btn-sm" data-filter=".category-1">Category 1</button>
  <button class="filter btn btn-primary btn-sm" data-filter=".category-2">Category 2</button>
  
  <label class="ml20 mr10">Sort:</label>
  <button class="sort btn btn-info btn-sm" data-sort="myorder:asc">Asc</button>
  <button class="sort btn btn-info btn-sm" data-sort="myorder:desc">Desc</button>
</div>

<!-- Mixitup Items -->
<div id="mix-items" class="mix-container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
  <div class="mix category-1" data-myorder="3"></div>
  <div class="mix category-2" data-myorder="4"></div>
  <div class="mix category-1" data-myorder="5"></div>
  <div class="mix category-1" data-myorder="6"></div>
  <div class="mix category-2" data-myorder="7"></div>
  <div class="mix category-2" data-myorder="8"></div>
  <div class="gap"></div>
  <div class="gap"></div>
</div>
Copy 

$('#mix-items').mixItUp();

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://mixitup.kunkalabs.com/docs/
Advanced Examples: https://mixitup.kunkalabs.com/learn/tutorial/get-started/

Data - Nestable

Plugin Information

Drag & drop hierarchical list with mouse and touch compatibility.

Plugin Name: Nestable
Author: David Bushell
License: MIT
Website: http://dbushell.github.io/Nestable/
Git Branch: dbushell/Nestable
Dependencies:
<link href="vendor/plugins/nestable/nestable.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/nestable/jquery.nestable.js"></script>

Method 1: From an HTML element

  1. Item 1
  2. Item 2
    1. Item 3 - Nested
  3. Item 4
Copy 

<!-- Nestable List -->
<div id="nestable" class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="3">
                    <div class="dd-handle">Item 3 - Nested</div>
                </li>
            </ol>
        </li>
        <li class="dd-item" data-id="4">
            <div class="dd-handle">Item 4</div>
        </li>
    </ol>
</div>
Copy 

// Init Nestable on list
$('#nestable').nestable({
    group: 1 // Link to a nestable group
});

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/patrickkunka/mixitup/tree/master/docs
Advanced Examples: http://dbushell.github.io/Nestable/

Data - Slick Slider

Plugin Information

A fully featured responsive content caraousel and slider.

Plugin Name: Slick Slider
Author: Ken Wheeler
License: MIT
Website: http://kenwheeler.github.io/slick
Git Branch: kenwheeler/slick
Dependencies:
<link href="vendor/plugins/slick/slick.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/slick/slick.js"></script>

Basic Single Slider

1

2

3

4

Copy 

<!-- Single Item -->
<div class="single-item">
    <div class="slick-slide">
        <h1>1</h1>
    </div>
    <div class="slick-slide">
        <h1>2</h1>
    </div>
    <div class="slick-slide">
        <h1>3</h1>
    </div>
    <div class="slick-slide">
        <h1>4</h1>
    </div>
</div>
Copy 

// Init Slick Slider
$('.single-item').slick({
    dots: true
});

Basic Multi Slider

1

2

3

4

Copy 

<!-- Multiple Items -->
<div class="multiple-items">
    <div class="slick-slide">
        <h1>1</h1>
    </div>
    <div class="slick-slide">
        <h1>2</h1>
    </div>
    <div class="slick-slide">
        <h1>3</h1>
    </div>
    <div class="slick-slide">
        <h1>4</h1>
    </div>
</div>
Copy 

// Init Slick Slider
$('.multiple-items').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});

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://kenwheeler.github.io/slick/#usage

Utility - Bootstrap Tour

Plugin Information

Quick and easy product tours with Twitter Bootstrap Popovers.

Plugin Name: Bootsrap Tour
Author: Ulrich Sossou
License: MIT licensed
Website: http://bootstraptour.com/
Git Branch: sorich87/bootstrap-tour
Dependencies:
<link href="vendor/plugins/bstour/bootstrap-tour.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/bstour/bootstrap-tour.js"></script>

Basic Tour

Panel 1
Panel 2
Copy 

<!-- Tour Activation Btn -->
<button class="btn btn-primary" id="tour_start" type="button">Begin Tour</button>

<!-- Tour Steps -->
<div class="row">
  <div class="col-md-6">
    <div class="panel" id="tour-item1">
        <div class="panel-heading">
          <span class="panel-title"> Panel 1</span>
        </div>    
        <div class="panel-body" style="min-height: 100px;">
        </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel" id="tour-item2">
        <div class="panel-heading">
          <span class="panel-title"> Panel 2</span>
        </div>    
        <div class="panel-body" style="min-height: 100px;">
        </div>
    </div>
  </div>
</div>
Copy 

// Create Tour steps
var tour = new Tour({
  steps: [
    {
      element: "#tour-item1", // item selector
      title: "Tour item title!", // title
      content: "I'm the content", // content
      placement: 'top' // left, right, top, bottom
    },
    {
      element: "#tour-item2",
      title: "Tour item title!",
      content: "I'm the content", 
      placement: 'top'
    }
  ]
});

// Start Tour on click
$('#tour_start').on('click',function(){
    tour.restart();
});

Tour Backdrop

Panel 1
Panel 2
Copy 

<!-- Tour Activation Btn -->
<button class="btn btn-primary" id="tour_start" type="button">Begin Tour</button>

<!-- Tour Steps -->
<div class="row">
  <div class="col-md-6">
    <div class="panel" id="tour-item1">
        <div class="panel-heading">
          <span class="panel-title"> Panel 1</span>
        </div>    
        <div class="panel-body" style="min-height: 100px;">
        </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel" id="tour-item2">
        <div class="panel-heading">
          <span class="panel-title"> Panel 2</span>
        </div>    
        <div class="panel-body" style="min-height: 100px;">
        </div>
    </div>
  </div>
</div>
Copy 

// Create Tour steps
var tour = new Tour({
  backdrop: true, // can mask content in a modal
  steps: [
    {
      element: "#tour-item1", // item selector
      title: "Tour item title!", // title
      content: "I'm the content", // content
      placement: 'top' // left, right, top, bottom
    },
    {
      element: "#tour-item2",
      title: "Tour item title!",
      content: "I'm the content", 
      placement: 'top'
    },
  ]
});

// Start Tour on click
$('#tour_start').on('click',function(){
    tour.restart();
});

Tour Backdrop

Panel 1
Panel 2
Copy 

<!-- Tour Activation Btn -->
<button class="btn btn-primary" id="tour_start" type="button">Begin Tour</button>

<!-- Tour Steps -->
<div class="row">
  <div class="col-md-6">
    <div class="panel" id="tour-item1">
        <div class="panel-heading">
          <span class="panel-title"> Panel 1</span>
        </div>    
        <div class="panel-body" style="min-height: 100px;">
        </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel" id="tour-item2">
        <div class="panel-heading">
          <span class="panel-title"> Panel 2</span>
        </div>    
        <div class="panel-body" style="min-height: 100px;">
        </div>
    </div>
  </div>
</div>
Copy 

// Create Tour steps
var tour = new Tour({
  steps: [
    {
      element: "#tour-item1", // item selector
      title: "Tour item title!", // title
      content: "I'm the content", // content
      placement: 'top' // left, right, top, bottom
    },
    {
      element: "#tour-item2",
      title: "Tour item title!",
      content: "I'm the content", 
      placement: 'top'
    },
  ],
  onStart: function(tour) { // On Tour Start
    alert('This is an "onStart" callback');
  },
  onNext: function(tour) { // On Tour Next Item
    alert('This is an "onNext" callback');
  },
  onPrev: function(tour) { // On Tour Prev Item
    alert('This is an "onPrev" callback');
  },
  onEnd: function(tour) { // On Tour Complete
    alert('This is an "onEnd" callback');
  }
});

// Start Tour on click
$('#tour_start').on('click',function(){
    tour.restart();
});

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://bootstraptour.com/api/
Return to Top