web-dev-qa-db-fra.com

Afficher la valeur dans jQueryUI ProgressBar

J'ai mis en place une barre de progression jQuery UI simple:

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

Entre autres choses, j'aimerais afficher du texte dans la barre de progression (pour commencer, je n'utiliserais que la "valeur").

Je n'arrive pas à faire en sorte que cela fonctionne.

Question bonus: Comment formater le texte affiché (couleur, alignement, par exemple)?

javascriptjquery-uiprogress-bar
27
Thorsten

Au lieu d'introduire un autre élément (span) et un nouveau style, utilisez ce qui existe déjà comme ceci:

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

La css("display", "block") doit gérer le cas où la valeur est 0 (l'interface utilisateur jQuery définit un display: none sur l'élément lorsque la valeur est 0).

Si vous regardez la source de La démo , vous remarquerez qu’un <div class="ui-progressbar-value"> est ajouté. Vous pouvez simplement remplacer cette classe dans votre propre CSS, comme:

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}
35
rynop

La façon dont je l'ai fait était:

<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>

Vous pouvez ajuster les marges supérieure et inférieure à gauche de sorte que le texte se trouve au centre de la barre de progression. Ensuite, vous appliquez le plugin progressbar aux éléments dont la classe progressbar est dans la section javascript de la page.

J'espère que cette aide

9
Tri

Après avoir bricolé avec quelques solutions, sur la base des réponses données ici, je me suis retrouvé avec celle-ci:

Html:

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

JS:

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

(À appeler dans la fonction qui met à jour la valeur de la barre de progression)

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;
}

Avantages:

  • La légende est centrée sans positionnement codé (nécessaire si la largeur de la légende change de manière dinamique)
  • Pas de manipulation étrange JS
  • CSS simple et minimal
8
lucianolev

Cette solution permet une largeur flexible basée sur le texte, ainsi que le centrage, la mise en forme du texte, etc. Fonctionne sous Chrome, FF, IE8 et IE8 en mode de compatibilité. Je n'ai pas testé IE6.

Html:

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

Scénario:

$(".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;}​

Exemple de travail: http://jsfiddle.net/hasYK/

3
Clay
    <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
basitjee

J'ai utilisé ceci:

<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
user1477388