Question

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

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

感谢。

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

Answer 2

我打算说些类似的话。为您的导航栏指定一个类，例如class =“navbar”，然后在CSS中指定导航栏的高度。

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

看看是否有帮助：）

Answer 3

您可以更简洁地设置文字：

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

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

3 个答案: