ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example.html

   1 <!DOCTYPE html>
   2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   3     <title>jOrgChart - A jQuery OrgChart Plugin</title>
   4     <link rel="stylesheet" href="css/bootstrap.min.css"/>
   5     <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
   6     <link rel="stylesheet" href="css/custom.css"/>
   7     <link href="css/prettify.css" type="text/css" rel="stylesheet" />
   8
   9     <script type="text/javascript" src="prettify.js"></script>
  10
  11     <!-- jQuery includes -->
  12     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  13     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  14
  15     <script src="jquery.jOrgChart.js"></script>
  16
  17     <script>
  18     jQuery(document).ready(function() {
  19         $("#org").jOrgChart({
  20             chartElement : '#chart',
  21             dragAndDrop  : true
  22         });
  23     });
  24     </script>
  25   </head>
  26
  27   <body onload="prettyPrint();">
  28     <ul id="org" style="display:none">
  29       <li>Product 1<br/>
  30         <ul>
  31           <li>Service 1<br/>
  32             <ul>
  33                           <li>Resource 1<br/></li>
  34                           <li>Resource 2<br/></li>
  35                           <li>Resource 3<br/></li>
  36                           <li>Resource 4<br/></li>
  37                           <li>Resource 5<br/></li>
  38             </ul>
  39           </li>
  40           <li>Service 6<br/></li>
  41           <li>Service 7<br/>
  42             <ul>
  43                           <li>Resource 8<br/></li>
  44                           <li>Resource 9<br/></li>
  45                           <li>Resource 10<br/></li>
  46                           <li>Resource 11<br/></li>
  47             </ul>
  48           </li>
  49         </ul>
  50       </li>
  51    </ul>
  52
  53     <div id="chart" class="orgChart"></div>
  54
  55     <script>
  56         jQuery(document).ready(function() {
  57
  58             /* Custom jQuery for the example */
  59             $("#show-list").click(function(e){
  60                 e.preventDefault();
  61
  62                 $('#list-html').toggle('fast', function(){
  63                     if($(this).is(':visible')){
  64                         $('#show-list').text('Hide underlying list.');
  65                         $(".topbar").fadeTo('fast',0.9);
  66                     }else{
  67                         $('#show-list').text('Show underlying list.');
  68                         $(".topbar").fadeTo('fast',1);
  69                     }
  70                 });
  71             });
  72
  73             $('#list-html').text($('#org').html());
  74
  75             $("#org").bind("DOMSubtreeModified", function() {
  76                 $('#list-html').text('');
  77
  78                 $('#list-html').text($('#org').html());
  79
  80                 prettyPrint();
  81             });
  82         });
  83     </script>
  84 </body>
  85 </html>