DDR爱好者之家

JQuery Mobile实现导航栏和页脚
站长资源 2024/11/29 佚名
37 1538
DDR爱好者之家 Design By 杰米

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

导航栏部分的代码一般放置在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>

一个基本的导航栏代码如上，包含两个按钮和一行文字作为标题。data-icon可以定义按钮对应的小图标。如果希望将按钮放在文本右侧，可以添加class=“ui-btn-right”样式。要注意的是，Jquery Mobile中的导航部分（header内）只能包含两个按钮。（可以想象一下，一般的手机app导航内都不会有过多的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。切换页面的方式也很简单，注意到这里的每一个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

关于jQuery mobile实现导航栏和页脚的相关知识就给大家介绍到这里，希望对大家有所帮助！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米