移动导航栏会在更改项目文本时调整大小 [英] mobile navbar resizes on changing text of an item

问题描述

我在jquery移动网站中有一个包含两个项目的导航栏:

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>

当我更改链接的文本时，使用$('#play-btn').text('Play');会更改其大小，因此导航栏项目的高度仅是文本的高度.因此，在更改#play-btn的文本后，我最终得到了

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

谢谢.

推荐答案

在jQuery Mobile初始化按钮后，看看按钮的结构.要更改要使用.ui-btn-text类定位元素的文本，请执行以下操作:

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');

这将保留所有正确的格式.您当前的代码正在覆盖按钮的HTML结构.

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

这是一个演示: http://jsfiddle.net/4NDcn/1/(注意我在不使用href属性的情况下附加了click事件处理程序)

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

这是jQuery Mobile 1.0的按钮结构:

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>

这篇关于移动导航栏会在更改项目文本时调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！