HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

导航栏部分的代码一般放置在data-role为header的div的内。

<div data-role="header">
    <a href="#" data-role="button" data-icon="home">首页</a>
    <h1>欢迎訪问我的主页</h1>
    <a href="#" data-role="button" data-icon="search">搜索</a>
  </div>

一个主要的导航栏代码如上。包括两个button和一行文字作为标题。data-icon能够定义button相应的小图标。假设希望将button放在文本右側。能够加入class=“ui-btn-right”样式。要注意的是，Jquery Mobile中的导航部分（header内）仅仅能包括两个button。（能够想象一下，一般的手机app导航内都不会有过多的button，一般都放在页脚中）

相比之下。页脚的button数量没有限制，页脚放在footer中，基本代码例如以下：

<div data-role="footer">
    <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
</div>

这符合一般的移动app设计模式，底部是切换到不同页面的button。切换页面的方式也非常easy，注意到这里的每个button都是用a标签定义的。当中的href就如我们上次所说，是能够进行页面转换的，仅仅要在href后面加入还有一个页面的id（即data-role为page的div）就可以完毕跳转。跳转的过程有非常多jquery mobile内置定义的动画效果。在以后介绍。

关于页眉和页脚，除了上述所说之外，还能够使用data-position属性定义它们的位置属性。包括下面三个可选值（来自：w2cschool）：

Inline - 默认。页眉和页脚与页面内容位于行内。

Fixed – 页眉和页脚会留在页面顶部和底部。

Fullscreen - 与 fixed 类似;页眉和页脚会留在页面顶部和底部，but also over thepage content. It is also slightly see-through