案例记录,前端开发利用jquery实现阶梯关系图

网页制作的过程中,关系图倒是不会太经常遇到,但是如果是碰到分销或者多级代理的项目,几乎是肯定要做出来的,一开始我是完全依赖插件实现复杂的效果,但是互联网上这类插件很少,而且对于响应式页面的支持很差劲,所以还是需要想办法自己敲。一开始作出来的很简单,只通过多级嵌套和外边距缩进的方式来大概的体现用户的层级关系,但是最近深入的学习了jquery之后,也逐渐的掌握了实现简单阶梯关系图的办法。
代码不多,主要是html和css,js负责补充完善。
Snap.jpg

原理说明:

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">&#xe6b9;</i></a>
        <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</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">&#xe6b9;</i></a>
            <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</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">&#xe6b9;</i></a>
                <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</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">&#xe6b9;</i></a>
            <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</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实现了对元素的定位和样式的定义,比如竖线横线的宽度,高度,位置等等,最终的效果是如下图,展示无法展开,下级元素被隐藏。
Snap1.jpg

然后,虽然不多,但是最重要的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首先实现了通过右侧按钮控制高度的变化,也就是子元素的隐藏显示,然后再开始对线条进行完善,从而完美的实现了梯形图。

教程就到这里,其实看起来很难,做起来了解基本的原理后,就特别简单了,因为是公司的项目,我就不分享源代码下载了。
【规则之树版权所有,转载注明来源】

发表评论
加载中...

相关文章