Valeur d'affichage dans jQueryUI ProgressBar

J'ai mis en place simple ProgressBar jQuery UI:Valeur d'affichage dans jQueryUI ProgressBar

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

Entre autres choses, je voudrais afficher un texte dans la barre de progression (pour commencer, je utilisez simplement la "valeur").

Je n'arrive pas à faire marcher ça. Bonus: Comment formater le texte affiché (par exemple, la couleur, l'alignement)?

Source

2009-09-25 Thorsten

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 régler la marge supérieure et la marge gauche afin que le texte est au centre de la barre de progression. Ensuite, vous appliquez le plug-in progressbar pour les éléments qui ont classe ProgressBar dans la section javascript de la page

Hope this aide

Source

2010-06-21 21:00:00 Tri

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

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

le css("display", "block") est de gérer le cas où la valeur est 0 (UI jQuery définit une display: none sur l'élément lorsque la valeur est 0). Si vous regardez la source de The demo, vous remarquerez que <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; 
}

Source

2011-10-10 20:13:05 rynop

On dirait que le code dans le lien de démonstration est différent du code ici, maintenant. Le code dans la démo a bien fonctionné. –

Cette solution permet une largeur flexible basée sur le texte, ainsi que le centrage du texte, le style du texte, etc. Fonctionne dans Chrome, FF, IE8 et IE8 en mode de compatibilité. N'a pas 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;}

échantillon de travail: http://jsfiddle.net/hasYK/

Source

2012-02-27 17:27:05 Clay

Après bidouiller avec des solutions, sur la base réponses ici, j'ai fini avec celui-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 progressbar)

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:

Légende est centrée sans positionnement harcoded (nécessaire si la légende change largeur dinamically)
Non JS manipulation étrange
simple et minimal CSS

Source

2012-06-18 03:02:58 lucianolev

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>

Source

2012-09-18 14:04:12 user1477388

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

Source

2015-11-17 11:26:54 basitjee

envisagez de fournir une explication à votre code – arghtype

Valeur d'affichage dans jQueryUI ProgressBar

Répondre

Questions connexes