Văn bản nội dòng thanh tiến trình JQuery

Question

Tôi đang cố gắng sử dụng thanh tiến trình cơ bản tuy nhiên tôi không thể tìm ra lệnh css/để thực sự đặt một số văn bản bên trong thanh. Tôi đang sử dụng thanh tiến trình này: http://docs.jquery.com/UI/Progressbar tuy nhiên tôi mở cửa cho những người khác nếu họ chỉ là đơn giản để thực hiện. Tôi muốn nó hiển thị ở góc trái một số thông tin tĩnh và sau đó một tỷ lệ phần trăm hoàn thành ở đâu đó trong phần bên phải. Tất cả css tôi đã cố gắng làm chỉ cần thực hiện hiển thị thông tin bên dưới hoặc bên cạnh. Cũng như tôi không chắc chắn làm thế nào để thực sự có sự thay đổi CSS này dựa trên một phương pháp JQuery (mới để JQuery).

bên dưới là JQuery thực tế của tôi. Đừng cố gắng hiểu giá trị url chỉ giả sử nó trả về 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); 
     } 

     });  
} 

Cảm ơn

Answer 1

Tôi không quen thuộc với các plugin, nhưng với CSS bạn chỉ có thể xác định vị trí các div với chữ trên thanh tiến trình. Tôi không chắc chắn nếu nó sẽ làm việc với div lồng nhau, kể từ div bên trong có thể bị xóa khi nội dung cho thanh tiến trình được trả lại.

Bạn có thể chơi xung quanh với các vị trí trên cùng và bên trái để định vị văn bản chính xác nơi bạn muốn. Mặt bạn có thể thay đổi động, để văn bản chuyển động với thanh, mặc dù điều này có thể phức tạp hơn một chút.

Chỉ số Z không phải là vấn đề, nhưng nếu bạn muốn thay đổi thứ tự của các div, bạn có thể phải đảm bảo rằng văn bản có chỉ số z lớn hơn thanh.

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> 

Các JS:

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

Answer 2

tôi đã cải tiến một đã phát triển progressbar khái niệm mà chỉ đơn giản là jquery và CSS dựa trên (nhưng không sử dụng jquery-ui). Nếu bạn thích bạn có thể nhìn vào liên kết sau để có thông tin chi tiết của nó:

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

Hy vọng rằng sẽ giúp.