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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
javascript demo 基本技巧
Dec 18 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
详解JavaScript 作用域
Jul 14 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python实现SMTP邮件发送
2020/06/16 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL