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" >搜索</a>class="ui-btn-right"

</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" ></div>data-position="fixed"

<div data-role="footer" ></div>data-position="fixed"

浮动定位（浮动在上下两端）

若是须要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen 属性：

　

Fullscreen 定位

<div data-role="header" data-position="fixed" ></div>data-fullscreen="true"

<div data-role="footer" data-position="fixed" ></div>data-fullscreen="true"

　

浮动并透明

提示：fullscreen 对于照片、图像和视频很是理想。

提示：对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。