Cambiar texto del botón jquery mobile

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

  •  25-09-2019
  •  | 
  •  

Pregunta

Estoy usando la nueva versión jquery mobile 1.0 alpha 1 para crear una aplicación móvil y necesito poder alternar el texto de un botón.Alternar el texto funciona bien, pero tan pronto como realiza el reemplazo del texto, el formato CSS se rompe.

Captura de pantalla del formato incorrecto: 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");
¿Fue útil?

Solución

Cuando se crea el botón que añade algunos elementos adicionales, algunos elementos <span> interiores que tener este aspecto: 

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

Para cambiar el texto, usted querrá este selector: 

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

Otros consejos

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

Usted desea: 

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

La razón es permitir a los cambios de ser compatible hacia atrás con futuras versiones de jQuery móvil.

He leído a través de este y varias opciones en línea y que puedo tener una solución más simple. Definitivamente las obras de los enlaces que se están convirtiendo en un botón con la técnica de role = "botón" atributo.

En pocas palabras el texto del botón en un lapso separado, y luego cambiar el contenido de la duración de su JavaScript.

por ejemplo. 

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

A continuación, un simple 

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

hará el trabajo. Asimismo, no debe ser un problema si jQuery cambia su estructura.

Me escribió un plugin simple de hacer esto, ya sea para un botón de enlace de base, o un botón <input type="button">. Así que si usted tiene 

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

o 

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

De cualquier manera, usted puede cambiar el texto que se muestra con 

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

Aquí está el 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);

... porque su código de aspersión con dependencias en exactamente cómo jQuery móvil hace que estos botones no es una buena idea. regla de programación:. Si tienes que hacerlo uso un truco, aislar a un bien documentado, reutilizable trozo de código

Esto funciona para mí: 

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

solución de: http://forum.jquery.com/topic/changing-text -obras, excepto fines de botones

Para marcado como 

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

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

En la nueva versión móvil jQuery hay una etiqueta span interior dentro del botón.

Por lo que no tiene que cambiar el texto de la 'a' etiqueta, pero para cambiar el texto del tramo interior.

por ejemplo.

$ ( "# consume .ui-BTN-texto") texto ( "test");.

A partir de JQM 1.3.1 (tal vez antes?) .Text sencilla () parece ser apoyado.

Para aquellos interesados ​​en una solución sencilla, creé un complemento llamado Cambiador de texto Audero.

Por alguna razón no estoy teniendo un 'ui-BTN-text' lapso clasificado la primera vez que quiera cambiar el texto del botón. Así que me apaño así: 

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);
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top