Schaltfläche Ändern Text jQuery Mobile

Question

Ich bin mit dem neuen jQuery Mobile 1.0 Alpha 1 Release eine mobile App zu bauen, und ich muss in der Lage sein, den Text einer Taste zu wechseln. Makeln den Text funktioniert gut, aber sobald Sie den Text Ersatz der CSS-Formatierung durchführen wird gebrochen.

Bildschirmfoto von der verkorkste 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");

Answer 1

Wenn Sie die Schaltfläche erstellen fügt es einige zusätzliche Elemente, einige innere <span> Elemente, die wie folgt 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, werden Sie diese Wähler wollen:

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

Answer 2

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

Sie möchten:

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

Der Grund dafür ist, um die Änderungen zu ermöglichen, werden rückwärtskompatibel mit zukünftigen Versionen von jQuery Mobile.

Answer 3

Ich lese diese und viele Optionen und ich denke, eine einfachere Lösung haben kann. Es funktioniert auf jeden Fall für Links, die Sie mit der Daten Rolle in eine Schaltfläche drehen = „button“ -Attribut.

Einfach ausgedrückt, den Text der Schaltfläche in einer separaten Spanne, und dann den Inhalt der Spanne ändert in Ihrem JavaScript.

z.

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

Dann wird eine einfache

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

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

Answer 4

schrieb ich ein einfaches Plugin dies zu tun, entweder einen Link basiert Taste oder eine <input type="button"> Taste. Also, wenn Sie

<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 ändern mit

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

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

... weil Streuen Sie den Code mit Abhängigkeiten von genau, wie jQuery Mobile diese Tasten macht, ist keine gute Idee. Programmierung Regel:. Wenn du musst einen Hack verwenden, isolieren sie auf ein gut dokumentierte, wiederverwendbares Stück Code

Answer 5

Dies funktioniert für mich:

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

Lösung aus: http://forum.jquery.com/topic/changing-text -Werk-außer-for-Tasten

Answer 6

Für Markup wie

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

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

Answer 7

In der neuen jquery Mobile-Version gibt es einen inneren Span-Tag innerhalb der Taste.

Sie haben also nicht den Text des ‚ein‘ Tag zu ändern, aber den Text der inneren Spanne zu ändern.

z.

$ ( "# verbrauchen .ui-btn-Text") Text ( "test");.

Answer 8

Ab JQM 1.3.1 (vielleicht früher?) Einfach .text () scheint unterstützt zu werden.

Answer 9

Für Interessenten an einer einfachen Lösung, habe ich ein Plugin namens Audero Text Changer .

Answer 10

Aus irgendeinem Grund Ich habe kein ‚ui-btn-Text‘ eingestuft Spanne ich das erste Mal auf den Button Text ändern möchten. Also habe ich es wie folgt umgehen:

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