W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 工具栏



jQuery Mobile 工具栏

工具栏元素通常位于头部和尾部内 - 让导航易于访问:


头部栏

头部栏一般包含页面标题/logo 或一两个按钮(通常是首页、选项或搜索)。

您可以添加按钮到头部的左侧或右侧。

下面的代码,将添加一个按钮到头部标题文本的左侧,添加一个按钮到头部标题文本的右侧:

Example

<div data-role="header">
  <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>
尝试一下 »

下面的代码,将添加一个按钮到头部标题文本的左侧:

Example

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome To My Homepage</h1>
</div>
尝试一下 »

以下代码只会在标题右侧添加一个按钮:

Example

<div data-role="header">
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>
尝试一下 »

Note 头部可以包含一个或两个按钮,而尾部没有限制。

尾部栏

页脚位于页面底部。

页脚比标题更灵活 - 它在整个页面上功能更加可变,因此可以包含所需的按钮数量:

Example

<div data-role="footer">
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
尝试一下 »

提示: 页脚中的按钮不是默认居中的。要解决这个问题,只需使用CSS:

Example

<div data-role="footer" style="text-align:center;">
尝试一下 »

您还可以将页脚中的按钮水平或垂直分组:

Example

<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
  </div>
</div>
尝试一下 »

定位头部栏和尾部栏

头部和尾部可以通过三种方式进行定位:

  • Inline - 默认。头部栏和尾部栏与页面内容内联。
  • Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
  • Fullscreen - 与 Fixed 定位模式基本相同,头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时,不会自动重新显示,除非点击屏幕,这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容,所以最好用在比较特殊的场合下。

使用 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>
尝试一下 »

提示: 全屏定位适用于照片、图像和视频。

提示: 固定定位和全屏定位中,通过点击屏幕将隐藏和显示头部栏和尾部栏。


Examples

更多实例

在工具栏上只显示图标
在工具栏上只显示图标可以使用 ui-btn-icon-notext 类。