这次给大家带来Mobile实现导航栏与页脚（附代码），Mobile实现导航栏与页脚的注意事项有哪些，下面就是实战案例，一起来看一下。
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。
默认地，导航栏中的链接会自动转换为按钮（无需 data-role=”button”）。
导航栏部分的代码一般放置在data-role为header的p的内。
欢迎访问我的主页
搜索
登录后复制
一个基本的导航栏代码如上，包含两个按钮和一行文字作为标题。data-icon可以定义按钮对应的小图标。如果希望将按钮放在文本右侧，可以添加class=“ui-btn-right”样式。要注意的是，Jquery Mobile中的导航部分（header内）只能包含两个按钮。（可以想象一下，一般的手机app导航内都不会有过多的button，一般都放在页脚中）
相比之下，页脚的按钮数量没有限制，页脚放在footer中，基本代码如下：
登录后复制
这符合一般的移动app设计模式，底部是切换到不同页面的button。切换页面的方式也很简单，注意到这里的每一个button都是用a标签定义的，其中的href就如我们上次所说，是可以进行页面转换的，只要在href后面添加另一个页面的id（即data-role为page的p）即可完成跳转。跳转的过程有很多jquery mobile内置定义的动画效果，在以后介绍。
关于页眉和页脚，除了上述所说之外，还可以使用data-position属性定义它们的位置属性，包含以下三个可选值（来自：w2cschool）：
Inline – 默认。页眉和页脚与页面内容位于行内。
Fixed – 页眉和页脚会留在页面顶部和底部。
Fullscreen – 与 fixed 类似;页眉和页脚会留在页面顶部和底部，but also over thepage content. It is also slightly see-through
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Mobile框架中怎样使用表单组件
jQuery Mobile与Kendo UI使用时有哪些区别
以上就是Mobile实现导航栏与页脚（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767584.html
