更改按钮文字jQuery Mobile的

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。

e.g。

<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 Mobile的究竟是如何呈现这些按钮的依赖洒你的代码是不是一个好主意。编程规则：如果你必须使用一劈，它隔离到的码的证据充分的，可重复使用的组块

这对我的作品：

$('#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移动版本有该按钮内的内跨度标签

所以你没有改变的一个标签的文本，但改变内宽度的文本。

e.g。

$（ “＃消耗的.ui-BTN-文本”）文本（ “测试”）;

JQM 1.3.1的作为（也许更早？）简单的.text（）似乎有支撑。

对于那些有兴趣一个简单的解决方案，我创建一个名为 Audero文本换插件

出于某种原因，我没有一个“UI的BTN-文本”归类跨度第一次我想改变按钮上的文字。因此，我解决方法这样的：

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