jQuery Mobile 工具栏
jQuery Mobile 工具栏
工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航:
标题栏
页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页、选项或搜索按钮)。
您可以在页眉中向左侧或/以及右侧添加按钮。
下面的代码,将向页眉标题文本的左侧添加一个按钮,并向右侧添加一个按钮:
实例:
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>
下面的代码将向页眉标题的左侧添加一个按钮:
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>
不过,如果您在 <h1> 元素之后放置按钮链接,那么它不会显示在文本右侧。如需向页眉标题的右侧添加按钮,请规定类名 "ui-btn-right":
实例:
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right"
>搜索</a>
</div>
提示:页眉可包含一个或两个按钮,然而页脚没有限制。
页脚栏
与页眉相比,页脚更具伸缩性 - 它们更实用且多变,所以能够包含所需数量的按钮:
实例:
<div data-role="footer">
<a href="#" data-role="button">转播到新浪微博</a>
<a href="#" data-role="button">转播到腾讯微博</a>
<a href="#" data-role="button">转播到 QQ 空间</a>
</div>
注释:页脚与页眉的样式不同(它会减去一些内边距和空白,并且按钮不会居中)。如果要修正该问题,请在页脚设置类名 "ui-btn":
实例:
<div data-role="footer" class="ui-btn">
您也能够选择在页脚中水平还是垂直地组合按钮:
实例:
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<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>
</div>
定位页眉和页脚
放置页眉和页脚的方式有三种:
- Inline - 默认。页眉和页脚与页面内容位于行内。
- Fixed - 页面和页脚会留在页面顶部和底部。
- Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部,but also over the page content. It is also slightly see-through
请使用 data-position 属性来定位页眉和页脚:
Inline 定位(默认)
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
固定定位
Fixed 定位
<div data-role="header" data-position="fixed"
></div>
<div data-role="footer" data-position="fixed"
></div>
浮动定位(浮动在上下两端)
如果需要启用全面定位,请使用 data-position="fixed",并向该元素添加 data-fullscreen 属性:
Fullscreen 定位
<div data-role="header" data-position="fixed" data-fullscreen="true"
></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"
></div>
浮动并透明
提示:fullscreen 对于照片、图像和视频非常理想。
提示:对于 fixed 和 fullscreen 定位,触摸屏幕将隐藏和显示页眉及页脚。
jQuery Mobile 工具栏的更多相关文章
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏
[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏 Written In The Font " Wirte less Do more& ...
- 自定义jQuery Mobile工具栏按钮
自定义jQuery Mobile工具栏按钮 1.实现效果
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- 皓轩的jquery mobile之路(二)
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加dat ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
随机推荐
- kettle之mongodb数据同步
需求: 1.源数据库新增一条记录,目标库同时新增一条记录: 2.源数据库修改一条记录,目标库同时修改该条记录: 示例用到三个Kettle组件 下面详细说下每个组件的配置 Source: 本示例连接的是 ...
- java 使用递归获取指定文件路径目录,删除指定的文件后缀(可扩展,根据具体需要的删除的后缀进行配置)~~
在工作开发过程中,每次用SVN提交代码全选择的时候,发现会产生很多不需要的文件后缀垃圾文件,感觉挺烦人的,一个一个删太麻烦了,如果产生多种后缀文件时,那删起来多费劲,是吧?想想,就写了一段程序通过递归 ...
- CSV表格读取
读取CSV表格需要CSV表格的编码格式为UTF-8 ,这个脚本中有些是为了方便使用封装的dll 不过都是一些简单的实现,自己实现也很容易,可做参考. /// <summary> /// 构 ...
- GsonUtils.getGson().fromJson() 转泛型集合
List<QiTaFree> qiTaFreeList = GsonUtils.getGson().fromJson(exhiMain.getQiTaFressJson(), new Ty ...
- Redis中的简单事物以及消息订阅发布
Redis支持简单的事物,但是没有mysql的Innodb支持的那么的完善 我们接下来看一下Redis和Mysql的事物的一个对比: MySQL Redis 开启 start transactio ...
- MySQL中存储过程+事件的使用方法
一.背景 将界面操作日志存储在MySQL数据库中的operationlog表中,如果该表不能自动备份,表中的数据会越来越多,影响速度.可以定期将表中数据备份到另外一个表中来解决. 二.解决方案 1.使 ...
- SEO优化小技巧
/** * seo优化课程 * 先谢慕课网 */ /** * SEO基本介绍 * SEO与前端工程师 */ /** * SEO基本介绍 * 搜索引擎工作原理:输入关键字------查询------显示 ...
- .net中的 InitializeComponent方法
自己做笔记用,纯碎自己做笔记,谁看不惯想喷的请绕道 在winform开发中每一个窗体在构造函数的方法就需要 InitializeComponent方法,就是初始化 窗体组件 例如 TextBox,T ...
- 318. Maximum Product of Word Lengths
Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...
- centos7.2下编译安装&&使用-git代码库
centos7.2下编译安装git Git简介 Git是一个分布式版本控制系统 Git vs SVN SVN是典型的集中式版本控制起,版本库集中存放在服务器,当我们用自己的电脑干活儿的时候,需要先从中 ...