草庐IT

jQuery Mobile 工具栏

runoob 2023-04-07 原文

jQuery Mobile 工具栏

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



头部栏

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

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

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

实例

<div data-role="header">
  <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
  <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>

尝试一下 »

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

实例

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
</div>

尝试一下 »

但是,如果您把按钮链接放置在 <h1> 元素之后,将无法显示右侧的文本。要添加一个按钮到头部标题的右侧,请指定 class 为 "ui-btn-right":

实例

<div data-role="header">
  <h1>欢迎访问我的主页</h1>
  <a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">搜索</a>
</div>

尝试一下 »

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


尾部栏

尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性,因此可以包含尽可能多的按钮:

实例

<div data-role="footer">
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>

尝试一下 »

注意:尾部的样式与头部不同(没有内边距和空间,且按钮不居中)。我们可以使用简单的样式来解决这个问题:

实例

<div data-role="footer" style="text-align:center;">

尝试一下 »

您还可以将尾部中的按钮进行水平或垂直组合:

实例

<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">在Facebook上关注我</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在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>

尝试一下 »

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

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


更多实例

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

有关jQuery Mobile 工具栏的更多相关文章

  1. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  2. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  3. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  4. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改? - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存,也很有可能会自动创建一个保存点。至少,我可以将文档恢复到错误更改之前的状态,并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器,是否有具有等效功能的工具?例如,一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执,但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应,但我在编码时经常使用VIM,它具有自动保存功

  5. ruby - 使用 Ruby 开发工具包将文件上传到 Amazon S3 - 2

    我正在尝试上传文件。一个简单的hello.txt。我正在关注文档,但无法将其上传到我的存储桶。#STARTAWSCLIENTs3=Aws::S3::Resource.newbucket=s3.bucket(BUCKET_NAME)begins3.buckets[BUCKET_NAME].objects[KEY].write(:file=>FILE_NAME)puts"Uploadingfile#{FILE_NAME}tobucket#{BUCKET_NAME}."bucket.objects.eachdo|obj|puts"#{obj.key}=>#{obj.etag}"endresc

  6. ruby - 在 StockChart (highchart) 中以编程方式显示柱形图的工具提示 - 2

    我有一个Highstock图表(带有标记和阴影的线条),并且想以编程方式显示一个highstock工具提示,例如,当我选择某个表上的一行(包含图表数据)我想显示相应的highstock工具提示。这可能吗? 最佳答案 股票图表thissolution不起作用:在thisexample你必须更换这个:chart.tooltip.refresh(chart.series[0].data[i]);为此:chart.tooltip.refresh([chart.series[0].points[i]]);解决方案可用here.

  7. ABB-IRB-1200运动学分析MATLAB RVC工具分析+Simulink-Adams联合仿真 - 2

    一、机器人介绍        此处是基于MATLABRVC工具箱,对ABB-IRB-1200型号的微型机械臂进行正逆向运动学分析,并利Simulink工具实现对机械臂进行具有动力学参数的末端轨迹规划仿真,最后根据机械模型设计Simulink-Adams联合仿真。 图1.ABBIRB 1200尺寸参数示意图ABBIRB 1200提供的两种型号广泛适用于各作业,且两者间零部件通用,两种型号的工作范围分别为700 mm 和 900 mm,大有效负载分别为 7 kg 和5 kg。 IRB 1200 能够在狭小空间内能发挥其工作范围与性能优势,具有全新的设计、小型化的体积、高效的性能、易于集成、便捷的接

  8. Ruby & Syslog & 自定义工具 - 2

    我是syslog的新手。我们决定使用系统日志来跟踪Rails应用程序中的一些特殊事件。问题是我不想使用默认的/var/log/system.log文件,而是使用自定义文件,例如/var/log/myapp_events.log.我看到我必须像这样在/etc/syslog.conf中定义我自己的设施:myapp_events.*/var/log/myapp_events.log重新启动syslogd后,我发现我可以直接在bash控制台中使用它:syslog-s-kFacilitymyapp_eventsMessage"thisismymessage"该消息按预期出现在/var/log/m

  9. ruby - 使用 Gatling 作为集成测试工具 - 2

    目前我有一小套针对我的网络服务器运行的集成测试,它发出请求并断言一些关于响应应该是什么的假设。这些是用Ruby编写的,生成http请求。我一直在看Gatling作为压力测试工具,但我想知道它是否也可以用于集成测试。这样,所有端点请求都可以在压力测试和集成测试中重复使用。我可能在这里失去了一些东西,因为没有RSpec的BDD,但不必两次创建相同的测试。有没有人有这样使用gatling的经验? 最佳答案 您可以使用AssertionAPI并设置验收标准。但是,Gatling不是浏览器,不会运行/测试您的Javascript,因此这种方法

  10. threejs 720/360全景工具开发心得 - 2

    前言最近做了一个720全景工具,有很多开发人员觉得全景图很简单,github上也有很多全景图的源码,但当实际使用的时候会发现有很多坑,还达不到真正意义上的商用级别,下面我会把我们开发这个项目遇到的一些坑和解决方案都梳理处理,已经发布到线上https://720.h5ds.com/工具简介:H5-720全景(简称H5-720)是一款基于threejs+h5的全景图制作工具,用户可上传全景图片制作全景图,H5-720可以预设按钮,添加元素,添加热点,添加特效,添加多种交互方式,一键开启重力感应,VR眼镜支持,PC端制作后可以适配多端查看。什么是全景图?在这之前,简单的介绍下全景图,可以360度无死

随机推荐