Pulsante Modifica testo jQuery Mobile

Question

sto usando la nuova jQuery Mobile 1.0 alpha 1 di rilascio per costruire un app mobile e ho bisogno di essere in grado di attivare o disattivare il testo di un pulsante. Alternare il testo funziona bene, ma non appena si esegue la sostituzione del testo del css formattazione viene rotto.

Schermata della incasinato formattazione: 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

Quando si crea il pulsante aggiunge alcuni elementi aggiuntivi, alcuni elementi <span> interiori che assomigliano a questo:

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

Per modificare il testo, ti consigliamo questo selettore:

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

Answer 2

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

Si desidera:

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

Il motivo è quello di consentire le modifiche per essere retrocompatibile con le versioni future di jQuery Mobile.

Answer 3

Ho letto attraverso questa e varie opzioni di linea e pensare che io possa avere una soluzione più semplice. Funziona sicuramente per i collegamenti che si sta trasformando in un pulsante con il data-role = "button" attributo.

In poche parole il testo del pulsante in un arco separata, e quindi modificare il contenuto della campata nella vostra JavaScript.

per es.

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

Poi un semplice

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

farà il lavoro. Esso, inoltre, non dovrebbe essere un problema se jQuery cambia la loro struttura.

Answer 4

Ho scritto un semplice plugin per fare questo sia per un pulsante di collegamento base, o un tasto <input type="button">. Quindi, se avete

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

o

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

In entrambi i casi, è possibile modificare il testo visualizzato con

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

Ecco il 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);

... perché cospargendo il codice con dipendenze da esattamente come jQuery Mobile rende questi pulsanti non è una buona idea. Programmazione regola:. Se si Gotta Usa un hack, isolare a una, riutilizzabile pezzo ben documentato di codice

Answer 5

Questo funziona per me:

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

soluzione da: http://forum.jquery.com/topic/changing-text -works-tranne-per-pulsanti

Answer 6

Per markup come

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

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

Answer 7

Nella nuova versione mobile jQuery v'è un tag interno arco all'interno del pulsante.

Quindi non c'è bisogno di modificare il testo della 'un' tag ma per cambiare il testo della campata interna.

per es.

$ ( "# .ui-BTN-text consumato") del testo ( "test");.

Answer 8

A partire dal jQm 1.3.1 (forse prima?) Semplice .text () sembra essere supportato.

Answer 9

Per chi è interessato a una soluzione facile, ho creato un plugin chiamato Audero Text Changer .

Answer 10

Per qualche ragione io non sto avendo un 'ui-BTN-text' arco classificata la prima volta che voglio cambiare il testo del pulsante. Così ho soluzione alternativa in questo modo:

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