我正在使用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;
}
但这不应该对我的问题产生任何影响。事实上,我也尝试删除所有内容,因此它看起来就像其中一个例子,我仍然得到了同样糟糕的结果。
那么我该如何解决这个问题呢?或者是否有更好/替代的方法将导航栏添加到我的页面顶部,并在示例中使用固定位置?
答案 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;
}