bouton Modifier le texte mobile jquery

StackOverflow https://stackoverflow.com/questions/4009524

  •  25-09-2019
  •  | 
  •  

Question

J'utilise la nouvelle jquery mobile 1.0 alpha 1 version pour concevoir une application mobile et je dois pouvoir basculer le texte d'un bouton. Basculement le texte fonctionne très bien, mais dès que vous effectuez le texte de remplacement de la mise en forme css est cassé.

Capture d'écran de la mise en forme foiré: 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");
Était-ce utile?

La solution

Lorsque vous créez le bouton, il ajoute des éléments supplémentaires, certains éléments de <span> intérieurs qui ressemblent à 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 modifier le texte, vous voulez que ce sélecteur: 

$("#consumed .ui-btn-text").text("Mark New");

Autres conseils

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

Vous voulez: 

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

La raison est de permettre à vos changements d'être rétrocompatible avec les futures versions de jQuery mobile.

J'ai lu cela et diverses options en ligne et pense que je peux avoir une solution plus simple. Il fonctionne vraiment pour les liens que vous transformer en un bouton avec les données-role = attribut « bouton ».

Il suffit de mettre le texte du bouton dans une période séparée, puis modifier le contenu de la durée de votre JavaScript.

par exemple. 

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

Alors simple 

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

va faire le travail. Il ne devrait pas aussi être un problème si leur structure change jQuery.

J'ai écrit un plugin simple à faire pour soit un bouton à base de lien, ou 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 modifier le texte affiché avec 

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

Voici le plug-in: 

(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);

... parce que aspergeant votre code avec dépendances sur exactement comment jQuery Mobile rend ces boutons ne sont pas une bonne idée. règle de programmation:. si tu dois utiliser un hack, isoler un, morceau réutilisable de code bien documenté

Cela fonctionne pour moi: 

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

à partir de: http://forum.jquery.com/topic/changing-text -Travaux-sauf-pour-boutons

Pour le balisage comme 

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

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

Dans la nouvelle version mobile jquery il y a une balise span intérieure dans le bouton.

Vous n'avez pas modifier le texte de la « une » étiquette, mais de changer le texte de la portée intérieure.

par exemple.

$ ( "# consommé .ui-btn-text") texte ( "test");.

Au 1.3.1 JQM (peut-être plus tôt?) .Text simple () semble être pris en charge.

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

Pour une raison que je ne suis pas avoir une « ui-btn-text » span classé la première fois que je veux changer le texte du bouton. Donc, je contourner le problème comme ceci: 

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);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top