25.01.2016, 17:27
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
Mess4me,
он все подставляет, но прогресс бар не работает
|
|
25.01.2016, 17:40
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
Mess4me,
и да вместо value: circles.data("value"), подставлял число и оно работало
|
|
25.01.2016, 17:48
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
Mess4me,
А если сделать вручную, то все они загрузятся со значением 0.3, а не 0.3, 0.4, 0.5
<div id="circles">
<div class="circle" data-value="0.3">
<strong></strong>
</div>
<div class="circle" data-value="0.4">
<strong></strong>
</div>
<div class="circle" data-value="0.5">
<strong></strong>
</div>
|
|
25.01.2016, 17:58
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
Mess4me,
так, последнее решил, теперь чтобы из массива работали нужно
|
|
25.01.2016, 18:11
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
Artem_A,
теперь
var newCicles = document.querySelectorAll('.circle');
и в цикле
c4.circleProgress({
startAngle: -Math.PI /2 * 8 ,
lineCap: 'round',
value: c4.data("value"),
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
});
|
|
25.01.2016, 18:15
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
Artem_A,
теперь так наверное
var newCicles = document.querySelectorAll('.circle');
newCicles.forEach(function (el) {
el.circleProgress({
startAngle: -Math.PI /2 * 8 ,
lineCap: 'round',
value: el.getAttribute('data-value'),
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
});
|
|
25.01.2016, 18:27
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
в общем мы сделали, вот код
var progressBarArray1 = ["0.75","0.36","0.21"];
var progressBarArray2 = ["0.25","0.43","0.33"];
var progressBarArray3 = ["0.40","0.75","0.54"];
var progressBarArray4 = ["0.75","0.78","0.46"];
var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];
$(function(){
var circles = $('div.circle');
var lis = $('#nav_slider a');
lis.on('click', function (a) {
var inx = $(this).index();
circles.each(function(element){
$(this).circleProgress({
startAngle: -Math.PI /2 * 8 ,
size: 130,
lineCap: 'round',
value: progressBarArrays[inx][element],
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
})
});
$('.activeSlide.detailsIcon').click()
var el = $('div.circle');
var inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if(!inited){
$(this).circleProgress({
value: $(this).data("value")
});
//inited = true;
}
});
});
|
|
25.01.2016, 18:27
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
Mess4me,
Спасибо большое за помощь и терпение!!
|
|
25.01.2016, 18:28
|
Профессор
|
|
Регистрация: 03.11.2014
Сообщений: 263
|
|
Artem_A,
|
|
25.01.2016, 18:31
|
Аспирант
|
|
Регистрация: 17.01.2016
Сообщений: 49
|
|
Mess4me,
только еще одно но, когда скроллишь он делает задержки 01% 01% 01% дергается, а потом только загружается, и если скролл убираешь потом опять приходишь к прогресс бару он заново загружается
|
|
|
|