Я сделал три вертикальные полосы, поскольку я использую чистый CSS, HTML и jQuery для анимации. Цель состоит в том, чтобы хорошо выглядеть на мобильном устройстве IOS и динамически заполнять определенный параметр, столбцы должны выглядеть как пробирка илиКак минимум, имитируйте пробирку, каждый столбец должен иметь заданные значения, которые будут отображаться в пробирке, для которой jQuery проверяет и соответственно выливает предоставленный параметр в это значение пробирки.Это то, что я сделал до сих пор
Как видно, столбики не похожи на пробирку, значения по умолчанию не выровнены и выходят за пределытрубки и не расположены симметрично вертикально по отношению к пробирке, и, поскольку я не являюсь хорошим разработчиком внешнего интерфейса, мне не удается правильно их настроить и сделать планку немного похожей на пробирку :),Вот код, который я написал до сих пор
$(function() {
var valTest = <?= $phvalues[$typepH]; ?>;
var widthProgress = 0;
var $window = $(window);
var windowSize = $(window).width();
$(".ph-progress > div").each(function(index,value) {
if(windowSize <= 400){
widthProgress += 20;
$('.ph-progress > span').animate({
width: widthProgress
}, 200);
}else{
widthProgress += $(this).height();
$('.ph-progress > span').animate({
width: widthProgress
}, 200);
}
if(parseFloat($.trim($(value).text())) == valTest){
$(this).nextUntil().removeClass('progress-bar-success').addClass('transparent-color');
return false;
}
});
});
$(function() {
var valTestLeu = <?= json_encode($leuvalues[$Leukocytes]); ?>;
var widthProgressLeu = 0;
var $window = $(window);
var windowSize = $(window).width();
$(".leukocites-progress > div").each(function(index,value) {
console.log($(this));
if(windowSize <= 400){
widthProgressLeu += 20;
$('.leukocites-progress > span').animate({
width: widthProgressLeu
}, 200);
}else{
widthProgressLeu += $(this).height();
$('.leukocites-progress > span').animate({
width: widthProgressLeu
}, 200);
}
if(String($.trim($(value).text())) == valTestLeu){
$(this).nextUntil().removeClass('progress-bar-success').addClass('transparent-color');
// $('.progress > span').finish();
return false;
}
});
});
$(function() {
var valTestNit = <?= json_encode($nitvalues[$Nitrates]); ?>;
var widthProgressNit = 0;
var $window = $(window);
var windowSize = $(window).width();
if(valTestNit == 'POSITIVE'){
$('.nitrates-progress span').css('width','100%');
}else{
$('.nitrates-progress span').css('width','100%');
}
});
.meter {
height: 34px;
position: relative;
background: #D3D3D3;
margin-left: -228px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-top-left-radius: 25px;
padding: 4px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: inline-flex;
height: 27px;
background-color: rgb(3,149,216);
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
}
.progress{
margin-top: 3px !important;
}
.progress div {
position: relative;
display: inline-flex;
margin-right:-4px;
text-align: center !important;
width: 13%;
color: white;
z-index: 10000;
}
@media screen and (max-width: 400px) {
.progress div {
font-size: 10px;
}
.leukocites-progress > div {
font-size: 6px;
margin-top: -4px;
}
}
@media screen and (max-width: 300px) {
.progress div {
font-size: 10px;
}
.leukocites-progress > div {
font-size: 9px;
}
}
/*leukecites bars*/
.leukocites .leukocites-progress{
width: 150px;
-webkit-transform: rotate(270deg) !important;
-moz-transform: rotate(270deg) !important;
-o-transform: rotate(270deg) !important;
-ms-transform: rotate(270deg) !important;
transform: rotate(270deg) !important;
/*margin-left: 155px;*/
}
/*ph progress bar*/
.ph .ph-progress{
width: 150px;
-webkit-transform: rotate(270deg) !important;
-moz-transform: rotate(270deg) !important;
-o-transform: rotate(270deg) !important;
-ms-transform: rotate(270deg) !important;
transform: rotate(270deg) !important;
/*transform: rotateY(180deg) !important;*/
/*margin-left: 5px;*/
}
.ph {
margin-left: 345px;
margin-top: -52px;
}
.ph-progress div{
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}
.leukocites {
margin-left: 80px;
margin-top: 80px;
/*margin-top: 10px !important;*/
}
.leukocites-progress div{
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
font-size: 10px;
}
.nitrates .nitrates-progress {
width: 150px;
-webkit-transform: rotate(270deg) !important;
-moz-transform: rotate(270deg) !important;
-o-transform: rotate(270deg) !important;
-ms-transform: rotate(270deg) !important;
transform: rotate(270deg) !important;
}
.nitrates-progress div {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
font-size: 10px;
}
.nitrates {
margin-left: 218px;
margin-top: -55px;
}
<div class="leukocites">
<div class="progress leukocites-progress meter animate">
<span style="width: 14%; position: absolute"></span>
<div style="width: 14%; border-bottom-left-radius: 8px; border-top-left-radius: 8px;">
NEG
</div>
<div style="width: 14%">
TRACE
</div>
<div style="width: 18%">
SMALL +
</div>
<div style="width: 18%">
MODE ++
</div>
<div style="width: 22%">
LARGE +++
</div>
<div style="width: 14%">
</div>
<div style="width: 14%">
</div>
</div>
</div>
<div class="nitrates">
<div class="progress nitrates-progress meter animate">
<span style="width: 14%; position: absolute"></span>
<div style="width: 14%; border-bottom-left-radius: 8px; border-top-left-radius: 8px;">
<!-- NEGATIVE-->
</div>
<div style="width: 14%">
<!-- POSITIVE-->
</div>
<div style="width: 14%">
POSITIVE
</div>
<div style="width: 14%">
</div>
<div style="width: 14%">
</div>
<div style="width: 14%">
</div>
<div style="width: 14%">
</div>
</div>
</div>
<div class="ph">
<div class="progress ph-progress meter animate">
<span style="width: 14%; position: absolute"></span>
<div style="width: 14%; border-bottom-left-radius: 8px; border-top-left-radius: 8px;">
5
</div>
<div style="width: 14%">
6
</div>
<div style="width: 14%">
6.5
</div>
<div style="width: 14%">
7
</div>
<div style="width: 14%">
7.5
</div>
<div style="width: 14%">
8
</div>
<div style="width: 14%">
8.5
</div>
</div>
</div>
<table width="80%" style="margin:0 auto; margin-top:100px;">
Я думаю, что вся концепция неверна, если кто-то может помочь сделать это должным образом, я буду благодарен.