【JQuery MObile】工具栏

在Jquery Mobile中，有两种标准的工具栏：头部栏和尾部栏

头部栏的作用为网站的标题，通常是移动网站页面的第一个元素，一般包括页面的标题文字和最多两个按钮。

尾部栏通常是移动网站页面的最后一个元素，在内容和作用上比头部栏更自由一些，但一般也要包含文字和按钮。

在头部栏或尾部栏里放置一个水平的导航栏或选项卡栏的做法是很普遍的，所以Jquery Mobile包含导航栏组件，即把无序列表ul转化成水平的按钮栏，使用也非常方便。

工具栏定位的设置：

默认情况下，工具栏的定位的属性为"inline"，在这种模式下，头部栏和尾部栏通过html自动的文档流放置。

固定的定位模式可以使工具条在页面处于固定的位置，

这个页面是一个使用Jquery Mobile设定了固定定位的头部栏和尾部栏的实例。页面的文档流是正常的，让我们能够正常的布局文档，而不用通过脚本写。头部栏和尾部栏在文档流中的正常位置，但是当他们被滚动出屏幕后，你可以通过点击屏幕，使他们重新出现。再次点击或者滚动屏幕会使他们重新出现在文档流中（在顶部或底部），要给头部栏或底部栏设置这样的行为，需要给工具栏的容器增加data-position="fixed"属性。

全屏的定位模式。

这个页面展示“全屏"工具栏模式。这个工具栏一般用在比较特殊的场合，比如想要把内容撑满全屏，然后头部栏和尾部栏随着点击页面而出现和消失-在图片，照片和视频浏览器经常需要这样。要打开工具栏的这种特性，给页面的"page"增加data-fullscreen="true"属性，然后给头部工具栏和尾部栏的容器增加data-position="fixed"属性，注意在这种模式下工具栏会遮住页面的内容，所以当工具栏可见时不是全部内容都能够看见的

头部栏是处于页面顶部的工具栏，通常包含页面标题文字，文字左边或右边可以放置几个可选的按钮用作导航操作，标题文字一般用h1标签，但是从h1-h6都是可以的，这样可以使结构有弹性。

头部栏按钮默认的定位为：一个按钮时，按钮默认会在左边，如果需要放置在右边时，需要添加属性class="ui-btn-right"，两个按钮时，如果按一般的方式放，一个默认在左，一个默认在右，不需要添加其他设置。

如果你想设置后退按钮的文字，需要给页面的page"元素增加data-back-btn-text="文字"的属性.

尾部栏下：

默认情况下，工具栏内部容纳组件与导航是不留padding的,如果要给工具栏增加padding,请增加一个ui-bar的class.

如果要想把几个按钮打包成一个按钮组，则需要把这些按钮用一个容器包裹，并给该容器增加data-role="controlgroup"和data-type="horizontal"属性 。

如：<div data-role="controlgroup" data-type="horizontal">

尾部下也可以添加表单元素。

 

有些情况下你需要一个尾部栏为全局导航元素，希望页面转场时尾部栏也固定并显示。创造一个持续的尾部栏可以做到这一点，给尾部栏添加data-id属性，并且在所有关联的页面的尾部栏设定同样的data-id的值，就可以使尾部栏在页面转场时也固定并显示。

请注意：这个效果只有在头部栏和尾部栏设定为固定的定位模式（data-position="fixed" ）时在才有用，这样他们在页面转场时才不被隐藏。 

Jquery Mobile 提供了一个基本的导航栏组件，每一行可以最多放5个按钮，通常在顶部或者底部。导航栏的代码为一个ul列表，被一个容器包裹，这个容器需要有data-role="navbar"属性。要设定某一个链接为活动（selected）状态，给链接增加class="ui-btn-active" 即可。

如：

<div data-role="footer">
　 <div data-role="navbar">
　　 <ul>
　　　 <li><a href="a.html" class="ui-btn-active">One</a></li>
　　　 <li><a href="b.html">Two</a></li>
　　 </ul>
　 </div><!-- /navbar -->
</div><!-- /footer -->

导航栏内每项的宽度都被设定为相同的，所以按钮的宽度为浏览器宽度 1/2.新增加一项的话，每项的宽度自动匹配为1/3,以此类推。如果导航栏多于5项，导航栏自动表现为多行。

给导航栏的列表项链接增加data-icon属性，可以给链接设置一个标准的移动网站的图标。给列表项链接增加data-iconpos="top"属性，可以给链接的图标设置位置为在文字上方。

给导航栏设置data-theme属性，可以给导航栏设置主题样式，Jquery mobile默认有a,b,c,d,e五个主题样式，默认为a。

起导航作用的按钮应该写为链接。