Изменить кнопку Text jQuery Mobile
-
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);
}