Simple Family Tree Generator With JavaScript - jQuery Tree.js

A lightweight, simple and semantic jQuery family tree plugin which helps you to draw complex family tree diagrams from nested HTML unordered lists.

See also:

• Fully Customizable Organisational Chart Plugin With jQuery - OrgChart
• Animated organization Chart & Tree Diagram Plugin - Stiff Chart
• Simple Hierarchical organization Chart Plugin For jQuery - jOrgChart
• Create An Editable organization Chart with jQuery orgChart Plugin

How to use it:

1. Load the jQuery family tree plugin after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.tree.js"></script>

2. Load the jQuery bgimages plugin to handle editting of multiple background images for an element, as permitted by CSS3.

<script src="jquery.bgimages.js"></script>

3. Code nested HTML lists for the family tree.

<ul class="family">
  <li>Parent 1
    <ul class="partners">
      <li>Parent 2
        <ul class="children">
          <li>Birth Child</li>
          <li class="adopted">Adopted Child</li>
          <li class="created">Creation</li>
        </ul>
      </li>
      <li>Parent 3</li>
      <li>Parent 4</li>
    </ul>
  </li>
</ul>

4. Draw a family tree on the webpage.

$(document).ready(function(){
  $('ul.family').familyTree();
});

5. All possible configuration variables to customize your family tree.

$('ul.family').familyTree({

  // The jQuery selector used to choose partner lists.
  partner_selector:     'ul.partners',

  // The jQuery selector used to choose child lists.
  children_selector:    'ul.children', 

  // The CSS class to add to any child-bearing partner.
  has_children_class:     'has-children',
  
  // Image files
  directory:      'jquery-tree/images',
  mp_top_image:     'multiple-partners-top.png',
  mp_bottom_image:    'multiple-partners-bottom.png',
  mp_pending_image:   'pending-partner.png',
  single_parent_image:    'single-parent-root.png',
  vertical_line_image:    'dot.jpg',
  shiftable_images:     'nuclear-root.png,childless-root.png,single-parent-root.png',
  
  // Standard image dimensions (px)
  image_width:      5,
  image_height:       5,
  
  // Background color for elements
  bg_color: '#FFFFFF'

});

---

This awesome jQuery plugin is developed by craigplusplus. For more Advanced Usages, please check the demo page or visit the official website.