# 工具栏 ## 工具栏综述 Toolbar basics 在Jquery Mobile中，有两种标准的工具栏：**头部栏和尾部栏** 头部栏的作用为网站的标题，通常是移动网站页面的第一个元素，一般包括页面的标题文字和最多两个按钮 尾部栏通常是移动网站页面的最后一个元素，在内容和作用上比头部栏更自由一些，但一般也要包含文字和按钮 在头部栏或尾部栏里放置一个水平的导航栏或选项卡栏的做法是很普遍的，所以Jquery Mobile包含导航栏组件，即把无序列表ul转化成水平的按钮栏，使用也非常方便 ## 工具栏定位的设置 Toolbar positioning options 在页面中设置头部栏和尾部栏的位置定位有几种方法。默认情况下，工具栏的定位的属性为**"inline"**.在这种模式下，头部栏和尾部栏通过html自动的文档流放置，保证了他们能在所有的设备上可见，而不需要依靠css和js的定位的支持固定的定位模式可以使工具条在页面处于固定的位置，而不需要通过js设置。工具条处于他们在页面自然的位置上，就像inline模式一样，但是当他被滚动出屏幕之外时，Jquery Mobile会自动通过动画使滚动条重新出现在屏幕的顶部或底部任何时候，点击屏幕会切换固定定位模式的工具条的显示：当工具条消失时点击屏幕会让他出现，再点击则会让它消失。这样用户就有选择在最大化浏览时要不要隐藏工具栏， 要给工具栏设置固定的定位模式，只需给工具栏的容器加“data-position="fixed"的属性即可全屏的定位模式与固定的定位模式基本相同，但是当他被滚动出屏幕之外时，不会自动重新显示，除非点击屏幕。这对于图片或视频类有提升代入感的应用是非常有用的，当浏览时你想全屏都显示内容，而工具栏可以通过点击屏幕呼出。注意这种模式下工具栏会**遮住页面内容**，所以最好用在比较特殊的场合下