ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example_vsp.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>Trinity<br/>
  30         <ul>
  31           <li>Call Forwarding<br/>
  32             <ul>
  33                           <li>Call Forwarding Busy<br/></li>
  34                           <li>Call Forwarding Always<br/></li>
  35                           <li>Call Forwarding Not Reachable<br/></li>
  36             </ul>
  37           </li>
  38           <li>Dial Restrictions<br/>
  39             <ul>
  40                           <li>Outgoing Calls<br/></li>
  41                           <li>Redirecting Calls<br/></li>
  42                           <li>Incoming Calls<br/></li>
  43             </ul>
  44           </li>
  45           <li>Messaging<br/>
  46             <ul>
  47                           <li>Voice Management<br/></li>
  48                           <li>Greetings<br/></li>
  49                           <li>Fax Messaging<br/></li>
  50             </ul>
  51           </li>
  52         </ul>
  53       </li>
  54    </ul>
  55
  56     <div id="chart" class="orgChart"></div>
  57
  58     <script>
  59         jQuery(document).ready(function() {
  60
  61             /* Custom jQuery for the example */
  62             $("#show-list").click(function(e){
  63                 e.preventDefault();
  64
  65                 $('#list-html').toggle('fast', function(){
  66                     if($(this).is(':visible')){
  67                         $('#show-list').text('Hide underlying list.');
  68                         $(".topbar").fadeTo('fast',0.9);
  69                     }else{
  70                         $('#show-list').text('Show underlying list.');
  71                         $(".topbar").fadeTo('fast',1);
  72                     }
  73                 });
  74             });
  75
  76             $('#list-html').text($('#org').html());
  77
  78             $("#org").bind("DOMSubtreeModified", function() {
  79                 $('#list-html').text('');
  80
  81                 $('#list-html').text($('#org').html());
  82
  83                 prettyPrint();
  84             });
  85         });
  86     </script>
  87   </body>
  88 </html>