课程表

jQuery Mobile 教程

jQuery Mobile 列表

jQuery Mobile 表单

jQuery Mobile 主题

jQuery Mobile 事件

jQuery Mobile 实例

jQuery Mobile 参考手册

工具箱
速查手册

jQuery Mobile 工具栏

当前位置:免费教程 » 移动开发 » jQuery Mobile

jQuery Mobile 工具栏

工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航:

标题栏

页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页、选项或搜索按钮)。

您可以在页眉中向左侧或/以及右侧添加按钮。

下面的代码,将向页眉标题文本的左侧添加一个按钮,并向右侧添加一个按钮:

实例

  1. <div data-role="header">
  2. <a href="#" data-role="button">首页</a>
  3. <h1>欢迎来到我的主页</h1>
  4. <a href="#" data-role="button">搜索</a>
  5. </div>

亲自试一试

下面的代码将向页眉标题的左侧添加一个按钮:

  1. <div data-role="header">
  2. <a href="#" data-role="button">首页</a>
  3. <h1>欢迎来到我的主页</h1>
  4. </div>

不过,如果您在 <h1> 元素之后放置按钮链接,那么它不会显示在文本右侧。如需向页眉标题的右侧添加按钮,请规定类名 "ui-btn-right":

实例

  1. <div data-role="header">
  2. <h1>欢迎来到我的主页</h1>
  3. <a href="#" data-role="button" class="ui-btn-right">搜索</a>
  4. </div>

亲自试一试

提示:页眉可包含一个或两个按钮,然而页脚没有限制。

页脚栏

与页眉相比,页脚更具伸缩性 - 它们更实用且多变,所以能够包含所需数量的按钮:

实例

  1. <div data-role="footer">
  2. <a href="#" data-role="button">转播到新浪微博</a>
  3. <a href="#" data-role="button">转播到腾讯微博</a>
  4. <a href="#" data-role="button">转播到 QQ 空间</a>
  5. </div>

亲自试一试

注释:页脚与页眉的样式不同(它会减去一些内边距和空白,并且按钮不会居中)。如果要修正该问题,请在页脚设置类名 "ui-btn":

实例

  1. <div data-role="footer" class="ui-btn">

亲自试一试

您也能够选择在页脚中水平还是垂直地组合按钮:

实例

  1. <div data-role="footer" class="ui-btn">
  2. <div data-role="controlgroup" data-type="horizontal">
  3. <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
  4. <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
  5. <a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
  6. </div>
  7. </div>

亲自试一试

定位页眉和页脚

放置页眉和页脚的方式有三种:

  • Inline - 默认。页眉和页脚与页面内容位于行内。
  • Fixed - 页面和页脚会留在页面顶部和底部。
  • Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部,but also over the page content. It is also slightly see-through

请使用 data-position 属性来定位页眉和页脚:

Inline 定位(默认)

  1. <div data-role="header" data-position="inline"></div>
  2. <div data-role="footer" data-position="inline"></div>

亲自试一试

Fixed 定位

  1. <div data-role="header" data-position="fixed"></div>
  2. <div data-role="footer" data-position="fixed"></div>

亲自试一试

如果需要启用全面定位,请使用 data-position="fixed",并向该元素添加 data-fullscreen 属性:

Fullscreen 定位

  1. <div data-role="header" data-position="fixed" data-fullscreen="true"></div>
  2. <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

亲自试一试

提示:fullscreen 对于照片、图像和视频非常理想。

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

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号