Встроенный текст JQuery Progress Bar

Question

Я пытаюсь использовать базовый индикатор выполнения, но я не могу понять команду css /, чтобы фактически поместить некоторый текст в панель.Я использую этот индикатор: http://docs.jquery.com/UI/Progressbar, однако я открыт для других, если они так же просты в реализации.Я хочу, чтобы он отображал в левом углу некоторую статическую информацию, а затем процент завершения где-то в правом разделе.Все, что я пытался сделать, просто отображало информацию ниже или сбоку.Также я не уверен, как на самом деле сделать это изменение CSS на основе метода 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);
        }

        });     
}

Спасибо

Answer 1

Я не знаком с плагином, но с помощью CSS вы можете просто расположить div с надписью над индикатором выполнения. Я не уверен, что он будет работать с вложенными элементами div, поскольку внутренний элемент div может быть удален при отображении содержимого индикатора выполнения.

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

Z-индекс не должен быть проблемой, но если вы хотите изменить порядок делений, вам, возможно, придется убедиться, что текст имеет больший 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>");

Answer 2

Я усовершенствовал уже разработанную концепцию progressbar , которая основана на jquery и CSS (но не использует jquery-ui) Если вам нравится, вы можете посмотреть следующую ссылку, чтобы узнать подробности:

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

Надеюсь, это поможет.