移动导航栏在更改项目文本时调整大小答案

【问题标题】：mobile navbar resizes on changing text of an item移动导航栏在更改项目文本时调整大小
【发布时间】：2011-12-11 17:42:13
【问题描述】：

我在一个 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  |
+--------|        |
         +--------+

我怎样才能解决这个问题？（我想也许我需要告诉导航栏以某种方式再次绘制自己，但不知道如何。）

谢谢。

【问题讨论】：

真正的问题是——为什么原来比正常高？
@liho1eye 导航栏是标准高度，并且在文本周围有一些填充。

标签： jquery jquery-ui jquery-mobile

【解决方案1】：

看一下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>

【讨论】：

【解决方案2】：

我想说类似的话。给你的导航栏一个类，比如 class="navbar"，然后在你的 CSS 中你可以为你的导航栏指定一个高度。

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

看看有没有帮助:)

【讨论】：

谢谢，但我宁愿依靠移动用户界面来决定导航栏在特定设备上的大小等。

【解决方案3】：

可以更简洁地设置文字：

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

【讨论】：