変更ボタンテキストjquery mobile


Answers

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

あなたはしたい:

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

その理由は、変更をjQueryモバイルの将来のバージョンと下位互換性があるようにするためです。

Question

私は新しいjquery mobile 1.0 alpha 1リリースを使用してモバイルアプリを構築しています。ボタンのテキストを切り替えることができる必要があります。 テキストの切り替えはうまくいきますが、テキストの置換を実行するとすぐにCSSの書式が壊れます。

混乱したフォーマットのスクリーンショット: 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");



JQM 1.3.1(おそらくそれ以前?)では単純な.text()がサポートされているようです。




マークアップのような

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

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



何らかの理由で、私はボタンテキストを最初に変更したいときに 'ui-btn-text'クラスのスパンを持っていません。 だから私はこのように回避策:

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



私はリンクベースのボタン、または<input type="button">ボタンのいずれかのためにこれを行う簡単なプラグインを書いた。 あなたが持っているなら

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

または

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

どちらの方法でも、表示されたテキストを

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

ここにプラグインがあります:

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

... jQuery Mobileがどのようにこれらのボタンをレンダリングするかに依存するコードを振りかけることは良い考えではないためです。 プログラミングルール:ハックを使用する必要がある場合は、十分に文書化され、再利用可能なコードの塊に分けてください。