Изменить кнопку Text jQuery Mobile

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

  •  25-09-2019
  •  | 
  •  

Вопрос

Я использую новый jQuery Mobile 1.0 Alpha 1 Release для создания мобильного приложения, и мне нужно иметь возможность переключить текст кнопки. Переключение текста работает нормально, но, как только вы выполняете замену текста, форматирование CSS сломается.

Скриншот запутанного форматирования: http://avesomescreenshot.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 Mobile.

Я прочитал это и различные варианты онлайн и думаю, что у меня может быть более простое решение. Это определенно работает для ссылок, вы включаетесь в кнопку с атрибутом data-rote = "кнопки".

Просто поместите текст кнопки в отдельный промежуток, а затем измените содержимое SPAN в вашем 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 Mobile отображает эти кнопки, не очень хорошая идея. Правило программирования: если вы должны использовать взлом, изолируйте его к хорошо документированному, повторно используемую кусок кода.

Это работает для меня:

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

решение от:http://forum.jquery.com/topic/changing-text-works-except-for-buttons.

Для разметки вроде 

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

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

В новой версии jQuery Mobile находится внутренний меток промежутка внутри кнопки.

Таким образом, вы не должны изменить текст тега «A», но для изменения текста внутреннего пролета.

например

$ ("# потребляется .ui-btn-text"). Текст («тест»);

По состоянию на JQM 1.3.1 (может быть, раньше?) Простое .Text (), кажется, поддерживается.

Для тех, кто заинтересован в простом решении, я создал плагин под названием Audero Text Changer..

По какой-то причине я не имею класс «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