今天有個case要做會員層級的階層圖
畫面如下:
HTML:
<ul id="org" style="display:none">
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美
<ul>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美
<ul>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
</ul>
</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美
<ul>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
</ul>
</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美
<ul>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
</ul>
</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美
<ul>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
<li><span class="icon"><img src="/images/icon_man.png" alt=""></span>林筱美</li>
</ul>
</li>
</ul>
</li>
</ul>
<link rel="stylesheet" href="/css/jquery.jOrgChart.css">
<script type="text/javascript" src="/js/jquery.jOrgChart.js"></script>
<script>
$(document).ready(function() {
$("#org").jOrgChart({
chartElement: '#chart'
});
});
</script>