网页制作的过程中,关系图倒是不会太经常遇到,但是如果是碰到分销或者多级代理的项目,几乎是肯定要做出来的,一开始我是完全依赖插件实现复杂的效果,但是互联网上这类插件很少,而且对于响应式页面的支持很差劲,所以还是需要想办法自己敲。一开始作出来的很简单,只通过多级嵌套和外边距缩进的方式来大概的体现用户的层级关系,但是最近深入的学习了jquery之后,也逐渐的掌握了实现简单阶梯关系图的办法。
代码不多,主要是html和css,js负责补充完善。
原理说明:
1.下级套在上级div中且有向左的内外边距,实现缩进效果。
2.虚线是设置了边框的div,采用css定位,竖线高度为100%,和外部div高度相同,但是div内最后一个子元素div中的竖线只有一半,防止超出。而横线为200,大部分被隐藏,留出部分刚好接上竖线。
3.一个用户的div高度是写死的80px,且超出部分隐藏,但是点击展开按钮后,高度变为了auto自动,所以下面的元素会直接全部出现。
html代码(仅供参考),最外面还有一个id为tx的div包住了主要代码:
<div class="group-box tb">
<div class="hr"></div>
<div class="wr"></div>
<div class="group-u shadow white relative">
<div class="g-pic left">
<img src="img/Avatar.jpg"/>
</div>
<div class="g-text left">
<h5>王麻子</h5>
<p class="text-success">区代理</p>
</div>
<a href="#" class="ai add block absolute"><i class="ico"></i></a>
<a href="#" class="ai subtract block absolute hidden"><i class="ico"></i></a>
</div>
<div class="group-box tb">
<div class="hr"></div>
<div class="wr"></div>
<div class="group-u shadow white">
<div class="g-pic left">
<img src="img/Avatar.jpg"/>
</div>
<div class="g-text left">
<h5>王麻子</h5>
<p class="text-success">区代理</p>
</div>
<a href="#" class="ai add block absolute"><i class="ico"></i></a>
<a href="#" class="ai subtract block absolute hidden"><i class="ico"></i></a>
</div>
<div class="group-box tb">
<div class="hr"></div>
<div class="wr"></div>
<div class="group-u shadow white">
<div class="g-pic left">
<img src="img/Avatar.jpg"/>
</div>
<div class="g-text left">
<h5>王麻子</h5>
<p class="text-success">区代理</p>
</div>
<a href="#" class="ai add block absolute"><i class="ico"></i></a>
<a href="#" class="ai subtract block absolute hidden"><i class="ico"></i></a>
</div>
<div class="group-box tb">
<div class="hr"></div>
<div class="wr"></div>
<div class="group-u shadow white">
<div class="g-pic left">
<img src="img/Avatar.jpg"/>
</div>
<div class="g-text left">
<h5>王麻子</h5>
<p class="text-success">区代理</p>
</div>
</div>
</div>
</div>
</div>
<div class="group-box tb">
<div class="hr"></div>
<div class="wr"></div>
<div class="group-u shadow white">
<div class="g-pic left">
<img src="img/Avatar.jpg"/>
</div>
<div class="g-text left">
<h5>王麻子</h5>
<p class="text-success">区代理</p>
</div>
<a href="#" class="ai add block absolute"><i class="ico"></i></a>
<a href="#" class="ai subtract block absolute hidden"><i class="ico"></i></a>
</div>
<div class="group-box tb">
<div class="hr"></div>
<div class="wr"></div>
<div class="group-u shadow white">
<div class="g-pic left">
<img src="img/Avatar.jpg"/>
</div>
<div class="g-text left">
<h5>王麻子</h5>
<p class="text-success">区代理</p>
</div>
</div>
</div>
</div>
</div>
很简单,就是子级写在父级里面,不断嵌套下去,而且子级写相对定位,控制内部元素的位置,我精简了css,所以出现许多共用的class。但是基本元素还是有的,比如横线对应div,竖线对应div,用户主体div,还包括两个a标签按钮。
CSS代码如下:
/*共用class*/
.left{float:left;}
.tb{padding-top:5px;
padding-bottom:5px;}
.white{background:#fff;}
.shadow{-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);
box-shadow:0 1px 5px rgba(0,0,0,.2);}
.absolute{position:absolute;}
.relative{position:relative;}
.text-success{color:#12a052;}
/*主要定义*/
.group-box{height:80px;
width:100%;
padding-left:10px;
position:relative}
.group-box .group-box{margin-left:20px;
padding-left:20px;}
.group-box .group-box .wr{height:100%;
width:2px;
position:absolute;
left:0px;
top:0px;
border-left:solid 1px #ccc}
.group-box .group-box .hr{width:100px;
height:2px;
position:absolute;
left:0px;
top:39px;
z-index:1;
border-top:solid 1px #ccc;}
.group-box .group-box .group-u{z-index:10;
position:relative}
.group-u{width:200px;
height:70px;
margin-bottom:10px;}
.g-pic{width:70px;}
.g-pic img{width:50px;
height:50px;
margin:10px;
border-radius:50%;}
.g-text h5{margin-top:15px;}
.group-u .ai{width:30px;
height:30px;
font-size:20px;
font-weight:bold;
line-height:30px;
text-align:center;
right:10px;
top:18px;}
.group-box .last .wr{height:40px !important;}
CSS实现了对元素的定位和样式的定义,比如竖线横线的宽度,高度,位置等等,最终的效果是如下图,展示无法展开,下级元素被隐藏。
然后,虽然不多,但是最重要的js代码(需要引入jquery,原生太难写了):
$(function(){
$(".add").click(function() {
$(this).addClass("hidden");
$(this).next().removeClass("hidden");
$(this).closest('.group-box').css("height","auto");
});
$(".subtract").click(function() {
$(this).addClass("hidden");
$(this).prev().removeClass("hidden");
$(this).closest('.group-box').css("height","80px");
});
//group-box下如果有同名的子元素,也就是父元素下存在子元素,则给最后一位添加last这个类,让右侧竖线的高度变为原本的一半,防止超出。
$(".group-box").children(".group-box:last-child").addClass("last");
//如果是第一级的group-box,竖线隐藏掉。
$("#tx").children(".group-box").children(".wr").hide();
});
这段js首先实现了通过右侧按钮控制高度的变化,也就是子元素的隐藏显示,然后再开始对线条进行完善,从而完美的实现了梯形图。
教程就到这里,其实看起来很难,做起来了解基本的原理后,就特别简单了,因为是公司的项目,我就不分享源代码下载了。
【规则之树版权所有,转载注明来源】