使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 工具栏

本文延续之前"使用 jQuery Mobile 与 HTML5 开发 Web App"系列文章,本文介绍的是 jQuery Mobile 中的 jQuery Mobile 工具栏。在 jQuery Mobile 中,有一套完整的工具栏和导航栏组件,这里的工具栏和导航栏并不只是提供了相应的外观样式,还自带有一些常用的辅助功能,下面 Kayo 为大家详细介绍。

也许你会奇怪,不是有工具栏和导航栏吗?为什么标题只写了工具栏!其实这里的工具栏和导航栏并不是分开的组件,而是统一的一套标准组件,既有工具栏的功能也有导航栏的功能,下文就直接简称工具栏了。

一.工具栏基础

在 jQuery Mobile 中,有两套标准工具栏——头部栏和尾部栏,头部栏通常是放在网页顶部,而尾部栏通常放在网站底部,值得注意的是,头部栏和尾部栏的位置并不依靠 CSS 和 JavaScript 定位,而是本身就处于文档流的顶部或底部,这样是为了尽量保证那些对于 CSS 和 JavaScript 支持并不好的设备也可以看到工具栏,另外也不用消耗多余的 CSS 和 JavaScript 资源。

可能在阅读上面这段话后,童鞋们可能有点迷惑,没关系,下面会分开介绍这些属性,相信阅读后便会理解 jQuery Mobile 的工具栏组件了。

二.头部栏

头部栏正如其名字所表达的,是处于页面头部的栏目,使用 data-role="header" 属性可以产生头部栏。除了表示标题的文字外,在头部栏的左边或右边可以放置几个可选的按钮,作为导航之用(返回上一页,回到首页等)。使用 h1 的 HTML 标签包裹文字,这段文字会被解释为标题文字,赋予相关的样式,而在 h1 标签的上下文中,可以通过使用按钮标记放置按钮,其中在 h1 标签上的按钮会被放置在头部栏左边,而在 h1 标签之下的按钮会被放置在头部栏右边。

如上面描述,在 h1 标签的上下文中,可以通过使用按钮标记放置按钮,通常自定义的按钮会使用 a 标签,给标签添加 data-rel="back" 属性会自动生成后退按钮,点击后退按钮返回的是历史记录中的上一个页面,而无视该 a 标签的 href 属性值,但是对于 C 级浏览器,情况刚好相反, C 级浏览器只会识别 href 属性值,而不会直接退回历史记录中的上一个页面,因此要设计一个良好的导航,也必须根据实际情况给 href 设定一个有意义的值,而提高 C 级浏览器的用户体验。除此之外,开发者还可以使用 data-icon 属性改变按钮上的 icon 小图标,而 data-icon 的可取值可以参考《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮》中的“带图标按钮”。

下面给出一个带有两个按钮的例子:

<div data-role="header">
	<a data-rel="back" href="#home" data-icon="delete">取消</a>
	<h1>常见头部栏</h1>
	<a href="#home" data-icon="check">保存</a>
</div>

效果:

这里必须强调一下,例子中的链接的 href 值为 "#home",这是 jQuery Mobile 所支持的一种链接, "home" 指是一个 jQuery Mobile page 的 id 值,使用这种写法可以很方便的链接到该 page ,参考文章底部 Demo 的源码可以看到完整的代码。

另外开发者也可以使用 CSS class 来控制按钮的位置:

ui-btn-left 和 ui-btn-right class 分别是控制按钮在头部栏的左边和右边,并且设置相应的 class 后,按钮的位置只根据类来分配,与它们实际在 HTML 源码中的位置无关。

<div data-role="header">
	<a class= "ui-btn-right" href="#home" data-rel="back" data-icon="delete">取消</a>
	<h1>使用 CSS 类控制按钮位置的自定义头部栏</h1>
	<a class="ui-btn-left" href="#home" data-icon="check">保存</a>
</div>

效果:

三.尾部栏

在 jQuery Mobile 中,使用 data-role="footer" 可以产生尾部栏,尾部栏的情况跟头部栏基本相同,也支持放置按钮,通过 CSS 类调整按钮位置,这里给出一个基本的尾部栏例子:

