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 工具栏的更多相关文章

  1. [ 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& ...

  2. 自定义jQuery Mobile工具栏按钮

    自定义jQuery Mobile工具栏按钮 1.实现效果

  3. jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

    程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...

  4. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  5. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  6. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  7. 皓轩的jquery mobile之路(二)

    jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加dat ...

  8. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  9. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

随机推荐

  1. kettle之mongodb数据同步

    需求: 1.源数据库新增一条记录,目标库同时新增一条记录: 2.源数据库修改一条记录,目标库同时修改该条记录: 示例用到三个Kettle组件 下面详细说下每个组件的配置 Source: 本示例连接的是 ...

  2. java 使用递归获取指定文件路径目录,删除指定的文件后缀(可扩展,根据具体需要的删除的后缀进行配置)~~

    在工作开发过程中,每次用SVN提交代码全选择的时候,发现会产生很多不需要的文件后缀垃圾文件,感觉挺烦人的,一个一个删太麻烦了,如果产生多种后缀文件时,那删起来多费劲,是吧?想想,就写了一段程序通过递归 ...

  3. CSV表格读取

    读取CSV表格需要CSV表格的编码格式为UTF-8 ,这个脚本中有些是为了方便使用封装的dll 不过都是一些简单的实现,自己实现也很容易,可做参考. /// <summary> /// 构 ...

  4. GsonUtils.getGson().fromJson() 转泛型集合

    List<QiTaFree> qiTaFreeList = GsonUtils.getGson().fromJson(exhiMain.getQiTaFressJson(), new Ty ...

  5. Redis中的简单事物以及消息订阅发布

    Redis支持简单的事物,但是没有mysql的Innodb支持的那么的完善 我们接下来看一下Redis和Mysql的事物的一个对比:   MySQL Redis 开启 start transactio ...

  6. MySQL中存储过程+事件的使用方法

    一.背景 将界面操作日志存储在MySQL数据库中的operationlog表中,如果该表不能自动备份,表中的数据会越来越多,影响速度.可以定期将表中数据备份到另外一个表中来解决. 二.解决方案 1.使 ...

  7. SEO优化小技巧

    /** * seo优化课程 * 先谢慕课网 */ /** * SEO基本介绍 * SEO与前端工程师 */ /** * SEO基本介绍 * 搜索引擎工作原理:输入关键字------查询------显示 ...

  8. .net中的 InitializeComponent方法

    自己做笔记用,纯碎自己做笔记,谁看不惯想喷的请绕道 在winform开发中每一个窗体在构造函数的方法就需要 InitializeComponent方法,就是初始化 窗体组件  例如 TextBox,T ...

  9. 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 ...

  10. centos7.2下编译安装&&使用-git代码库

    centos7.2下编译安装git Git简介 Git是一个分布式版本控制系统 Git vs SVN SVN是典型的集中式版本控制起,版本库集中存放在服务器,当我们用自己的电脑干活儿的时候,需要先从中 ...