![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=1739235724-z83Pgxe5TkiGsiYQMCPVsiLlUNa1Mj9V-0-1ef3101420415e6ab070f324e45ecc7b)
上面代码中的第6行,竟然设定了某种样式下的头部栏和尾部栏要保持一定的透明度。原来导航栏还有一个data-fullscreen的属性,下面是使用该属性的一个例子。
【范例5-7 导航栏使用data-fullscreen的一个例子】
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P93_56824.jpg?sign=1739235724-HqgWdyteOcWFdvjNN7xNmWtNOLiLTum5-0-d27e13695cded74db27b9dfd42da6da5)
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P94_56825.jpg?sign=1739235724-gZNEcloHihY1IryNIeBO7P70voadJ0v7-0-06bf88fb3334795c85089af7ad635486)
运行结果如图5-19所示。
仔细观察图5-19可以发现,头部栏和尾部栏确实有了一点透明的效果(尾部栏中尤其明显)。
为什么会有这个属性呢?当然是为了让用户能有一种全屏的感受。想一想,一些用户交互性较好的视频播放器,在全屏播放视频时是不是会以半透明的形式来显示进度条?不过笔者觉得透明度应该再加强一些会更好。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P94_7871.jpg?sign=1739235724-ujVcgmugHS6363TRfcx0ZOYYNnBZeJTC-0-4d91dbcc60e7a39c5d75326c8e7d4f27)
图5-19 data-fullscreen属性的使用