<footer data-role="footer">
	<h2>Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>
</footer>

效果:

另外在尾部栏中添加一个按钮组可以很方便的做出一个工具栏,关于按钮组的使用可以参见 《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮》中的“按钮组”部分。

四.导航栏

导航栏可以为开发者提供一种简便的导航菜单方案,首先给出一个例子:

<div data-role="header">
	<div data-role="navbar">
		<ul>
			<li><a href="#" class="ui-btn-active">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
		</ul>
	</div>
</div>

这里说明一下,导航栏并不一定需要头部栏包裹,不过一般建议放在头部栏或尾部栏中。要设置某一个链接为活动状态(当前状态),可以给该链接添加 "ui-btn-active" 的 class ,如例子中设置了第一个链接为当前活动状态。

五.固定位置的工具栏与全屏的工具栏

我们可以给工具栏添加 data-position="fixed" 的属性,这样工具栏就会固定在页面中,并不随页面滚动而滚动了,当工具栏滚出屏幕后,可以通过点击屏幕使其再次出现。在此基础上,若再为工具栏添加 data-fullscreen="true" 属性,则能触发工具栏全屏模式,这样页面的主体内容会占满页面,然后通过点击屏幕使工具栏出现或消失。也许你会觉得这个情景很熟悉,的确,这种方式在一些 App 上很常见,比如视频网站的 App ,播放视频时显示进度条,音量按钮,清晰度选择等,点击屏幕工具条就会消失,需要时再次点击就会出现。现在这样的功能 Web App 也做到了,并且很简便,配合出 HTML5 的一些属性,也就能方便的做出一些很酷的 Web App!

固定位置的工具栏

<div data-role="header" data-position="fixed">
	<a href="#home" data-rel="back" data-icon="delete">取消</a>
	<h1>固定位置的工具栏</h1>
</div>

固定位置的全屏工具栏

<div data-role="header" data-position="fixed" data-fullscreen="true">
	<a href="#home" data-rel="back" data-icon="delete">取消</a>
	<h1>固定位置的工具栏</h1>
</div>

由于这里要显示的效果是动态的,就不放效果图了,建议大家直接查看完整 Demo 中相应的例子,其中“固定位置的全屏工具栏”在 PC 会出现相滚动条的情况,建议使用移动浏览器查看。

六.主题样式

与其他 jQuery Mobile 组件一样,工具栏也是支持使用主题样式的,可以使用 data-theme 属性在组件的标签上添加主题样式,该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 class 来自定义颜色,而默认的样式则为 a ,即黑色。

七.完整 Demo

完整实例 Demo(建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览)

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/web-app-by-jquery-mobile-and-html5-toolbar.html

评论列表

  • 评论者头像
    回复

    学习ing :wink:

  • 评论者头像
    回复

    效果很不错.最近比较忙,过段时间再仔细看下详细实现代码.

    PS: 调高一下文章的 line-height 会比较好,文字段有点黏在一起了.h2 仅仅加黑,无法很好的突出”分段”,加粗加大或者配合主题再加上一下东西,个人觉得更醒目会比较好.

    • 评论者头像
      回复

      @潜行者m 嗯嗯,文章 line-height 方面之前已经仔细对比过,个人觉得这个 line-height 比较合适,h2方面确实不够突出,不过本身是h2,已经加粗了,只能想一下其他好的idea!

  • 评论者头像
    回复

    现在的手机都是标准的这种了

    • 评论者头像
      回复

      @大猫 确实手机的标准比PC更加统一,因此做移动端方面的 Web 开发也更加方便了!

  • 评论者头像
    回复

    额 实践起来不易啊

  • 评论者头像
    回复

    最后一条在缩放时第一条内容被导航遮住,或许可以下降一点或者透明度什么的 :mrgreen:

  • 评论者头像
    回复

    很不错,但是显示时,用手指触摸一下屏幕,头部工具栏会缩短十几个象素,再点又恢复长度,不知道为什么?地址在http://cosmoscape.com/mobile/ajax.shtml

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O