12
HTML/CSS/jQuery>progess grafik
bu tasarlanmış akış/ilerleme grafiği oluşturmaktır çalışıyorum ve çeşitli istifli satırlar daha sonra bir aşağı oku ve şunları nasıl düşünemiyorum Bir önceki satırın yönüne göre, bir önceki satırın yönüne göre tersine doğru, ardından sağdan sola, sonra sağdan sola, yönüne göre ters yön oku ...
Bu, tüm sorumluluğa duyarlı çalışmak zorundadır. kod örneğine göre geleneksel bir yol burada -
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() {
\t $(this).after("<div class='arrow-right'></div>")
\t
});
}
if (windowWidthSize <= 449) {
$('.projectStatusWrapper li:not(:last-child)').each(function() {
\t $(this).after("<div class='arrow-down'></div>")
\t
});
}
}
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() {
\t $(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() {
\t $(this).css("height",flowchartLIHeight+"px")
});
\t
}
makeallflowchartLIsSameHeight();
$(window).load(function() { makeallflowchartLIsSameHeight(); });
$(window).resize(function() { makeallflowchartLIsSameHeight(); });.projectStatusWrapper {
width: 100%;
float: left; \t
}
.projectStatusWrapper ul {
margin: 0;
padding: 0;
}
.projectStatusWrapper li {
display: inline-table;
padding: 0;
margin: 0;
list-style: none;
border: 2px solid #74b4df; \t
-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>Tasarımla ilgili olarak nasıl çalışılacağı hakkında herhangi bir fikir var mı?
, bazı ince ayar gerekiyor? Örneğin, flexbox veya CSS sütunlarını alabilir misin? (Yardım edebileceklerini bilmiyorum, ama eğer kullanamıyorsanız/kullanamıyorsanız, insanların bilmesi iyi olur.) –
Kısıtlama yok - sadece iyi/akıllı bir işaretleme çözümüne ihtiyaç duyar. Tasarlanan çözümü yansıtmak için duyarlı bir şekilde. Ancak olabildiğince basit tutmak istiyorum. – dubbs