JQuery 진행률 표시 줄 인라인 텍스트

그러나 기본 진행률 표시 줄을 사용하려고하지만 실제로 CSS에서/s 명령을 사용하여 바 내부에 텍스트를 넣을 수 없습니다. 이 진행 표시 줄을 사용하고 있습니다 : http://docs.jquery.com/UI/Progressbar 그러나 구현하기가 간단하다면 다른 것들도 열어 둡니다. 왼쪽 된 모서리에 일부 정적 정보를 표시 한 다음 올바른 부분의 전체 비율을 표시하려고합니다. 모든 CSS 내가 방금 정보 디스플레이를 아래 또는 측면으로 만들려고했습니다. 뿐만 아니라 사실이 CSS를 JQuery 메서드 (JQuery를 처음 사용하는)를 기반으로 변경하는 방법을 확신 할 수 없습니다.JQuery 진행률 표시 줄 인라인 텍스트

다음은 제 실제 JQuery입니다. url 값을 이해하려고 시도하지 마십시오. 단지 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); 
     } 

     });  
}

덕분에

출처

2010-06-10 Craig

나는 플러그인에 익숙하지 해요,하지만 CSS로 당신은 진행률 표시 줄을 통해 글자 사업부를 배치 할 수 있습니다. 진행 막대의 내용이 렌더링 될 때 내부 div가 지워질 수 있기 때문에 중첩 된 div와 함께 작동하는지 잘 모르겠습니다.

위와 왼쪽 위치로 놀아서 원하는 위치에 정확하게 텍스트를 배치 할 수 있습니다. 얼굴에서 동적으로 왼쪽으로 바꿀 수 있으므로 텍스트가 막대와 함께 움직입니다. 그러나 약간 힘들 수 있습니다.

Z- 색인은 문제가 아니지만 div 순서를 변경하려면 텍스트가 막대보다 큰 z- 색인을 포함해야합니다.

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>");

출처

2010-06-14 00:39:47

내가 이것을 시도했을 때, 내부에있는 대신에 바로 아래에 프로그램의 글을 그립니다. – Craig

위의 CSS를 변경 했으므로 이제 텍스트가 맨 위에 있어야합니다. –

단순히 JQuery와 및 CSS있는 이미 개발 progressbar 개념에 개선했습니다 (하지만 jquery-ui는 사용하지 않음). 당신은 당신이 세부 사항을 가진 내용은 다음 링크에서 볼 수 좋아하는 경우에 : 도움이

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

희망을.

출처

2013-04-27 22:07:01

JQuery 진행률 표시 줄 인라인 텍스트

답변

관련 문제