web-dev-qa-db-fra.com

Comment remplacer le texte du bouton jQueryUI?

J'ai un bouton que j'utilise avec jQueryUI quelque chose comme ça (simplifié).

<button id="mybutton">Play<button>
<script>
$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop');
    },
    function(){
       $(this).text('Start');
    },
);
</script>

Ce code interrompt l'apparence du bouton, car lors de son insertion dans le widget Bouton, une nouvelle étendue a été ajoutée à l'intérieur du bouton. Donc, je change la valeur du bouton comme ça maintenant

$(this).find('span').text('Stop');

C'est hacky parce que je ne peux plus traiter le bouton comme une boîte noire et que je dois aller à l'intérieur.

Y a-t-il un moyen propre de faire cela?

jqueryjquery-uibutton
31
Andrei R

Peut-être pourriez-vous maintenant utiliser l’option label du bouton d’interface utilisateur jQuery?

$("#mybutton").button().toggle(function() {
   $(this).button('option', 'label', 'Stop');
}, function() {
   $(this).button('option', 'label', 'Start');
});

jsbin preview ici

63
gnarf

Vous pouvez utiliser la méthode .button ("refresh") après avoir modifié le texte.

 $ ("# mybutton"). button (). bascule (
 function () {
 $ (this) .text ("Stop"). button ("rafraîchir" ); 
}, 
 function () {
 $ (this) .text ('Démarrer'). button ("actualiser"); 
}, 
);

http://jqueryui.com/demos/button/#method-refresh

6
ajpiano

après avoir appelé .button () pour créer un bouton jQuery UI, le texte semble être supprimé de l'élément bouton d'origine et placé dans un <span class = ui-button-text></span> dans l'élément bouton.

Quelque chose comme ça marcherait:

$("#myButton > .ui-button-text").text("New Text");
3
mikehoncho

Je ne sais pas si vous cherchez toujours une réponse à cette question, mais j'ai trouvé votre question. Si vous regardez le code depuis le bouton, jQuery ajoute une ou deux balises. Ainsi, au lieu de tout réécrire, j'ai remplacé le bouton .html () par le même code HTML, mais j'ai utilisé javascript search () pour changer le libellé. C'est moche, mais ça marche. Il utilise également l’étiquette du bouton pour basculer correctement.

var bdef = $(this).html();
var ht = "";
if (bdef.search("Nuevo") != -1) { 
    ht = $(this).html();
    $(this).html(ht.replace("Nuevo", "Lista"));
}
else {
    ht = $(this).html();
    $(this).html(ht.replace("Lista", "Nuevo"));
}
1
Stephen O'Flynn

Vous devez faire .button("refresh")

$('#mybutton').text('Save').button("refresh");
0
user1464277

L'identifiant du bouton est-il toujours myButton? Si oui, alors utilisez simplement

$("#myButton").text('Stop');

0
psychotik