我试图在
HTML / CSS / jQuery>中构建这个设计的流程/进度图表.
并且不能想像如何使各个堆叠的行包括一个向下的箭头,然后基于上一行的方向的反向箭头,步骤从右到左,然后从左到右,然后从右到左等. ..
这一切都需要响应的工作…我以传统的方式工作,代码示例在这里 –
function sortFlowChartArrows () {
/* clear prev arrow */
$('.arrow-right').each(function() {
$(this).remove();
});
$('.arrow-down').each(function() {
$(this).remove();
});
var windowWidthSize = $(window).width();
if (windowWidthSize >= 450) {
$('.projectStatusWrapper li:not(:last-child)').each(function() {
$(this).after("<div class='arrow-right'></div>")
});
}
if (windowWidthSize <= 449) {
$('.projectStatusWrapper li:not(:last-child)').each(function() {
$(this).after("<div class='arrow-down'></div>")
});
}
}
sortFlowChartArrows();
$(window).load(function() { sortFlowChartArrows(); });
$(window).resize(function() { sortFlowChartArrows(); });
/* PROJECT FLOW CHART - MAKE ALL LIS SAME HEIGHT */
function makeallflowchartLIsSameHeight () {
/* clear value */
$('.projectStatusWrapper li span').each(function() {
$(this).css("height","")
})
var flowchartLIHeight = Math.max.apply( null,$(".projectStatusWrapper li").map( function () {
return $( this ).height();
}).get() );
console.log(flowchartLIHeight)
$('.projectStatusWrapper li span').each(function() {
$(this).css("height",flowchartLIHeight+"px")
});
}
makeallflowchartLIsSameHeight();
$(window).load(function() { makeallflowchartLIsSameHeight(); });
$(window).resize(function() { makeallflowchartLIsSameHeight(); });
.projectStatusWrapper {
width: 100%;
float: left;
}
.projectStatusWrapper ul {
margin: 0;
padding: 0;
}
.projectStatusWrapper li {
display: inline-table;
padding: 0;
margin: 0;
list-style: none;
border: 2px solid #74b4df;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin: 0.5%;
font-weight: 400;
font-family: 'FFMarkWebProHeavy',Helvetica,Arial;
width: 17%;
vertical-align: middle;
text-align: center;
}
.projectStatusWrapper li span {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 15px 20px;
}
.projectStatusWrapper li.complete {
background-color: #74b4df;
color: #fff;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
float: right;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
text-align:center;
position: relative;
left: 43.5%;
margin-top: 5px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="projectStatusWrapper"> <ul> <li class="complete">Step 1</li> <li class="complete">Step 2</li> <li>Step 3</li> <li>Step 4</li> <li>Step 5</li> <li>Step 6</li> <li>Step 7</li> <li>Step 8</li> <li>Step 9</li> <li>Step 10</li> </ul> </div>
关于如何使其按照设计工作的任何想法？
解决方法
我有一个很简单的想法,如果我们接受固定数量的列实际工作.基本上我把箭头放在：之后,使用第n个孩子(6n …)来定义箭头大小写.当然需要一些微调,反正
Codepen demo here
.projectStatusWrapper {
width: 100%;
float: left;
}
.projectStatusWrapper ul {
margin: 0;
padding: 0;
}
.projectStatusWrapper li {
Box-sizing: border-Box;
width: 30.5%;
display: inline-block;
list-style: none;
border: 2px solid #74b4df;
padding: 1%;
margin: 1%;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
font-weight: 400;
font-family: 'FFMarkWebProHeavy',Arial;
position: relative;
vertical-align: middle;
}
.projectStatusWrapper li.complete {
background-color: #74b4df;
color: #fff;
}
.projectStatusWrapper li:after {
content: '';
position: absolute;
z-index: 1;
}
.projectStatusWrapper li:nth-child(6n+4),.projectStatusWrapper li:nth-child(6n+5),.projectStatusWrapper li:nth-child(6n+6) {
float: right;
}
.projectStatusWrapper li:nth-child(6n+1):after,.projectStatusWrapper li:nth-child(6n+2):after {
top: 50%;
right: -19px;
transform: translateY(-50%);
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid tomato;
}
.projectStatusWrapper li:nth-child(6n+3):after,.projectStatusWrapper li:nth-child(6n+6):after {
left: 50%;
bottom: -23px;
transform: translateY(-50%);
border-right: 15px solid transparent;
border-top: 15px solid tomato;
border-left: 15px solid transparent;
}
.projectStatusWrapper li:nth-child(6n+4):after,.projectStatusWrapper li:nth-child(6n+5):after {
top: 50%;
left: -19px;
transform: translateY(-50%);
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid tomato;
}
.projectStatusWrapper li:last-child:after {
display: none;
}
<div class="projectStatusWrapper">
<ul>
<li class="complete">Step 1</li>
<li class="complete">Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
<li>Step 9</li>
<li>Step 10</li>
</ul>
</div>
