本文延续之前”使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章,本文介绍的是 jQuery Mobile 中的 jQuery Mobile 工具栏。在 jQuery Mobile 中,有一套完整的工具栏和导航栏组件,这里的工具栏和导航栏并不只是提供了相应的外观样式,还自带有一些常用的辅助功能,下面 Kayo 为大家详细介绍。
如上面描述,在 h1 标签的上下文中,可以通过使用按钮标记放置按钮,通常自定义的按钮会使用 a 标签,给标签添加 data-rel=”back” 属性会自动生成后退按钮,点击后退按钮返回的是历史记录中的上一个页面,而无视该 a 标签的 href 属性值,但是对于 C 级浏览器,情况刚好相反, C 级浏览器只会识别 href 属性值,而不会直接退回历史记录中的上一个页面,因此要设计一个良好的导航,也必须根据实际情况给 href 设定一个有意义的值,而提高 C 级浏览器的用户体验。除此之外,开发者还可以使用 data-icon 属性改变按钮上的 icon 小图标,而 data-icon 的可取值可以参考《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮》中的“带图标按钮”。
由于这里要显示的效果是动态的,就不放效果图了,建议大家直接查看完整 Demo 中相应的例子,其中“固定位置的全屏工具栏”在 PC 会出现相滚动条的情况,建议使用移动浏览器查看。
六.主题样式
与其他 jQuery Mobile 组件一样,工具栏也是支持使用主题样式的,可以使用 data-theme 属性在组件的标签上添加主题样式,该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 class 来自定义颜色,而默认的样式则为 a ,即黑色。
jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的“触摸屏优化”外,另外一个最直接的特点就是“响应式设计”,关于响应式设计,Kayo 已经写了不少相关的文章进行说明,而本文要介绍的,是 jQuery Mobile 中为响应式设计作出的优化和工具。…