当前位置:Gxlcms > JavaScript > Mobile实现导航栏与页脚(附代码)

Mobile实现导航栏与页脚(附代码)

时间:2021-07-01 10:21:17 帮助过:14人阅读

这次给大家带来Mobile实现导航栏与页脚(附代码),Mobile实现导航栏与页脚的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

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

一个基本的导航栏代码如上,包含两个按钮和一行文字作为标题。data-icon可以定义按钮对应的小图标。如果希望将按钮放在文本右侧,可以添加class=“ui-btn-right”样式。要注意的是,Jquery Mobile中的导航部分(header内)只能包含两个按钮。(可以想象一下,一般的手机app导航内都不会有过多的button,一般都放在页脚中)

相比之下,页脚的按钮数量没有限制,页脚放在footer中,基本代码如下:

<p 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> 
</p>

这符合一般的移动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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Mobile框架中怎样使用表单组件

jQuery Mobile与Kendo UI使用时有哪些区别

以上就是Mobile实现导航栏与页脚(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行