diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/org_chart/example.html')
-rw-r--r-- | ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/org_chart/example.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/org_chart/example.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/org_chart/example.html new file mode 100644 index 00000000..543b0f92 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/org_chart/example.html @@ -0,0 +1,85 @@ +<!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>Product 1<br/> + <ul> + <li>Service 1<br/> + <ul> + <li>Resource 1<br/></li> + <li>Resource 2<br/></li> + <li>Resource 3<br/></li> + <li>Resource 4<br/></li> + <li>Resource 5<br/></li> + </ul> + </li> + <li>Service 6<br/></li> + <li>Service 7<br/> + <ul> + <li>Resource 8<br/></li> + <li>Resource 9<br/></li> + <li>Resource 10<br/></li> + <li>Resource 11<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 |