mobile navbar resizes on changing text of an item

问题

I have a navbar with two items in a jquery mobile site:

<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>

When I change the text of the links, with $('#play-btn').text('Play'); its size changes, so that navbar item height is only that of the text. So after changing the text of #play-btn I end up with

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

How can I get round this? (I thought maybe I need to tell the navbar to draw itself again somehow, but don't know how.)

Thanks.

回答1:

Take a look at the structure of a button after jQuery Mobile has initialized it. To change the text you want to target the element with the .ui-btn-text class:

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

This will keep all the proper formatting. Your current code is overwriting the HTML structure of the button.

Here is a demo: http://jsfiddle.net/4NDcn/1/ (Notice I attached click event handlers without using the href attribute)

Here is the structure of a button for 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>

回答2:

I was going to say something similar. Give your navbar a class, like class="navbar", and then in your CSS you can specify a height for your navbar.

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

See if that helps :)

回答3:

You can set the text more concisely:

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

来源：https://stackoverflow.com/questions/8466061/mobile-navbar-resizes-on-changing-text-of-an-item