jquery-mobile - jqueryモバイルボタンのテキストを変更する方法

Question

jQuery モバイルは、elme がウィジェットに拡張された後に多くの要素を挿入します。

たとえば、「a」がボタンに拡張された後、「a」は 2 つのスパン要素に挿入されます。では、「a」がボタンに拡張された後、a の innerText を適切に変更するにはどうすればよいでしょうか。

Answer 1

最初の公式な方法は存在しないため、手動で行う必要があります。

2つの一般的な方法があります。

古典的な解決策：

    $(document).on('pagebeforeshow', '#index', function(){       
        $('#custom-btn span span').text('This is a new text');
    });

実例： http： //jsfiddle.net/Gajotres/EjVfz/

このソリューションは、将来のボタンの実装で何も変わらないことを期待しており、すべてが同じままになります。

慎重な解決策：

    $(document).on('pagebeforeshow', '#index', function(){       
        $('#custom-btn').find('.ui-btn-text').text('This is a new text');
    });

実例： http： //jsfiddle.net/Gajotres/QHg3w/

このソリューションは安全なソリューションであり、どのボタンの例（a、button、input）を使用しても、ボタンのテキストは常に.ui-btn-textクラス内にあります。

編集 ：

ボタンプラグインの変更

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn').changeButtonText('This is a new text');
});

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

実例： http： //jsfiddle.net/Gajotres/mwB22/

ソリューション/プラグインの場所：https ：//stackoverflow.com/a/7279843/1848600