JQuery Mobile实现导航栏和页脚


Posted in Javascript onMarch 09, 2016

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

默认地,导航栏中的链接会自动转换为按钮(无需 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实现导航栏和页脚的相关知识就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
Node.js文件操作详解
Aug 16 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
javascript基本算法汇总
Mar 09 #Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 #Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 #Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 #Javascript
jquery实现文本框textarea自适应高度
Mar 09 #Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue中的scope使用详解
2017/10/29 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
python中requests和https使用简单示例
2018/01/18 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
简历的自我评价范文
2014/02/04 职场文书
会计求职简历自我评价
2015/03/10 职场文书
综治目标管理责任书
2015/05/11 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python