工具栏定位的设置 Toolbar positioning options
在页面中设置头部栏和尾部栏的位置定位有几种方法。默认情况下，工具栏的定位的属性为"inline".在这种模式下，头部栏和尾部栏通过html自动的文档流放置，保证了他们能在所有的设备上可见，而不需要依靠css和js的定位的支持
固定的定位模式可以使工具条在页面处于固定的位置，而不需要通过js设置。工具条处于他们在页面自然的位置上，就像inline模式一样，但是当他被滚动出屏幕之外时，Jquery Mobile会自动通过动画使滚动条重新出现在屏幕的顶部或底部
任何时候，点击屏幕会切换固定定位模式的工具条的显示：当工具条消失时点击屏幕会让他出现，再点击则会让它消失。这样用户就有选择在最大化浏览时要不要隐藏工具栏，要给工具栏设置固定的定位模式，只需给工具栏的容器加“data-position="fixed"的属性即可
全屏的定位模式与固定的定位模式基本相同，但是当他被滚动出屏幕之外时，不会自动重新显示，除非点击屏幕。这对于图片或视频类有提升代入感的应用是非常有用的，当浏览时你想全屏都显示内容，而工具栏可以通过点击屏幕呼出。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下
头部栏是处于页面顶部的工具栏，通常包含页面标题文字，文字左边和/或右边可以放置几个可选的按钮用作导航操作
标题文字一般用h1标签，但是从h1-h6都是可以的，这样可以使结构有弹性。比如说，一个页面内包含了多个"page"标记的页面，这样 可以给主"page"的标题文字用h1标签，次级"page"的标题文字用h2标签。所有的头部默认下在样式上都是相同的，保持的外观的一致性
- <div data-role="header">
- <h1>Page Title</h1>
- </div>
默认的头部栏
头部栏的主题样式默认情况下为"a"(黑色)，但是你可以很轻松的设置主题样式
Jquery Mobile会自动给每个页面的头部栏生成一"back"按钮，来简化把按钮放进头部栏的过程。如果你不想?quot;back"按钮放进头部栏，你可以自己加一个需要的按钮或者给头部栏添加”data-backbtn="false"属性
添加按钮
在标准的头部栏的设置下，标题文字两边各有一个可放置按钮的位置。每一个按钮通常都是都是a,但是任何有效的按钮标记的元素都可以。为了节省空间，工具栏里的按钮都是内联按钮，所以按钮的宽度只容纳icon和里面的文字
创建自定义的后退按钮
给a标签增加data-rel="back"的属性，任何链接都可以样式化为后退按钮，行为上为后退到上一个历史记录的页面，无视该链接的herf地址。这对于要链接回到一个命名好的页面的情况是很有用的但是注意请给链接设定一个有意义的herf地址，指向实际要连接的页面，使得C级浏览器也能够使用这个按钮而且要注意如果你只是需要一个后退的页面转场效果，而不是真正的后退到上一个历史记录的页面，应该用data-direction="reverse" 的属性，而不是用data-rel="back"属性的按钮
按钮默认的定位
头部的按钮是头部栏容器的直接子节点，第一个链接定位于头部栏左边，第二个链接放在右边，在这个例子中，根据两个链接在源代码中的位置，取消在左边，保存在右边
- <div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check">Save</a>
- </div>
按钮会自动应用他们的父容器的主题样式，所以应用了"a"主题样式的头部栏里的按钮也会应用"a"主题样式，我们通过给按钮增加data-theme的属性并设置，可以使按钮看起来有所区别
- <div data-role="header" data-position="inline">
- <a href="index.html" data-icon="delete">Cancel</a>
- <h1>Edit Contact</h1>
- <a href="index.html" data-icon="check" data-theme="b">Save</a>
- </div>
通过class控制按钮的定位
按钮的位置可以通过class设置，而不依赖他们在源代码中的顺序。如果你想把唯一一个按钮放在右边，这时就非常有用了。两个控制的类为ui-btn-right 和ui-btn-left
在这个例子中，我们要把头部栏唯一一个按钮放于右边，首先给头部栏增加data-backbtn="false"属性来阻止头部栏自动生成后退按钮的行为，然后给自己的按钮增加ui-btn-right的class
- <div data-role="header" data-position="inline" data-backbtn="false">
- <h1>Page Title</h1>
- <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
- </div>
自定义头退按钮的文字
如果你想设置后退按钮的文字，需要给页面?page"元素增加data-back-btn-text="文字"的属性，或者通过程序来实现?$.mobile.page.prototype.options.backBtnText = "文字";
如果你想配置后退按钮的主题样式，使用 $.mobile.page.prototype.options.backBtnTheme = "a" 如果你要用这段程序，需要在mobileinit时间的处理程序中使用
自定义头部栏的配置
如果你想创建一个不遵循默认配置的头部栏，在header容器里用div包裹你的自定义内容就好，Jquery Mobile不会自动生成按钮，所以你可以给你的头部栏自定义你的样式
-
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索应用
， 标签
， 链接
， 属性
， mobile
模式
jquery mobile详解、sui mobile 工具栏、ai工具栏详解、flash cs6工具栏详解、tcp头部选项功能详解，以便于您获取更多的相关知识。