如何在jQuery Mobile导航栏中添加/删除元素? [英] How do I add/remove elements in a jQuery Mobile navbar?

问题描述

在jQuery Mobile中，可以说我有以下导航栏:

In jQuery Mobile, lets say I have the following navigation bar:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item2">Item 2</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

然后我可以只使用jQuery删除一个项目，使其看起来像这样:

I can then just use jQuery to remove an item to make this look like:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

但是，jQuery Mobile仍然将其呈现为好像有三个选项卡，而在中间的一个选项卡中什么也没有.因此，与其以每个标签占用宽度的1/2来隔开，剩下的两个标签中的每个仅占用宽度的1/3.

However, jQuery Mobile still renders it as if there are three tabs, and in the middle one, there is just nothing there. So instead of it being spaced out with each tab taking 1/2 of the width, each of the two remaining tabs just takes 1/3 of the width.

我仔细看了一下，jQuery Mobile自动向<ul>元素添加了一个名为"ui-grid-b"的类，如果我手动将其更改为"ui-grid-a"，则看起来不错，并且两个选项卡都使用了整个宽度.但是，手动更改这些类似乎太过骇客了，我猜想有一种更好的方法来做到这一点.有什么想法吗?

I looked closer and jQuery Mobile automatically adds a class to the <ul> element called "ui-grid-b" and if I change that manually to "ui-grid-a" it then looks fine and the two tabs take up the whole width. However, changing those classes manually seems too hackish and I'm guessing there is a better way to do it. Any ideas?

推荐答案

我没有找到一个很好的解决方案，但是我至少想出了一个不太hacky的解决方案.

I didn't figure out a great solution, but I at least figured out a less hacky one.

对于我的问题，我至少提前知道了导航栏中想要的所有元素，因此我可以简单地构造几组导航栏，并根据特定情况将其打开或关闭.因此，HTML看起来像phil的解决方案，但是其解决方案的JS看起来像:

For my problem, I at least know all of the elements I want in my navbars ahead of time, so I can simply construct several sets of navbars and turn them on or off depending on certain situations. Thus, the HTML looks like phil's solution, but the JS for his solution would instead look like:

$('#navbar1').hide();
$('#navbar2').show();
$('#page1').page();

这篇关于如何在jQuery Mobile导航栏中添加/删除元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！