更改按钮文本jquery mobile

时间:2010-10-24 17:45:59

标签: jquery css jquery-mobile

我正在使用新的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");

10 个答案:

答案 0 :(得分:67)

当你创建按钮时,它会添加一些额外的元素,一些内部<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");

答案 1 :(得分:12)

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

你想要:

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

原因是为了使您的更改能够与未来版本的jQuery mobile向后兼容。

答案 2 :(得分:9)

我在线阅读了这个和各种选项,并认为我可能有一个更简单的解决方案。它肯定适用于您使用data-role =“button”属性转换为按钮的链接。

只需将按钮的文本放在单独的范围内,然后在JavaScript中更改范围的内容。

e.g。

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

然后一个简单的

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

将完成这项工作。如果jQuery改变它们的结构,它也应该不是问题。

答案 3 :(得分:8)

我为基于链接的按钮或<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如何呈现这些按钮的依赖关系并不是一个好主意。编程规则:如果你必须使用hack,将它隔离到一个记录良好,可重复使用的代码块。

答案 4 :(得分:3)

这对我有用:

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

解决方案来自: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

答案 5 :(得分:1)

用于标记

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

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

答案 6 :(得分:0)

在新的jquery移动版中,按钮内有一个内部跨度标记。

所以你不必改变'a'标签的文字,而是改变内跨的文本。

e.g。

$(“#consume .ui-btn-text”)。text(“test”);

答案 7 :(得分:0)

对于那些对简单解决方案感兴趣的人,我创建了一个名为Audero Text Changer的插件。

答案 8 :(得分:0)

从JQM 1.3.1开始(可能更早?),似乎支持简单的.text()。

答案 9 :(得分:0)

出于某种原因,我第一次想要更改按钮文本时没有'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);
}