Comment changer la couleur/taille d'une barre de progression
je suis assez nouveau à jQuery-UI, mais j'aime ce que je vois jusqu'ici.
j'utilise le thème 'blitzer' (comme j'avais besoin de barres de progression rouges) et j'ai 4 barres de progression côte à côte sur une page. Maintenant, mon premier ministre veut que l'un d'eux soit vert, et plus grand que les autres. J'ai regardé autour du thème CSS fourni mais n'ai pas pu trouver la bonne étiquette à bricoler avec. Quelqu'un peut-il poster un code court de 2 barres de progression avec différentes tailles/couleurs côte à côte?
Bonus question: on m'a demandé d'imprimer le pourcentage de PB dans le PB lui - même - pas de problème-j'ai juste ajouté une étiquette à l'intérieur du div. Le problème, c'est le texte de l'étiquette est de couleur blanche, donc si le PB est vide ou à moitié vide, le texte devient invisible. Est-il possible de contrôler la couleur de fond du PB, ou est-elle une donnée à l'intérieur d'un thème?
Merci beaucoup!
Guy
2 réponses
c'est ainsi que les barres sont configurées, modifiez donc les classes à l'intérieur d'elles.
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
<div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>
modifier ui-progressbar et ui-progressbar-value .
Traveling Tech Guy:
si vous regardez dans le dossier css de votre téléchargement jQueryUI, vous trouverez un dossier thématique; le mien s'appelle ui-lightness, le vôtre est probablement appelé ui-blitzer. Allez dans ce dossier, puis dans le dossier images. Vous y trouverez des fichiers image qui commencent par les lettres ui-bg_diagonals et ui-bg_gloss . Ce sont les images qui conduisent les barres de progression. Vous devriez être en mesure d'ajouter quelques images d'un autre thème qui sont les couleurs vous voulez, qui va conduire vos autres barres de statut.
de plus, il y a une entrée css appelée .ui-widget-superposition qui renvoie à l'image ui-bg_diagonals-thick_20_666666_40x40.png, qui je pense est l'image qui conduit réellement la barre de progression. Vous devrez hacker le css pour que vous puissiez ajouter une nouvelle classe qui renvoie votre nouvelle image dans l'autre barre de progression; Je n'ai pas encore trouvé comment faire.