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 TextArea动态显示剩余字符
Oct 22 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
前端面试知识点目录一览
Apr 15 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
简单使用webpack打包文件的实现
Oct 29 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读取html并截取字符串的简单代码
2009/11/30 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python验证码识别的示例代码
2017/09/21 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
PyTorch安装与基本使用详解
2020/08/31 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
行政总监岗位职责
2013/12/05 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