Skip to content

Instantly share code, notes, and snippets.

@winwu

winwu/Org_chart_practice

Last active July 25, 2018 01:15
Show Gist options
  • Save winwu/5692623 to your computer and use it in GitHub Desktop.
Save winwu/5692623 to your computer and use it in GitHub Desktop.
Download ZIP
用html/css/js畫出組織圖
Raw
Org_chart_practice
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Org_chart_practice</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body{font-family:arial;background:rgb(255, 247, 236)}
#org_chart{width:auto}
#org_chart ul{max-width:200px;min-width:150px;}
ul{padding:0}
ol{margin:5px;padding:4px;border-radius:4px;text-align:center;margin-bottom: 0;}
ul.lv1{margin: 0 auto;}
ul.lv1 ol{background:rgb(168, 203, 230);}
ul.lv1 ol:hover{background:rgb(124, 167, 201)}
ul.lv2{border:1px dashed rgb(223, 223, 223);float:left;margin: 0 5px 0 5px;background: rgb(255, 255, 255);padding-bottom: 5px;}
ul.lv2:hover{border-color:#666}
ul.lv2 ol{background:rgb(216, 216, 216)}
ul.lv3 ol{background: rgb(211, 195, 195);margin-left: 6px;}
ul.lv3 ol:hover{background:#666;color:#fff;cursor:pointer}
ul.lv3 ol:hover .details{display:block}
ul.lv3 ol:hover i{color:#fff}
i{color: #666;display: block;font-style: normal;}
.ver_line{background: rgb(97, 88, 77);width: 1px;position: relative;margin: 0 auto;text-indent: -9999px;}
.ver_line,
.hor_line,
.single_hor_line{border-color:#333;}
.hor_line,
.single_hor_line{height:23px;}
.hor_line{border-top: 1px solid #333;border-right: 1px solid #333;border-left: 1px solid #333;border-radius: 4px 4px 0 0;margin: 0 25px;}
.all_lv2{display: inline-block;margin-top: -27px;}
.single_hor_line{width: 1px;display: inline-block;position:relative;top: -23px;background: #333}
.details{border: 1px solid rgb(211, 211, 211);position: absolute;z-index: 1;zoom: 1;background: #fff;width: 205px;text-align: left;padding: 5px;margin: 0px 0 0 152px;display: none;color: #666;line-height: 5px;font-size: 12px;margin-top:-35px;border-radius: 5px;-webkit-box-shadow: 5px 10px 20px 1px rgba(150, 150, 150, 5);box-shadow: 5px 10px 20px 1px rgba(110, 110, 110, 5); }
.details img{background:#eee;display:block;width:70px;height:80px;float:left;border-radius:2px;margin-right:5px}
.details .triangle{width: 0px;height: 0px;border-style: solid;border-width: 7.5px 13.0px 7.5px 0;border-color: transparent #ffffff transparent transparent;position: absolute;margin-left: -15px;}
</style>
</head>
<body>
<div id="org_chart" data-type="hor">
<ul class="lv1">
<ol role-department="CEO">
<i>Board of Directors</i>
<span>Who Who</span>
</ol>
</ul>
<div style="clear:both"></div>
<div class="all_lv2">
<ul class="lv2">
<ol role-department="HR">
<i>HR Manager</i>
<span>Beauty Girl</span>
</ol>
<ol role-department="HR">
<i>HR Assistant</i>
<span>Mr.Huange</span>
</ol>
</ul>
<ul class="lv2">
<ol role-department="HR">
<i>HR Manager</i>
<span>Beauty Girl</span>
</ol>
<ol role-department="HR">
<i>HR Assistant</i>
<span>Mr.Huange</span>
</ol>
</ul>
<ul class="lv2">
<ol role-department="Web Develpment">
<i>Manager</i>
<span>Mr.Huange</span>
<ul class="lv3">
<ol role-department="HR">
<i>FrontEnd Developer</i>
<span>Win Wu</span>
<div class="details" role-detail="Win_Wu">
<i class="triangle"></i>
<img src="" alt="" />
<p>Win Wu</p>
<p>XXXXX Department</p>
<p>FrontEnd Developer</p>
<p>2012.7 ~ Present</p>
</div><!--.details-->
</ol>
<ol role-department="HR">
<i>BackEnd Developer</i>
<span>Who Who</span>
</ol>
<ol role-department="HR">
<i>UI/UX Designer</i>
<span>Who Who</span>
</ol>
</ul>
</ol>
</ul>
<ul class="lv2">
<ol role-department="App Develpment">
<i>Manager</i>
<span>Mr.Huange</span>
<ul class="lv3">
<ol role-department="HR">
<i>FrontEnd Developer</i>
<span>Win Wu</span>
</ol>
<ol role-department="HR">
<i>BackEnd Developer</i>
<span>Who Who</span>
</ol>
<ol role-department="HR">
<i>UI/UX Designer</i>
<span>Who Who</span>
</ol>
</ul>
</ol>
</ul>
<div style="clear:both"><!--之後再優化成clearfix--></div>
</div><!--all_lv2-->
<div style="clear:both"></div>
</div>
<script>
if( $('.lv2').length >1 ){
//如果有第二層，就要開始畫第一層(lv1)跟第二層(lv2)的關係線
$('.lv1').after('<div class="ver_line">Line</div>'+ //垂直線
'<div class="hor_line"></div>' //平行線
);
//有幾組第二層
var max_number_of_lv2 = $('ul.lv2').length;
//算出第一個ul.lv2的寬度，除以2，是hor_line的margin-left
var first_lv2_width = $('ul.lv2').eq(0).outerWidth();
//最後一個ul.lv2的寬度，除以2，是hor_line的margin-right
var last_lv2_width = $('ul.lv2').eq(max_number_of_lv2-1).outerWidth();
var div_org_chart_margin_left = ( first_lv2_width )/2;
var div_org_chart_margin_right = ( last_lv2_width )/2;
var div_org_chart_width = $('.all_lv2').width();
$('#org_chart').width(div_org_chart_width);
$('.hor_line').css( { 'margin-left' : div_org_chart_margin_left , 'margin-right' : div_org_chart_margin_right });
//增加除了第一個(最左邊)以及除了最後一個(最右邊)的其他ul.lv2連結lv1的垂直線
for(var i = 1; i <=(max_number_of_lv2-1-1);i++){
$('.hor_line').after('<div class="single_hor_line"></div>');
//以此例來說在第二個與第三個ul.lv2上方增加div.single_hor_line作為ul.lv2的垂直線
$('.single_hor_line').eq(0).css('left','242px'); //162(152+10 )+81(162/2)
$('.single_hor_line').eq(1).css('left','418px');
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment