Кнопка Jquery Mobile теряет высоту при замене innerhtml - PullRequest
Новая
       11

Кнопка Jquery Mobile теряет высоту при замене innerhtml

1 голос
/ 22 февраля 2012

Когда я использую javascript для изменения innerhtml кнопки, кнопка теряет отступы над и под текстом, но сохраняет отступы по бокам.Это код, который я использую: 

document.getElementById("NextBtn").innerHTML="Finish";

Как я могу решить эту проблему?

Ответы [ 2 ]

1 голос
/ 22 февраля 2012

С виджетами jQuery вы обычно можете выбрать элемент .ui-btn-text, который будет потомком исходного элемента. Например, вот HTML-разметка для инициализированного виджета кнопки из платформы jQuery Mobile: 

<a data-role="button" href="#" data-theme="c" id="test-btn" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Click Me (0)</span>
    </span>
</a>

Обратите внимание, что текст находится внутри элемента span.ui-btn-text. Зная это, мы можем нацелить этот элемент на обновление текста: 

$('#test-btn').find('.ui-btn-text').text('New Text!');

Вот демоверсия: http://jsfiddle.net/qp3uF/

Обновление

Поскольку существует несколько типов кнопок, о которых вы могли бы говорить, вот как обновить текст для каждой из них: 

//<a>
$('a').find('.ui-btn-text').text('New Text');

//<input type="button" /> and <input type="submit" />
$('input[type="button"], input[type="submit"]').val('New Text').prev('.ui-btn-inner').children('.ui-btn-text').text('New Text');

//<button>
$('button').prev('.ui-btn-inner').children('.ui-btn-text').text('New Text');

Вот демоверсия: http://jsfiddle.net/qp3uF/2/

1 голос
/ 22 февраля 2012

Вы пытались обновить кнопку после манипулирования ею?

Примерно так: 

$('[type="submit"]').button('refresh');

Ссылка на jQuery Mobile Docs

...