Clever Geek Handbook

HTML tree with split background

I tried to create a tree like this image. But I can't fix the stripes for a specific row. When decreasing browser stripes, background stripes are not fixed to a specific li. I am using angular -tree library for this. Sample code is available at https://jsfiddle.net/shibincc/npLjrt66/

  •           
        <i class="glyphicon glyphicon-triangle-bottom" ng-show="(node[childNodeLabel].length || !node.isLeafNode) &amp;&amp; !node.collapsed" ng-click="selectNodeHead(node)"></i>
        <i class="glyphicon glyphicon-stop ng-hide" ng-hide="node[childNodeLabel].length || !node.isLeafNode"></i>
        <i class="node-type JOB" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" ng-click="selectNodeLabel(node)"></i>
        <span ng-class="node.selected" ng-click="selectNodeLabel(node)" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" class="ng-binding">Job 2</span>

    </span>
    <section class="fokker-tree" style="font-size: 14px;font-size: 14px" ng-hide="node.collapsed" tree-config="treeConfig" tree-data="node[childNodeLabel]">
        <ul>
            <li ng-repeat="node in treeData track by $index" class="overflow-ellipsis" ng-if="node.nodeType">
                <span ng-if="node.nodeType == 'data'" class="ng-scope">

                    <i class="glyphicon glyphicon-triangle-bottom" ng-show="(node[childNodeLabel].length || !node.isLeafNode) &amp;&amp; !node.collapsed" ng-click="selectNodeHead(node)"></i>
                    <i class="glyphicon glyphicon-stop ng-hide" ng-hide="node[childNodeLabel].length || !node.isLeafNode"></i>
                    <i class="node-type JOB" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" ng-click="selectNodeLabel(node)"></i>
                    <span ng-class="node.selected" ng-click="selectNodeLabel(node)" ng-mouseleave="onMouseRemove(node,$event)" ng-mouseover="onMouseOver(node,$event)" class="ng-binding">Job 2</span>

                </span>
                <section class="fokker-tree" style="font-size: 14px;font-size: 14px" ng-hide="node.collapsed" tree-config="treeConfig" tree-data="node[childNodeLabel]">

                </section>

            </li>
        </ul>
    </section>

</li>

Sample tree image

+3


source to share


1 answer


You can use linear-gradient to achieve a split background.

background-size: auto 4em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);

      

        
        
        
      

    


div[angular-treeview] {
  /* prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* default */
  font-family: Tahoma;
  font-size:13px;
  color: #555;
  text-decoration: none;
}

div[tree-model] ul {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

div[tree-model] li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 20px;
}

div[tree-model] li .expanded {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
  background-repeat: no-repeat;
}

div[tree-model] li .collapsed {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
  background-repeat: no-repeat;
}

div[tree-model] li .normal {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
  background-repeat: no-repeat;
}

div[tree-model] li i, div[tree-model] li span {
  cursor: pointer;
}

div[tree-model] li .selected {
  background-color: #aaddff;
  font-weight: bold;
  padding: 1px 5px;
}


.f-tree {
  /* prevent user selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul.f-tree {
  margin: 0;
  padding: 0;
  list-style: none; 
  border: none;
  overflow: hidden;
}

.f-tree li {
  position: relative;
  padding: 5px 0 0 20px;
  line-height: 20px;
}

.f-tree li .expanded {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
  background-repeat: no-repeat;
}

.f-tree li .collapsed {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
  background-repeat: no-repeat;
}

.f-tree li .normal {
  padding: 1px 10px;
  background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
  background-repeat: no-repeat;
}

.f-tree li i, .f-tree li span {
  cursor: pointer;
}

.f-tree li .selected {
  background-color: #aaddff;
  font-weight: bold;
  padding: 1px 5px;
}

.f-tree .node-type{
  background-image: url("../list.png");
  padding: 1px 10px;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 1px 13px;
}


.f-tree .load-more{
  cursor : pointer;
}

.f-tree{
  position: relative;
  margin:0 0 0 1em; /* indentation */
  padding:0;
  /*background: #000*/
}

.f-tree:before{
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:7px;
  border-left:1px dotted #BBB;
}

.f-tree li{
   margin:0;
  padding:0; /* indentation + .5em */
  line-height:2em; /* default list item `line-height` */
  font-weight:bold;
  position:relative;
}
.f-tree li .node-label{
  padding-left: 2em;
  
}
.inner-tree li{
   padding:0 2em;
}

.inner-tree li .node-label{
  padding-left: 0;
  
}

.f-tree li:before {
  content:"";
  display:block;
  width:20px; /* same with indentation */
  height:0;
  border-top:1px dotted #BBB;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:7px;
}

.parent-node{
  position: absolute;
  height: 19px;
  left: 0px;
  top:2px;

  background: url("../folder.png")
}

.f-tree:nth-child(2){
  background: #fff
}

.wrapper{
    background-size: auto 4em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
      

        
        
        
      

    
<ul class="tree-list f-tree wrapper" tree-config="treeConfig" tree-data="treeData">
   	<li class="tree-node">
      	<i class="node-type parent-node"></i>
      	<span class="node-label">content 1</span>		
      	<ul class="inner-tree tree-list f-tree ">
         	<li class="tree-node">
            	<i class="node-type" ></i>
            	<span  class="node-label">Content 1.1</span>	
            	<ul class="inner-tree tree-list f-tree ">
               	<li class="tree-node">
                  	<i class="node-type"></i>
                  	<span  class="node-label">Content 1.1.1</span>	
                  	<ul class="inner-tree tree-list f-tree ">
                     	<li class="tree-node">
                        	<i class="node-type"></i>
                        	<span  class="node-label">Content 1.1.1.1</span>	
                        	<ul class="inner-tree tree-list f-tree ">
                        	</ul>
                     	</li>
                  	</ul>
               	</li>
            	</ul>
         	</li>
         	<li class="tree-node">
            	<i class="node-type"></i>
            	<span  class="node-label">Content 1.2</span>	
            	<ul class="inner-tree tree-list f-tree ">
               	<li class="tree-node">
                  	<i class="node-type"></i>
                  	<span  class="node-label">Content 1.2.1</span>	
                  	<ul class="inner-tree tree-list f-tree ">
                     	<li class="tree-node">
                        	<i class="node-type"></i>
                        	<span  class="node-label">Content 1.2.1.1</span>	
                        	<ul class="inner-tree tree-list f-tree ">
                        	</ul>
                     	</li>
                     	<li class="tree-node">
                        	<i class="node-type"></i>
                        	<span  class="node-label">Content 1.2.1.2</span>	
                        	<ul class="inner-tree tree-list f-tree ">
                        	</ul>
                     	</li>
                  	</ul>
               	</li>
            	</ul>
         	</li>
      	</ul>
   	</li>
   	<li class="tree-node">
      	<i class="node-type parent-node"></i>
      	<span  class="node-label">content 2</span>	
      	<ul class="inner-tree tree-list f-tree ">
         	<li class="tree-node">
            	<i class="node-type"></i>
            	<span  class="node-label">Content 2.1</span>	
            	<ul class="inner-tree tree-list f-tree ">
            	</ul>
         	</li>
      	</ul>
   	</li>
   	<li class="tree-node">
      	<i class="node-type parent-node"></i>
      	<span  class="node-label">content 3</span>	
      	<ul class="inner-tree tree-list f-tree "></ul>
   	</li>
</ul>
Run code


+1


source






More articles:


All Articles