xiongzhu
/
zouma-oa


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!DOCTYPE HTML>

<html>
  <head>
    <title>Org Chart</title>
    <link rel="stylesheet" href="jquery.orgchart.css"/>
    <style>
    body {
      font-family      : Ubuntu, SansSerif
    }

    h1 {
      padding-bottom   : 10px;
      text-align       : center;
    }

    h2 {
      margin-top       : 0px;
      margin-bottom    : 8px;
    }

    p {
      margin           : 0px;
      padding          : 0px;
      line-height      : 1.5em;
    }

    div#text {
      padding          : 10px;
    }
    </style>
    <script src="../jquery/jquery.min.js"></script>
    <script src="jquery.textchildren.js"></script>
    <script src="jquery.orgchart.js"></script>
    <script>
    $(function() {
      $("#showList").click(function() {
        $("#org").toggle();
        return false;
      });

      $("#org").orgChart({
        levels : -1,
        stack  : false,
        nodeText : function($node) {return $node.textChildren();}},
      $("#main"));
    });
    </script>
  </head>

  <body>

    <h1>JQuery/CSS Organisation Chart</h1>

    <div id="main">
    </div>

    <div id="text">
      <h2>Description</h2>
      <p>
        Use JQuery to transform a hidden nested unordered list into an organisation chart. Click on the nodes to show/hide child nodes.
      </p>
      <p>
        <a id="showList" href="#">Show</a> the underlying unordered list.
      </p>
    </div>

    <ul id="org" style="display: none;">
      <li>
        Complex
        <ul>
          <li>One</li>
          <li>Two
            <ul>
              <li>Two - A</li>
              <li>Two - B</li>
            </ul>
          </li>
          <li>Three
            <ul>
              <li>Three - A
                <ul>
                  <li>Three - A1</li>
                </ul>
              </li>
              <li>Three - B
                <ul>
                  <li>Three - B1</li>
                  <li>Three - B2</li>
                  <li>Three - B3
                    <ul>
                      <li>ThreeB3A</li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li>Three - C
                <ul>
                  <li>Three - C1</li>
                  <li>Three - C2</li>
                </ul>
              </li>
              <li>Three - D</li>
            </ul>
          </li>
          <li>Four</li>
          <li>Five
            <ul>
              <li>Five - A</li>
              <li>Five - B</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

  </body>

</html>