企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 头部栏 ## 头部栏结构 Header structure 头部栏是处于页面顶部的工具栏,通常包含页面标题文字,文字左边和/或右边可以放置几个可选的按钮用作导航操作 标题文字一般用h1标签,但是从h1-h6都是可以的,这样可以使结构有弹性。比如说,一个页面内包含了多个"page"标记的页面,这样可以给主"page"的标题文字用h1标签,次级"page"的标题文字用h2标签。所有的头部默认下在样式上都是相同的,保持的外观的一致性 ``` <div data-role="header">   <h1>Page Title</h1> </div> ``` ## 默认的头部的特性 Default header features 头部栏的主题样式默认情况下为"a"(黑色),但是你可以很轻松的设置主题样式 **默认的头部栏** ![](images/Header%20bars_1.png) **看见back按钮了吗**Jquery Mobile会自动给每个页面的头部栏生成一"back"按钮,来简化把按钮放进头部栏的过程。如果你不想?quot;back"按钮放进头部栏,你可以自己加一个需要的按钮或者给头部栏添加”data-backbtn="false"属性 ## 添加按钮 Adding buttons 在标准的头部栏的设置下,标题文字两边各有一个可放置按钮的位置。每一个按钮通常都是都是a,但是任何有效的按钮标记的元素都可以。为了节省空间,工具栏里的按钮都是内联按钮,所以按钮的宽度只容纳icon和里面的文字 ## 创建自定义的后退按钮 Creating custom back buttons 给a标签增加data-rel="back"的属性,任何链接都可以样式化为后退按钮,行为上为后退到上一个历史记录的页面,无视该链接的herf地址。这对于要链接回到一个命名好的页面的情况是很有用的**但是注意请给链接设定一个有意义的herf地址,指向实际要连接的页面,使得C级浏览器也能够使用这个按钮**而且要注意如果你只是需要一个后退的页面转场效果,而不是真正的后退到上一个历史记录的页面,应该用data-direction="reverse" 的属性,而不是用data-rel="back"属性的按钮 ## 按钮默认的定位 Default button positioning 头部的按钮是头部栏容器的直接子节点,第一个链接定位于头部栏左边,第二个链接放在右边,在这个例子中,根据两个链接在源代码中的位置,取消在左边,保存在右边 ``` <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> ``` **按钮默认的定位** ![](images/Header%20bars_2.png) 按钮会自动应用他们的父容器的主题样式,所以应用了"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> ``` ![](images/Header%20bars_3.png) ## 通过class控制按钮的定位 Controlling button position with classes 按钮的位置可以通过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> ``` ![](images/Header%20bars_4.png) ## 自定义头退按钮的文字 Customizing the back button text 如果你想设置后退按钮的文字,需要给页面?page"元素增加data-back-btn-text="文字"的属性,或者通过程序来实现?$.mobile.page.prototype.options.backBtnText = "文字"; 如果你想配置后退按钮的主题样式,使用 $.mobile.page.prototype.options.backBtnTheme = "a" 如果你要用这段程序,需要在mobileinit时间的处理程序中使用 ## 自定义头部栏的配置 Custom header configurations 如果你想创建一个不遵循默认配置的头部栏,在header容器里用div包裹你的自定义内容就好,Jquery Mobile不会自动生成按钮,所以你可以给你的头部栏自定义你的样式