мобильный навигационный бар изменяет размер при изменении текста элемента - PullRequest
Новая
       8

мобильный навигационный бар изменяет размер при изменении текста элемента

0 голосов
/ 11 декабря 2011

У меня есть навигационная панель с двумя элементами на мобильном сайте jquery: 

<div data-role="content">
  <div data-role="navbar">
    <ul>
      <li><a href="javascript:audioPause();" id="play-btn">Pause</a></li>
      <li><a href="javascript:audioStop();" id="stop-btn">Stop</a></li>
    </ul>
  </div>
</div>

Когда я изменяю текст ссылок, с $('#play-btn').text('Play'); изменяется его размер, так что высота элемента навигационной панели равнатекста.Поэтому после изменения текста # play-btn я получаю 

+--------+--------+
| play   |  stop  |
+--------|        |
         +--------+

Как мне обойти это?(Я подумал, может быть, мне нужно сказать навигационной панели как-то нарисовать себя снова, но не знаю как.)

Спасибо.

Ответы [ 3 ]

2 голосов
/ 12 декабря 2011

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

$('#play-btn').find('.ui-btn-text').text('Play');

Это сохранит все правильное форматирование. Ваш текущий код перезаписывает структуру HTML кнопки.

Вот демонстрационная версия: http://jsfiddle.net/4NDcn/1/ (обратите внимание, что я прикрепил click обработчики событий без использования атрибута href)

Вот структура кнопки для jQuery Mobile 1.0: 

<a id="play-btn" href="#" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-active">
    <span class="ui-btn-inner" aria-hidden="true">
        <span class="ui-btn-text">Pause</span>
    </span>
</a>
0 голосов
/ 08 февраля 2012

Вы можете установить текст более кратко: 

$('#play-btn .ui-btn-text').text('Play');
0 голосов
/ 11 декабря 2011

Я собирался сказать что-то подобное. Дайте вашей панели навигации класс, такой как class = "navbar", и затем в вашем CSS вы можете указать высоту для вашей панели навигации. 

.navbar{
        height:40px;display:block;
       }

Посмотрите, поможет ли это:)

...