Plugin Information

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

Class	Description
Plugin Name:	FancyTree
Author:	Martin Wendt
License:	MIT licensed
Website:	http://wwwendt.de/tech/fancytree
Git Branch:	mar10/fancytree
Dependencies:

<link href="plugins/css/ui.fancytree.min.css" rel="stylesheet" type="text/css">

<script src="plugins/core.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.

Class	Description
Documentation:	https://github.com/mar10/fancytree/wiki
Advanced Examples:	http://wwwendt.de/tech/fancytree/demo/

Plugin Information

A Full-sized drag & drop event calendar.

Class	Description
Plugin Name:	FullCalendar
Author:	Adam Shaw
License:	MIT licensed
Website:	http://fullcalendar.io/
Git Branch:	arshaw/fullcalendar
Dependencies:

<link href="plugins/css/fullcalendar.min.css" rel="stylesheet" type="text/css">

<script src="plugins/core.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.

Class	Description
Documentation:	http://fullcalendar.io/docs/
Advanced Examples:	http://fullcalendar.io/

Plugin Information

MixItUp is a jQuery plugin providing animated filtering and sorting.

Class	Description
Plugin Name:	Mixitup
Author:	Patrickkunka
License:	Mixed - Commercial
Website:	https://mixitup.kunkalabs.com/
Git Branch:	patrickkunka/mixitup
Dependencies:

None Required

<script src="plugins/core.min.js"></script>

Method 1: From an HTML element

Filter: Sort:

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.

Class	Description
Documentation:	https://mixitup.kunkalabs.com/docs/
Advanced Examples:	https://mixitup.kunkalabs.com/learn/tutorial/get-started/

Plugin Information

Drag & drop hierarchical list with mouse and touch compatibility.

Class	Description
Plugin Name:	Nestable
Author:	David Bushell
License:	MIT
Website:	http://dbushell.github.io/Nestable/
Git Branch:	dbushell/Nestable
Dependencies:

<link href="plugins/css/nestable.css" rel="stylesheet" type="text/css">

<script src="plugins/core.min.js"></script>

Method 1: From an HTML element

Item 1
Item 2
1. Item 3 - Nested
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.

Class	Description
Documentation:	https://github.com/patrickkunka/mixitup/tree/master/docs
Advanced Examples:	http://dbushell.github.io/Nestable/

Plugin Information

A fully featured responsive content caraousel and slider.

Class	Description
Plugin Name:	Slick Slider
Author:	Ken Wheeler
License:	MIT
Website:	http://kenwheeler.github.io/slick
Git Branch:	kenwheeler/slick
Dependencies:

<link href="plugins/css/slick.css" rel="stylesheet" type="text/css">

<script src="plugins/core.min.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.

Class	Description
Documentation:	http://kenwheeler.github.io/slick/#usage

Plugin Information

Quick and easy product tours with Twitter Bootstrap Popovers.

Class	Description
Plugin Name:	Bootsrap Tour
Author:	Ulrich Sossou
License:	MIT licensed
Website:	http://bootstraptour.com/
Git Branch:	sorich87/bootstrap-tour
Dependencies:

<link href="plugins/css/bootstrap-tour.css" rel="stylesheet" type="text/css">

<script src="plugins/core.min.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.

Class	Description
Documentation:	http://bootstraptour.com/api/

Return to Top

Data - FancyTree

Plugin Information

Basic Example

Extended Information

Data - FullCalendar

Plugin Information

Basic Example

Extended Information

Data - Mixitup

Plugin Information

Method 1: From an HTML element

Extended Information

Data - Nestable

Plugin Information

Method 1: From an HTML element

Extended Information

Data - Slick Slider

Plugin Information

Basic Single Slider

1

2

3

4

Basic Multi Slider

1

2

3

4

Extended Information

Utility - Bootstrap Tour

Plugin Information

Basic Tour

Tour Backdrop

Tour Backdrop

Extended Information