Skip to content

Chinh-P/family_tree

 
 

Repository files navigation

Family Tree

jQuery plugin for creating a family tree

Features:

  1. Draggable tree, so that you can draw a wide family tree
  2. On right click access to option menu.
  3. View data of exiting member.
  4. Add new member.
  5. Remove existing member from tree.

How to:

  1. You have to include following file
   <link rel="stylesheet" href="jquery-ui.css">
   <script src="jquery-1.11.0.js"></script>
   <script src="jquery-ui.js"></script>
   <script src="ps-family.js"></script>
   <link rel="stylesheet" href="style.css"/>
  1. Create div in which tree will be display

       <div id="pk-family-tree"></div>
  2. Include below query just after the above div

     <script>
            $('#pk-family-tree').pk_family();
     </script>
  3. Done. At start it will ask you for entering first member.

  4. To send data of tree to server:

    $.send_Family({url: 'save_family.php'})

    here url is the server file where you want to send family tree Note: tree data will be in JSON format and will be send through GET method

  5. To display tree from preexist tree:

    $('#pk-family-tree').pk_family_create({
             data: ''
         });

Note: pk-family-tree must not be change

About

jQuery plugin for creating a family tree

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 66.4%
  • CSS 22.8%
  • HTML 10.8%