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 相关文章推荐
javascript数组去掉重复
May 12 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
javascript实现数独解法
Mar 14 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
Vue源码解析之数组变异的实现
Dec 04 Javascript
JS中数据结构之栈
Jan 01 Javascript
vue设置全局访问接口API地址操作
Aug 14 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php 魔术方法详解
2014/11/11 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python计算auc指标实例
2017/07/13 Python
Python中偏函数用法示例
2018/06/07 Python
python生成密码字典的方法
2018/07/06 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
Python整数对象实现原理详解
2019/07/01 Python
Python中字符串List按照长度排序
2019/07/01 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
中秋寄语大全
2014/04/11 职场文书
保护环境建议书300字
2014/05/13 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
运动会通讯稿600字
2015/07/20 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
如何获取numpy array前N个最大值
2021/05/14 Python
win10清理dns缓存
2022/04/19 数码科技