![jQuery Mobile移动应用开发实战(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/789/26542789/b_26542789.jpg)
上QQ阅读APP看书,第一时间看更新
5.5 导航栏的全屏属性
现在再看一组代码:
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P93_56823.jpg?sign=1739309254-Gz678lxcrNfThC1RQmhb5krsIb8BgdL5-0-c7f9f703878f3c31d0991c5c806f95cd)
上面代码中的第6行,竟然设定了某种样式下的头部栏和尾部栏要保持一定的透明度。原来导航栏还有一个data-fullscreen的属性,下面是使用该属性的一个例子。
【范例5-7 导航栏使用data-fullscreen的一个例子】
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P93_56824.jpg?sign=1739309254-OjoHw1ZDcaAGoY24yim1QkyquReOjJUp-0-f53045031542e11dbb5fa62beb6ffb6a)
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P94_56825.jpg?sign=1739309254-S7hsOvjCWVD8xTeCkp2HUD2mE5SZ1qN0-0-d30d59eea44f593ce1dde68138605567)
运行结果如图5-19所示。
仔细观察图5-19可以发现,头部栏和尾部栏确实有了一点透明的效果(尾部栏中尤其明显)。
为什么会有这个属性呢?当然是为了让用户能有一种全屏的感受。想一想,一些用户交互性较好的视频播放器,在全屏播放视频时是不是会以半透明的形式来显示进度条?不过笔者觉得透明度应该再加强一些会更好。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P94_7871.jpg?sign=1739309254-15J4l7JyPd0uBV4zt2hdbvtk9cy6Le9C-0-ceff9e786ad9bf439b9d7292162909ab)
图5-19 data-fullscreen属性的使用