jQuery UI modal progress bar

Question

У меня есть файл в php, который загружает файл и извлекает его содержимое. Теперь я выполняю этот файл периодически, создавая командный файл и назначая его планировщику. Как я смогу всплывать индикатор выполнения, который показывает состояние файла задачи, например, загрузку, извлечение и т. Д .... Мне нужно показать индикатор выполнения только тогда, когда задача выполняется, например, с 18:00 ежедневно ...

так: http://www.codeproject.com/KB/scripting/loadingbox/load1.JPG

Answer 1

код для добавления описания-текст в ProgressBar (если нужно)

<style> 
     .ui-progressbar-text{ 
     width:100%; 
     position:relative; 
     top:-17px; 
     text-align:center; 
     } 
    </style> 
    <script> 
    $(document).ready(function() { 
    $("#progressbar").progressbar() 
     .append('<div class="ui-progressbar-text" ></div>'); 
    </script> 

сценарий горе запроса текст-файл когда-либо 200мс:

window.setInterval(function(){ 
    $.get('currenttask.txt', function(data) { 
    $('#progressbar') 
     .progressbar({value: data.split(";")[0]}) //update the progressbar-value 
     .find('.ui.progressbar-text') //update the progressbar-description 
     .html(data.split(";")[1]) 
     .end() 
     ; 
    }); 
},200); 

текст-файл:

--begin of file 
"30;extracting" 
--end of file 

РНР-скрипт создает текстовый файл с одной строкой, который содержит значение и текст, который представляет текущую выполняющуюся задачу.

Answer 2

Вы устанавливаете ход прогресса бар себя .progressbar("value" , [value]) функции.

Вам необходимо будет обработать процент, загруженный из текущего процесса, чтобы это работало. Например, вы можете показать индикатор прогресса, чтобы предварительно очистить все ваши изображения.

// Define all image locations. 
var source = ["apple.jpg", "orange.jpg", "pear.jpg", "banana.jpg"]; 
// Store HTML image objects in an array. 
var imgObj = []; 
// Store count of fully loaded images. 
var imagesLoaded = 0; 

for(var i in source) { 
    // Create each image object, assign load function and 'src' attribute. 
    imgObj[i] = new Image(); 
    imgObj.onload = function(e) { imageLoaded(e, source.length); 
    imgObj.src = source[i]; 
} 

function imageLoaded(e, loadTotal) { 
    // Calculate percent of images loaded, send value to jquery UI element. 
    imagesLoaded++; 
    $('#myProgressBar').progressbar("value", 100 * (imagesLoaded/loadTotal)); 
} 

Answer 3

Я использую в себе модаль с прядильным гифом внутри, когда задача завершена, он информирует пользователя и закрывает его.

Если вы хотите что-то более сложное, как истинный прогресс-бар (в процентах) JQuery UI имеет прогресс бар виджет, где вы можете установить прогресс по среднему

.progressbar({ value: x });