- jQuery Mobile移动应用开发实战(第3版)
- 李柯泉
- 253字
- 2021-03-31 14:25:03
5.5 导航栏的全屏属性
现在再看一组代码:
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P93_56823.jpg?sign=1738828628-B64mTzLIqdTc4tXFBOkjNxoWSC0vy0Ta-0-4ed77ec1526ff902f2c5338219b2a8c9)
上面代码中的第6行,竟然设定了某种样式下的头部栏和尾部栏要保持一定的透明度。原来导航栏还有一个data-fullscreen的属性,下面是使用该属性的一个例子。
【范例5-7 导航栏使用data-fullscreen的一个例子】
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P93_56824.jpg?sign=1738828628-xcQVt24jbl0wWlQoZF8lq45wylYx8Efv-0-cafdd138219b29333755ff1f9b9b17cc)
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P94_56825.jpg?sign=1738828628-iKj99AJxq4Rd9Bm39rFf5FEygEZM5w6R-0-427f92863d30f13ee7e73e53bb01ce67)
运行结果如图5-19所示。
仔细观察图5-19可以发现,头部栏和尾部栏确实有了一点透明的效果(尾部栏中尤其明显)。
为什么会有这个属性呢?当然是为了让用户能有一种全屏的感受。想一想,一些用户交互性较好的视频播放器,在全屏播放视频时是不是会以半透明的形式来显示进度条?不过笔者觉得透明度应该再加强一些会更好。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P94_7871.jpg?sign=1738828628-XizdpxfLksnw1E5efEOeDZwrrff5tyWc-0-858ad61d06cb0c9f5aa22a74b6263b75)
图5-19 data-fullscreen属性的使用