Веб-интерфейс и отображение прогресса

karkar

Есть небольшое приложение с примитивным веб-интерфейсом. Есть долгая операция - некая обработка десятков файлов. Хочется иметь возможность отобразить ее прогресс - в виде прогрессбара или текстом. Какие есть самые простые способы это сделать, желательно без привлечения тяжеловесных библиотек?

okis

progress bar примитивный написан для asp.net и php точно.
http://lmgtfy.com/?q=%28php%7Casp.net%29+progress+bar

karkar

Нашел несколько решений для вывода прогрессбара:
1. Последовательный вывод квадратиков (каждый квадратик - спан с нужным стилем).
2. Последовательный вывод дивов с фиксированной позицией и увеличивающейся шириной.
3. Последовательный вывод кусочков javascript'a, меняющих ширину выведенного ранее элемента.
Наверняка есть еще около 35213 способов.
Какой из них более кошерный? Или можно смело брать любой?

okis

Да какой больше нравится. Тебе же не потребуется рисовать более 9000 таких квадратиков.
—
Я буду долго гнать велосипед,
В глухих лугах его остановлю...

Dasar

Какой из них более кошерный?

имхо, более кошерный - это сервис гонит счетчик, а на морде этот счетчик java script-ом конвертиться в ширину.

Bibi



<style type="text/css">

   .progress-container { width: 200px; height: 11px; border:1px red solid; }

   .progress { background-image: url( http://www.tmtsoftware.com/Portals/8/Containers/TMTSoftware/little_square.gif ); background-repeat: repeat-x; }

</style>



<div class="progress-container">

   <div id="bar" class="progress" style="width:0%;height:100%"></div>

</div>



<script type="text/javascript">

   // initialize

   window.onload = function {

      var delay = 500;

      setTimeout( function { showCurrentProgress( myDisplay, delay ) }, delay );

   }



   // polling the source of knowledge until we finish

   function showCurrentProgress( display, delay ) {

      var CurrentProgress = getCurrentProgress;

      display( CurrentProgress );

      if( CurrentProgress < 100 ) {

         setTimeout( function { showCurrentProgress( display, delay ) }, delay );

      }

   } 



   // presentation

   function myDisplay( progress ) {

      var bar = document.getElementById( 'bar' );

      bar.style.width = progress + '%';

   }



   // emulation of source of knowledge

   {

      var totalProgress = 0;

      function getCurrentProgress {

         return totalProgress += 10;

      }

   }

</script>

IG_rok777

Эта анимация к прогрессу никакого процесса не имеет отношение. Или задача и состоит в том, чтобы нарисовать анимацию, а как привязывать к реальному прогрессу не интересует? И зачем надо было последние строчки в блок объединять.

 {

      var totalProgress = 0;

      function getCurrentProgress {

         return totalProgress += 10;

      }

   }

Bibi

по-хорошему, там надо было написать



   var getCurrentProgress = (function {

      var totalProgress = 0;

      return function {

         return totalProgress += 10;

      }

   };

почему не имеет? моя идея в том, что вместо этого блока кода, который я сейчас поправил, надо засунуть опрос сервера. поэтому там и написано "эмуляция".
хотя, возможно, я чего-то не понимаю

IG_rok777

По моему прогресс в виде процентов считать лучше на сервере.

Bibi

вообще-то, я про это и написал

IG_rok777

Серверная часть тоже на JavaScript написана? Если нет, то по-моему проще использовать функцию типа setProgress.

IG_rok777

Сорри, понял я говорил про "взять", а ты про "дать".

karkar

сервис гонит счетчик, а на морде этот счетчик java script-ом конвертиться в ширину

А это можно реализовать в пределах одного ответа сервера (отдаем страницу, потом потихоньку там же отдаем значение прогресса или придется делать отдельный, который будет запрошен javascript'ом?

IG_rok777

можно сделать что-нибудь типа отдачи 100 символов и по мере их поступления на клиент изменять прогресс.
--------------------------
Главное не привысить время ожидания ответа.

hwh2010

хехе, сразу видно, что ты не пользуешься поиском по форуму

Оставить комментарий