web-dev-qa-db-fra.com

Changer le texte du bouton jquery mobile

J'utilise la nouvelle version jquery mobile 1.0 alpha 1 pour créer une application mobile et je dois être capable de basculer le texte d'un bouton. Basculer le texte fonctionne bien, mais dès que vous effectuez le remplacement du texte, le formatage css est cassé.

Capture d'écran du formatage modifié: http://awesomescreenshot.com/03e2r50d2

    <div class="ui-bar">
        <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
        <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
        <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
    </div>

$("#consumed").text("Mark New");
jquerycssjquery-mobile
33
Josh Rickard

Lorsque vous créez le bouton, il ajoute des éléments supplémentaires, des éléments <span> intérieurs ressemblant à ceci:

<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Mark Old</span>
  </span>
</a>

Pour changer le texte, vous aurez besoin de ce sélecteur:

$("#consumed .ui-btn-text").text("Mark New");
67
Nick Craver
<a data-role="button" href="#" id="consumed">Mark Old</a>

Tu veux:

$('#consumed').text('Mark New');
$('#consumed').button('refresh');

La raison en est d’activer la rétrocompatibilité de vos modifications avec les futures versions de jQuery mobile.

12
Steven de Salas

J'ai lu ceci en ligne et diverses options en ligne et je pense avoir une solution plus simple. Cela fonctionne vraiment pour les liens que vous transformez en bouton avec l'attribut data-role = "button".

Il vous suffit de placer le texte du bouton dans une plage séparée, puis de modifier le contenu de la plage dans votre JavaScript.

par exemple.

<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>

Puis un simple

$('#oldBtnText').html("Old");

Fera le travail. Cela ne devrait pas non plus être un problème si jQuery change de structure.

9
Britic

J'ai écrit un simple plugin pour le faire soit pour un bouton basé sur un lien, soit pour un bouton <input type="button">. Donc si vous avez

<input type="button" id="start-button" val="Start"/>

ou

<a href="#" data-role="button" id="start-button">Start</a>

De toute façon, vous pouvez changer le texte affiché avec

$("#start-button").changeButtonText("Stop");

Voici le plugin:

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

... car il n'est pas recommandé d'éparpiller votre code avec des dépendances sur la manière dont jQuery Mobile rend ces boutons. Règle de programmation: si vous devez utiliser un hack, isolez-le en un morceau de code réutilisable bien documenté.

8
Leopd

Cela fonctionne pour moi:

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

solution from: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

3
Yuval A.

Pour le balisage comme 

<button id="consumed">Mark Old</button>

$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");
1
Vikas

À partir de JQM 1.3.1 (peut-être plus tôt?), Simple .text () semble être supporté.

0
Peter

Pour une raison quelconque, je n'ai pas de classe de texte 'ui-btn-text' la première fois que je souhaite modifier le texte du bouton. Donc, je contourne ça comme ça:

var button = $("#consumed");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}
0
Plamen

Pour ceux intéressés par une solution simple, j'ai créé un plugin appelé Audero Text Changer .

0
Aurelio De Rosa

Dans la nouvelle version de jquery mobile, le bouton contient une balise span interne.

Donc, vous ne devez pas changer le texte de la balise 'a' mais le texte de la plage intérieure.

par exemple.

$ ("# consomme .ui-btn-text"). text ("test");

0
letsdev-cwack