作为固定图标的导航条添加的页脚。但在显示时,导航栏转换为网格布局。即三列两行网格布局。
下面的脚本我使用的页脚nevBar,
<div data-role="footer" class="nav-footer" data-position="fixed">
<div data-role="navbar" class="nav-footer" data-grid="d">
<ul>
<li><a href="#" id="home" data-icon="custom">H</a></li>
<li><a href="#" id="messages" data-icon="custom">M</a></li>
<li><a href="#" id="activities" data-icon="custom">A</a></li>
<li><a href="#" id="trackers" data-icon="custom">T</a></li>
<li><a href="#" id="settings" data-icon="custom">S</a></li>
</ul>
</div>
</div>
,但它呈现如下。
<div class="nav-footer ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-overlay" data-position="fixed" data-role="footer" role="contentinfo">
<div class="nav-footer ui-navbar" data-grid="d" data-role="navbar" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-a">...</div>
<li class="ui-block-b">...</div>
</ul>
</div>
</div>
各页内容如下。
XXX ==>
<li class="ui-block-a">
<a id="home" class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="custom" href="#" data-theme="a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-custom"></span>
<span class="ui-btn-text">H</span>
</span>
</a>
</li>
我的输出显示为两行三列网格。
查看:http://jquerymobile.com/test/docs/buttons/buttons-grouped.html
<div data-role="controlgroup" data-type="horizontal"> your items </div>
你已经在你的li元素上指定了类来告诉你想要多少列
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-D">...</div> <--D here, column 4
<li class="ui-block-E">...</div> <--E here, column 5
</ul>
默认的列数是三,我猜,这就是为什么最后两个被推到下一行。