jOrgChart横向的组织机构数插件
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jOrgChart - A jQuery OrgChart Plugin</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.jOrgChart.css"/>
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.jOrgChart.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : false
});
});
</script>
</head>
<body onload="">
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
</div>
</div>
</div>
<ul id="org" style="display:none">
<li>
股票
<ul>
<li id="beer">深A</li>
<li>新三板<a href="http://wesnolte.com" target="_blank">Click me</a>
<ul>
<li>新1</li>
<li>
<a href="http://tquila.com" target="_blank">新2</a>
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">沪A
<ul>
<li>大蓝筹
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>工业4.0
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>中小板</li>
<li class="collapsed">创业板
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="chart" class="orgChart"></div>
</body>
</html>