Simple Family Tree Generator With JavaScript - jQuery Tree.js

File Size: 17.4 KB
Views Total: 15098
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src="" 
<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>
      <li>Parent 3</li>
      <li>Parent 4</li>

4. Draw a family tree on the webpage.


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


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

  // 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.