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 相关文章推荐
HTML上传控件取消选择
Mar 06 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
JavaScript原型链详解
Nov 07 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php post换行的方法
2020/02/03 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
vue.js的提示组件
2017/03/02 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python采用Django制作简易的知乎日报API
2016/08/03 Python
TensorFlow变量管理详解
2018/03/10 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
保时捷设计:Porsche Design
2019/03/30 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
信息专业大学生自我评价分享
2014/01/17 职场文书
党员十八大心得体会
2014/09/12 职场文书
安全生产先进个人总结
2015/02/15 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL