[英]Fixed header navbar issue with jQuery Mobile
I'm trying to implement a fixed navbar in my app and I'm have an issue where the navbar doesn't show up. 我正在尝试在我的应用中实现固定的导航栏,但是导航栏无法显示。 It seems to appear collapsed, see the following image for reference:
它似乎已折叠,请参见下图以供参考:
It is supposed to look like this: 应该看起来像这样:
Here is the related code I am using: 这是我正在使用的相关代码:
<div data-role="header" data-id="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-role="button" data-icon="b" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
<li><a href="index.html" data-role="button" data-icon="star" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
<li><a href="index.html" data-role="button" data-icon="grid" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
<li><a href="index.html" data-role="button" data-icon="search" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
I am able to successfully achieve the 2nd image by implementing the navbar outside of the header block, but I then can't set it to fixed position. 我可以通过在标题块外部实现导航栏来成功实现第二张图像,但是我无法将其设置为固定位置。 I'm certain it isn't any issues with my CSS as I'm using the default theme minus a few color tweaks.
我确定我的CSS没问题,因为我使用的是默认主题减去一些颜色调整。 Any suggestions?
有什么建议么?
-- UPDATE -- -更新-
As requested here is a quick and dirty implementation on jsfiddle . 根据要求,这是jsfiddle上的一种快速而肮脏的实现。
I removed data-role="button"
and class="ui-btn-right"
and it made a proper navbar. 我删除了
data-role="button"
和class="ui-btn-right"
,并创建了正确的导航栏。 Links in a navbar are automatically styled as buttons and evenly spaced. 导航栏中的链接会自动设置为按钮样式,并且间距均匀。 Not sure if
data-inline="true"
is necessary but I left it in. In the navbar I use I don't use it though. 不知道是否有必要使用
data-inline="true"
,但是我将其留在了里面。在导航栏中,我使用了,但我没有使用它。
<div data-role="header" data-id="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="b" data-inline="true" data-iconpos="notext"></a></li>
<li><a href="index.html" data-icon="star" data-inline="true" data-iconpos="notext"></a></li>
<li><a href="index.html" data-icon="grid" data-inline="true" data-iconpos="notext"></a></li>
<li><a href="index.html" data-icon="search" data-inline="true" data-iconpos="notext"></a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="header">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li ><a data-icon="search" href="#" href="a.html" >One</a></li>
<li><a data-icon="search" href="#" href="a.html" >Two</a></li>
<li><a data-icon="search" href="#" href="a.html" >Three</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
This code works pretty well. 这段代码效果很好。 http://jsfiddle.net/K6GMG/4/ i dont see any use of using button for a tag since they are already buttons.
http://jsfiddle.net/K6GMG/4//我看不到使用按钮使用标签,因为它们已经是按钮了。
but some how when i add this class="ui-btn-right"
is breaking the code. 但是当我添加此类
class="ui-btn-right"
时,某些方法会破坏代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.