Initial OpenECOMP Portal commit
[portal.git] / ecomp-portal-BE / war / static / fusion / sample / org_chart / example_vsp.html
diff --git a/ecomp-portal-BE/war/static/fusion/sample/org_chart/example_vsp.html b/ecomp-portal-BE/war/static/fusion/sample/org_chart/example_vsp.html
new file mode 100644 (file)
index 0000000..a2e3703
--- /dev/null
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <title>jOrgChart - A jQuery OrgChart Plugin</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
+    <link rel="stylesheet" href="css/custom.css"/>
+    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
+
+    <script type="text/javascript" src="prettify.js"></script>
+    
+    <!-- jQuery includes -->
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+    
+    <script src="jquery.jOrgChart.js"></script>
+
+    <script>
+    jQuery(document).ready(function() {
+        $("#org").jOrgChart({
+            chartElement : '#chart',
+            dragAndDrop  : true
+        });
+    });
+    </script>
+  </head>
+
+  <body onload="prettyPrint();">
+    <ul id="org" style="display:none">
+      <li>Trinity<br/>
+        <ul>
+          <li>Call Forwarding<br/>
+            <ul>
+                         <li>Call Forwarding Busy<br/></li>
+                         <li>Call Forwarding Always<br/></li>
+                         <li>Call Forwarding Not Reachable<br/></li>
+            </ul>
+          </li>
+          <li>Dial Restrictions<br/>
+            <ul>
+                         <li>Outgoing Calls<br/></li>
+                         <li>Redirecting Calls<br/></li>
+                         <li>Incoming Calls<br/></li>
+            </ul>
+          </li>
+          <li>Messaging<br/>
+            <ul>
+                         <li>Voice Management<br/></li>
+                         <li>Greetings<br/></li>
+                         <li>Fax Messaging<br/></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+   </ul>            
+    
+    <div id="chart" class="orgChart"></div>
+    
+    <script>
+        jQuery(document).ready(function() {
+            
+            /* Custom jQuery for the example */
+            $("#show-list").click(function(e){
+                e.preventDefault();
+                
+                $('#list-html').toggle('fast', function(){
+                    if($(this).is(':visible')){
+                        $('#show-list').text('Hide underlying list.');
+                        $(".topbar").fadeTo('fast',0.9);
+                    }else{
+                        $('#show-list').text('Show underlying list.');
+                        $(".topbar").fadeTo('fast',1);                  
+                    }
+                });
+            });
+            
+            $('#list-html').text($('#org').html());
+            
+            $("#org").bind("DOMSubtreeModified", function() {
+                $('#list-html').text('');
+                
+                $('#list-html').text($('#org').html());
+                
+                prettyPrint();                
+            });
+        });
+    </script>
+  </body>
+</html>
\ No newline at end of file