发表新帖
发表新帖

Display value in jQueryUI ProgressBar

前端 未结
关注
6 1675
滥情空心
滥情空心 2020-12-14 07:13

I\'ve set up a simple jQuery UI ProgressBar:
相关标签:
6条回答
  • 醉话见心
    2020-12-14 07:38 
        <style>
        #progress {
            height: 18px;
        }

        #progress .ui-progressbar {
            position: relative;
        }

        #progress .ui-progressbar-value {
            margin-top: -20px;
        }

        #progress span.caption {
            display: block;
            position: static;
            text-align: center;
        }

    </style>
</head>
<body>
    test
    <div id="progressbar"></div>
    <br>
    test2
    <div id="progressbar2"></div>

    <script>
        $("#progressbar").progressbar({
            max : 1024,
            value : 10
        });

        $("#progressbar2").progressbar({
            value : 50
        });

        $(document).ready(function() {
            $("#progressbar ").children('div.ui-progressbar-value').html('10');
            $("#progressbar2 ").children('div.ui-progressbar-value').html('50%');

        });

    </script>

</body>

    0 讨论(0)
  • 长发绾君心
    2020-12-14 07:48

    Instead of introducing another element (span) and a new style, leverage what is already there like this:

    var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

    The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).

    If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:

    .ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}
    0 讨论(0)
  • 忘了有多久
    2020-12-14 07:50

    I used this:

    <div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
    0 讨论(0)
  • 情深已故
    2020-12-14 07:52

    After fiddling around with some solutions, based on the answers here, I've ended up with this one:

    Html:

    <div id="progress"><span class="caption">Loading...please wait</span></div>

    JS:

    $("#progress").children('span.caption').html(percentage + '%');

    (To be called inside the function that updates the progressbar value)

    CSS:

    #progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

    Advantages:

    • Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
    • No JS strange manipulation
    • Simple and minimal CSS
    0 讨论(0)
  • 一向
    2020-12-14 07:59

    The way I did it was:

    <div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

    You can adjust the margin-top and margin-left so that the text is in the center of the progress bar. Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page

    Hope this help

    0 讨论(0)
  • 天涯浪人
    2020-12-14 08:04

    This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.

    Html:

     <div class="progress"><span>70%</span></div>

    Script:

    $(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

    CSS:

    .progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}​

    Working sample: http://jsfiddle.net/hasYK/

    0 讨论(0)
 看不清?
提交回复
热议问题