标题中的Jquery移动导航栏样式无法正常工作

时间:2015-09-17 10:17:16

标签: jquery html5 cordova jquery-mobile jquery-mobile-navbar

我正在使用Cordova / PhoneGap开发一个Jquery移动应用程序,我想在我的标题下直接使用导航栏,固定位置,因此导航栏不会滚动内容。如果我将导航栏放在标题内,它会继承标题的样式,并且导航栏的css表现不像它应该的那样。例如。当我单击导航栏中的某个项目时没有突出显示,它只是与标题本身保持相同的颜色(在我的情况下为黑色),并且也没有更多可见的边框。只有项目内的文本才会响应单击。我查了几个例子,但它们似乎都不适合我:
Example one
Example two

这是我的页面代码:

<div data-role="page" id="page_tasks">
    <div data-role="header" data-id="header" data-theme="b" data-position="fixed">
        <h1>Tasks</h1>
        <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        <div data-role="navbar">
        <ul>
            <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
            <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
            <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
            <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
            <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
            <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
        </ul>
    </div>
    </div>

    <div data-role="main" class="ui-content">
        <!-- page content, unrelated -->
    </div>
</div>

类iconnavbar的CSS如下:

.iconnavbar {
 width: 16.66% !important;
 clear: none !important;
}

但这不应该对我的问题产生任何影响。事实上,我也尝试删除所有内容,因此它看起来就像其中一个例子,我仍然得到了同样糟糕的结果。

那么我该如何解决这个问题呢?或者是否有更好/替代的方法将导航栏添加到我的页面顶部,并在示例中使用固定位置?

下面是菜单在iPhone上的显示方式以及按下项目3的屏幕截图。 Screenshot of menu

1 个答案:

答案 0 :(得分:0)

因为我使用样式来摆脱标题中的图标背后的方块,如下所示:

.ui-header a {
  background: none !important;
  border: 0px;
}

它也影响了我试图添加的导航栏。只需将css更改为:

.ui-header > a {
  background: none !important;
  border: 0px;
}

我只使用了元素类型标题的直接子元素&#39; a&#39;。我也更喜欢导航栏是数据主题a和标题本身数据主题b。为此,我创建了一个带有headerwrapper类的固定头。这将我标题的两个不同部分包裹在一起。我将这两个不同的部分保存在不同的div中,因此我可以使用与导航栏不同的主题来设置标题的顶部。最终代码如下:

<div data-role="page" id="page_tasks">
    <div data-role="header" class="headerwrapper" data-position="fixed">
        <div data-role="header" data-theme="b">
            <h1>Tasks</h1>
            <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        </div>
        <div data-role="navbar" id="tasksnavbar">
            <ul>
                <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
                <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
                <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
                <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
                <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
                <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
            </ul>
        </div>
    </div>
    <div>
        <!-- here goes the content -->
    </div>
</div>

最后通过屏幕顶部的headerwrapper摆脱一些间距:

.headerwrapper {
  border-top: 0px !important;
  padding-top: 0px !important;
}

对于任何使用它的人:我在导航栏的ul中使用的类/属性完全不相关,你可以用你想要的任何东西替换它们。 最终结果: enter image description here