第4章-工具栏和导航栏.pptx

第四章工具栏和导航栏HTML5移动Web开发

jQueryMobile工具栏jQueryMobile导航栏

jQueryMobile工具栏

工具栏无论是网站还是应用，在屏幕的上下两端总有一些固定的栏目，称为顶部栏和尾部栏。对于应用界面的完整性有非常重要的作用。工具栏元素通常位于头部和尾部内–使导航易于访问。

jQueryMobile头部栏

头部栏一般包含页面标题/logo或按钮（通常是首页、选项或搜索）。可以添加按钮到头部标题的左侧或右侧。divdata-role=header

ahref=#data-role=button首页/a

h1欢迎来到我的主页/h1

ahref=#data-role=button搜索/a

/div头部可以包含一个或两个按钮，而尾部没有限制。

jQueryMobile头部栏

可以添加按钮到头部标题的左侧。divdata-role=header

ahref=#data-role=button首页/a

h1欢迎来到我的主页/h1

/div设置按钮的class属性，指定class=ui-btn-right如果想添加按钮到头部标题的右侧

jQueryMobile尾部栏

尾部栏比头部栏更灵活-在整个页面中更具功能性和可变性，因此可以包含尽可能多的按钮。尾部栏的样式默认没有内边距和空间，且按钮不居中。可以使用简单的样式来解决这个问题divdata-role=footerstyle=text-align:center;可以将尾部中的按钮进行水平或垂直组合divdata-role=controlgroupdata-type=horizontal

jQueryMobile尾部栏

divdata-role=footer

ahref=#data-role=button在Facebook上 关注我/a

ahref=#data-role=button在Twitter上关注 我/a

ahref=#data-role=button在Instagram上 关注我/a

/div

jQueryMobile尾部栏

实例4-1参照效果图完成页面制作：demo4_1.html

头部栏和尾部栏的定位

头部和尾部可以通过三种方式进行定位：Inline-默认。头部栏和尾部栏与页面内容内联。Fixed-头部栏和尾部栏固定在页面的顶部和底部。Fullscreen-与Fixed定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。工具栏可以滚动出屏幕之外，之后不会自动重新显示，除非点击屏幕。

头部栏和尾部栏的定位

使用data-position属性来定位头部栏和尾部栏Inline定位（默认）：

divdata-role=header?data-position=inline/div

divdata-role=footer?data-position=inline/divdata-position值为inline定位时如果内容很多，在滑动滚动条时头部和尾部会随着滚动条的滚动而移动。

头部栏和尾部栏的定位

使用data-position属性来定位头部栏和尾部栏Fixed定位：

divdata-role=header?data-position=fixed/div

divdata-role=footer?data-position=fixed/divdata-position值为fixed定位时，如果要看到效果，则需要调整窗口大小使滚动条可用

头部栏和尾部栏的定位

使用data-position属性来定位头部栏和尾部栏要启用全屏定位，使用data-position=“fixed”，并添加data-fullscreen=“true”到元素。

提示：全屏定位适用于照片、图像和视频。提示：固定定位和全屏定位中，通过点击屏幕将隐藏和显示头部栏和尾部栏。

头部栏和尾部栏的定位

Fullscreen定位：divdata-role=headerdata-position=fixed?data-fullscreen=true/div

divdata-role=footerdata-position=fixed?data-fullscreen=true/div头部和尾部栏固定在页面的顶部和底部。当工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕。适用于图片或视频类有提升代入感的应用。

jQueryMobile工具栏jQueryMobile导航栏

jQueryMobile导航栏

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮（不