<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
|
<title>org ¿ª·¢</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="jquery.min.js"></script>
|
<script type="text/javascript" src="jquery-ui.min.js"></script>
|
<script src="jquery.jOrgChart.js"></script>
|
<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>
|
<script>
|
jQuery(document).ready(function() {
|
|
|
|
$("#load").click(function(){
|
$("#org").jOrgChart({
|
chartElement : '#chart',
|
dragAndDrop : true
|
});
|
});
|
});
|
</script>
|
</head>
|
|
<body >
|
|
<ul id="org">
|
<li>ÉϺ£À¼±¦´«¸Ð¿Æ¼¼¹É·ÝÓÐÏÞ¹«Ë¾
|
<ul>
|
<li>ÐÅϢϵͳ²¿</li>
|
<li>ÐÅϢϵͳ²¿
|
<ul>
|
<li>ÐÅϢϵͳ²¿</li>
|
<li>ÕⶼÊÇʲôѽ</li>
|
</ul>
|
</li>
|
<li>ÐÅϢϵͳ²¿
|
<ul>
|
<li>ÐÅϢϵͳ²¿
|
<ul>
|
<li>ÐÅϢϵͳ²¿1</li>
|
<li>ÐÅϢϵͳ²¿2</li>
|
<li>ÐÅϢϵͳ²¿3</li>
|
<li>ÐÅϢϵͳ²¿4</li>
|
<li>ÐÅϢϵͳ²¿5</li>
|
</ul>
|
</li>
|
<li>ÐÅϢϵͳ²¿</li>
|
</ul>
|
</li>
|
<li>ÐÅϢϵͳ²¿</li>
|
<li>ÐÅϢϵͳ²¿
|
<ul>
|
<li>ÐÅϢϵͳ²¿</li>
|
<li>ÐÅϢϵͳ²¿</li>
|
<li>ÐÅϢϵͳ²¿</li>
|
<li>ÐÅϢϵͳ²¿</li>
|
</ul>
|
</li>
|
</ul>
|
</li>
|
|
</ul>
|
|
<div id="chart" class="orgChart"></div>
|
|
<input id="load" type="button" value="load org"/>
|
<input id="test" type="button" value="click me"/>
|
</body>
|
</html>
|
