[変更]ボタンテキストjqueryのモバイル

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

  •  25-09-2019
  •  | 
  •  

質問

私は、モバイルアプリを構築するために、新しいjQueryのモバイル1.0のアルファ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");
役に立ちましたか？

解決

あなたがボタンを作成すると、それはいくつかの追加要素、いくつかの内部<span>要素を追加し、このようになります。

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

テキストを変更するには、このセレクタをお勧めします。

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

他のヒント

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

あなたはしたいです 

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

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

私はオンラインで、さまざまなオプションを読んで、私は簡単な解決策を持っているかもしれないと思います。それは間違いなくあなたがデータ・役割=「ボタン」属性を持つボタンに回っているリンクのために働くます。

単に別のスパンで、ボタンのテキストを配置して、あなたのJavaScriptでスパンの内容を変更します。

例えばます。

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

次に、単純な

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

仕事を行います。 jQueryのは、その構造を変更する場合にも問題になることはありません。

私は、リンクベース、ボタン、または<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のモバイルは、これらのボタンをレンダリングする正確にどのように依存関係を使用してコードを振りかけることは良いアイデアではありませんので。ルールのプログラミング：あなたはハックを使用しなきゃならば、コードのよく文書化され、再利用可能なチャンクにそれを隔離

。

これは私のために動作します：

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

からソリューション： http://forum.jquery.com/topic/changing-text -works-除く-用-ボタンの

のようなマークアップのために

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

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

新しいjQueryのモバイルバージョンでボタン内の内側スパンタグがあります。

あなたは「」タグのテキストを変更していないが、内側スパンのテキストを変更するようにします。

例えばます。

$（ "＃は.ui-BTN-テキストを消費する"）、テキスト（ "テスト"）;ます。

JQM 1.3.1（多分それ以前？）簡単なの.text（のように、

）はサポートされているようです。

簡単な解決策に興味のある人のために、私は Auderoテキストチェンジャーすると呼ばれるプラグインを作成しましたます。

何らかの理由で私は、「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);
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top