webentwicklung-frage-antwort-db.com.de

Ändern Sie den Button Text Jquery Mobile

Ich verwende die neue jquery mobile 1.0 alpha 1-Version zum Erstellen einer mobilen App, und ich muss den Text einer Schaltfläche umschalten können. Das Umschalten des Textes funktioniert einwandfrei, aber sobald Sie den Text ersetzen, wird die CSS-Formatierung beschädigt.

Screenshot der fehlerhaften Formatierung: 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");
33
Josh Rickard

Wenn Sie die Schaltfläche erstellen, werden einige zusätzliche Elemente hinzugefügt, einige innere <span>-Elemente, die folgendermaßen aussehen:

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

Um den Text zu ändern, benötigen Sie diesen Selektor:

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

Du möchtest:

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

Der Grund ist, dass Ihre Änderungen mit zukünftigen Versionen von jQuery mobile abwärtskompatibel sind.

12
Steven de Salas

Ich habe diese und verschiedene Optionen online durchgelesen und denke, ich habe vielleicht eine einfachere Lösung. Es funktioniert definitiv für Links, die Sie in eine Schaltfläche mit dem Attribut data-role = "button" verwandeln.

Platzieren Sie einfach den Text der Schaltfläche in einem separaten Bereich und ändern Sie dann den Inhalt des Bereichs in Ihrem JavaScript.

z.B.

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

Dann eine einfache

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

Wird die Arbeit machen Es sollte auch kein Problem sein, wenn jQuery seine Struktur ändert.

9
Britic

Ich habe ein einfaches Plugin geschrieben, um dies entweder für eine linkbasierte Schaltfläche oder für eine <input type="button">-Schaltfläche auszuführen. Also wenn du hast

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

oder

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

In beiden Fällen können Sie den angezeigten Text mit ändern

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

Hier ist das 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);

... weil es eine gute Idee ist, den Code mit Abhängigkeiten davon zu versehen, wie genau diese Schaltflächen von jQuery Mobile dargestellt werden. Programmierregel: Wenn Sie einen Hack verwenden müssen, isolieren Sie ihn mit einem gut dokumentierten, wiederverwendbaren Code-Block.

8
Leopd

Das funktioniert für mich:

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

lösung von: http://forum.jquery.com/topic/changing-text-works-except-for-tasten

3
Yuval A.

Für Markup wie 

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

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

Ab JQM 1.3.1 (vielleicht früher?) Scheint einfach .text () zu unterstützen.

0
Peter

Aus irgendeinem Grund habe ich keine 'ui-btn-text' klassifizierte Spanne, wenn ich zum ersten Mal den Schaltflächentext ändern möchte. So umgehe ich es so:

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

Für alle, die an einer einfachen Lösung interessiert sind, habe ich ein Plugin namens Audero Text Changer erstellt.

0
Aurelio De Rosa

In der neuen Jquery Mobile-Version befindet sich innerhalb des Buttons ein inneres Bereichs-Tag.

Sie müssen also nicht den Text des 'a'-Tags ändern, sondern den Text des inneren Bereichs.

z.B.

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

0
letsdev-cwack