Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.01.2016, 17:27
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

Mess4me,
он все подставляет, но прогресс бар не работает
Ответить с цитированием
  #12 (permalink)  
Старый 25.01.2016, 17:40
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

Mess4me,
и да вместо value: circles.data("value"), подставлял число и оно работало
Ответить с цитированием
  #13 (permalink)  
Старый 25.01.2016, 17:48
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 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>
Ответить с цитированием
  #14 (permalink)  
Старый 25.01.2016, 17:58
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

Mess4me,
так, последнее решил, теперь чтобы из массива работали нужно
Ответить с цитированием
  #15 (permalink)  
Старый 25.01.2016, 18:11
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 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) + '%');
  });
});
Ответить с цитированием
  #16 (permalink)  
Старый 25.01.2016, 18:15
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 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) + '%');
                });
            });
Ответить с цитированием
  #17 (permalink)  
Старый 25.01.2016, 18:27
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 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;
   }
 });
});
Ответить с цитированием
  #18 (permalink)  
Старый 25.01.2016, 18:27
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

Mess4me,
Спасибо большое за помощь и терпение!!
Ответить с цитированием
  #19 (permalink)  
Старый 25.01.2016, 18:28
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

Artem_A,
Ответить с цитированием
  #20 (permalink)  
Старый 25.01.2016, 18:31
Аспирант
Отправить личное сообщение для Artem_A Посмотреть профиль Найти все сообщения от Artem_A
 
Регистрация: 17.01.2016
Сообщений: 49

Mess4me,
только еще одно но, когда скроллишь он делает задержки 01% 01% 01% дергается, а потом только загружается, и если скролл убираешь потом опять приходишь к прогресс бару он заново загружается
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
Массивы в jquery Modelfak jQuery 5 10.07.2014 23:48
Массивы в jQuery lev-otinov jQuery 1 24.09.2013 18:48
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08
jquery validator и массивы чекбоксов ekkl jQuery 1 16.10.2009 16:26