Przycisk zmiany jquery mobile

Question

Używam nowego wydania jquery mobile 1.0 alpha 1 do zbudowania aplikacji mobilnej i muszę mieć możliwość przełączania tekstu przycisku. Przełączanie tekstu działa dobrze, ale zaraz po dokonaniu zamiany tekstu formatowanie css zostanie zerwane.

Zrzut ekranu zawiedli formatowania: 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

Podczas tworzenia przycisku to dodaje kilka dodatkowych elementów, niektóre wewnętrzne <span> elementy, które wyglądają tak:

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

Aby zmienić tekst , potrzebujesz tego selektora:

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

Answer 2

Dla znaczników jak

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

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

Answer 3

Napisałem prosty plugin to zrobić dla obu przycisku łącza oparte lub przycisku <input type="button">. Więc jeśli masz

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

lub

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

Tak czy inaczej, można zmienić wyświetlany tekst z

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

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

... ponieważ zraszanie kodu uzależnia od exac sposób, w jaki jQuery Mobile wyświetla te przyciski, nie jest dobrym pomysłem. Reguła programowania: jeśli musisz użyć hacka, odizoluj go od dobrze udokumentowanego, wielokrotnego użytku fragmentu kodu.

Answer 4

Działa to dla mnie:

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

rozwiązanie od: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

Answer 5

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

Chcecie:

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

Powodem jest umożliwienie zmiany być wstecznie kompatybilny z przyszłymi wersjami jQuery mobile.

Answer 6

Przeczytałem tę i różne opcje w Internecie i sądzę, że mogę mieć prostsze rozwiązanie. Z pewnością działa dla linków, które zamieniasz w przycisk z atrybutem data-role = "button".

Po prostu umieść tekst przycisku w osobnym przęśle, a następnie zmień jego zawartość w JavaScript.

np.

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

Wtedy prosty

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

będzie wykonać zadanie.Nie powinno to stanowić problemu, jeśli jQuery zmieni ich strukturę.

Answer 7

W nowej wersji mobilnej jQuery wewnątrz przycisku znajduje się wewnętrzny znacznik zakresu.

Nie należy zatem zmieniać tekstu znacznika "a", ale zmieniać tekst wewnętrznej przęsła.

np.

$ ("# spożywany .ui-btn-text"). Text ("test");

Answer 8

Dla osób zainteresowanych prostym rozwiązaniem stworzyłem wtyczkę o nazwie Audero Text Changer.

Answer 9

Od JQM 1.3.1 (może wcześniej?) Prosty .text() wydaje się być obsługiwany.

Answer 10

Z jakiegoś powodu nie mam przypisanego zakresu "ui-btn-text" po raz pierwszy, gdy chcę zmienić tekst przycisku. Więc obejść to tak:

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