jquery mobile Toolbar(工具栏)

在Jquery Mobile中,有两种标准的工具栏:头部栏和尾部栏。(又称:“页眉”,“页脚”)
标题栏作为网页的标题,通常是在每个移动页面的第一个元素,通常包含一个页面的标题和两个按钮。
尾部栏通常是移动网站页面的最后一个元素,在内容和作用上比头部栏更自由一些,但一般也要包含文字和按钮。
在头部栏或尾部栏里放置一个水平的导航栏或选项卡栏的做法是很普遍的,所以Jquery Mobile包含导航栏组件,即把无序列表ul转化成水平的按钮栏,使用也非常方便。

 

在页面中设置头部栏和尾部栏的位置定位有几种方法。默认情况下,工具栏的定位的属性为 data-posion="inline"。在这种模式下,头部栏和尾部栏通过html自动的文档流放置,保证了他们能在所有的设备上可见,而不需要依靠css和js的定位的支持。

固定的定位模式可以使工具条在页面处于固定的位置,而不需要通过js设置。工具条处于他们在页面自然的位置上,就像inline模式一样,但是当他被滚动出屏幕之外时,Jquery Mobile会自动通过动画使滚动条重新出现在屏幕的顶部或底部。任何时候,点击屏幕会切换固定定位模式的工具条的显示:当工具条消失时点击屏幕会让他出现,再点击则会让它消失。这样用户就有选择在最大化浏览时要不要隐藏工具栏, 要给工具栏设置固定的定位模式,只需给工具栏的容器加 data-position="fixed" 的属性即可。

全屏的定位模式与固定的定位模式基本相同,但是当他被滚动出屏幕之外时,不会自动重新显示,除非点击屏幕。这对于图片或视频类有提升代入感的应用是非常有用的,当浏览时你想全屏都显示内容,而工具栏可以通过点击屏幕呼出。注意这种模式下工具栏会遮住页面内容,所以最好用在比较特殊的场合下。

尾部工具栏(页脚) data-role=footer 尾部工具栏,又翻译成尾部栏、页脚栏。在每个移动页,它通常是的最后一个元素。与头部栏相比,在内容和功能上的标题更自由,但通常包含文本和按钮的组合。页脚栏结构页脚栏与页眉栏有相同的基本结构,属性值不同之外。默认的样式主题data-theme="a"。页面页脚栏选项和与页眉栏,在配置方面是非常相似。主要的区别是,页脚的设计是结构化程度较低,有更多的灵活性。所以JqueryMobile不会自动给尾部栏生成按钮。由于页脚与页眉相比,不具有相同的规定的标记和标题,我们推荐使用布局网格或写自定义的方式来实现你想要的设计。<divdata-role="footer"><h4>Footercontent</h4></div>添加按钮给尾部栏添加任何有效的按钮标记的元素都都会生成按钮。为了节省空间,工具栏里的按钮,默认都是内联按钮,所以按钮的宽度只容纳icon和里面的文字。默认情况下,工具栏内的导航和其他部件,是没有padding的。如果要给工具栏增加padding,请增加一个ui-bar的class.<divdata-role="footer"class="ui-bar"><ahref="index.html"dat

头部工具栏(页眉) data-role=header 头部工具栏,又称页眉、标题栏。它作为网页的标题,通常是在每个移动页面的第一个元素,通常包含一个页面的标题和两个按钮。头部结构页眉是一个工具栏在页面的顶部,通常包含页面标题文本和可选的按钮。按钮被定位在标题的左右侧。头部标题通常是导航或动作。标题可以被固定的,当滚动页面时,他们始终在屏幕顶部。标题文本通常是一个H1标题元素,但使用任何级别的标题(h1-h6)允许语义的灵活性。例如,一个页面包含多个移动页面可以使用h1元素在家“页”和在第二页h2元素。所有的标题级别是相同的风格,默认情况下保持视觉的一致性。<divdata-role="header"> <h1>PageTitle</h1></div>样式主题data-theme头部工具栏默认样式主题,data-theme="a"(黑色)。可以轻松定义这颜色。JQueryMobile预设置了五套样式a(黑色)、b(蓝色)、c(灰色)、d(白色)、e(黄色)。<divdata-role="header"data-theme="a"> <h1>PageTitle</h1></div>添加按钮头部栏的链接被自动