Pasek postępu JQuery Pasek postępu

Question

Próbuję użyć podstawowego paska postępu, ale nie jestem w stanie obliczyć polecenia css /, aby umieścić tekst wewnątrz paska. Używam tego paska postępu: http://docs.jquery.com/UI/Progressbar jednak jestem otwarty na inne, jeśli są one tak proste w realizacji. Chcę, aby wyświetlał w lewym rogu niektóre informacje statyczne, a następnie procent wypełniony gdzieś w prawej części. Wszystkie css, które próbowałem zrobić, po prostu wyświetlały informacje poniżej lub z boku. Jak również nie jestem pewien, jak faktycznie mieć tę zmianę CSS w oparciu o metodę JQuery (nowe w JQuery).

Poniżej znajduje się mój aktualny JQuery. Nie próbuj zrozumieć wartości adresu URL, zakładając, że zwraca ona 0-100.

<script type="text/javascript"> 

    var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done"; 

    $(function() { 
    var progress = 0; 
    //alert("some value" + value, value); 
    $("#progressbar").progressbar({ progress: 0 }); 
    setTimeout(updateProgress, 500); 

}); 


function updateProgress() { 
    var progress; 
    $.get(url, function(data) { 
     // data contains whatever that page returns  

     if (data < 100) { 
      $("#progressbar") 
       .progressbar("option", "value", data); 
      setTimeout(updateProgress, 500); 
     } else { 
      $("#progressbar") 
       .progressbar("option", "value", 100); 
     } 

     });  
} 

Dzięki

Answer 1

nie jestem zaznajomiony z wtyczką, ale z CSS można po prostu umieścić div z napisem na pasku postępu. Nie jestem pewien, czy to działałoby z zagnieżdżonymi divami, ponieważ wewnętrzny div może zostać usunięty, gdy zawartość paska postępu zostanie wyrenderowana.

Możesz grać z górną i lewą pozycją, aby umieścić tekst dokładnie tam, gdzie chcesz. W twarz można dynamicznie zmieniać lewy, tak aby tekst poruszał się z paska, choć może to być nieco trudniejsze.

Indeks Z nie powinien stanowić problemu, ale jeśli chcesz zmienić kolejność elementów div, możesz mieć pewność, że tekst ma większy indeks Z niż pasek.

CSS:

#bardivs { 
    width:400px; /* or whatever the of the porgress bar is */ 
    /* 
     The position of #bardivs must be something other than 
     static (the default) so that its children will be positioned 
     relative to it. 
    */ 
    position:relative; 
} 
#progresstext { 
    position:absolute; 
    top:0; 
    left:0; 
} 

HTML:

<div id="bardivs"> 
    <div id="progressbar"></div> 
    <div id="progresstext"></div> 
</div> 

JS:

$("#progressbar").progressbar("option", "value", data); 
$("#progresstext").html("<p>Hard code or string here<p>"); 

Answer 2

mam poprawić już rozwiniętej progressbar koncepcji, która jest po prostu jQuery i CSS na podstawie (ale nie używając jquery-ui). Jeśli chcesz, możesz spojrzeć na poniższy link, za to, że jego szczegóły:

http://progressbar-simple.blogspot.com/

nadzieję, że pomoże.