- 构建跨平台APP：jQuery Mobile移动应用实战（第2版） （跨平台移动开发丛书）
- 李柯泉
- 378字
- 2024-10-30 00:11:29
5.5 导航栏的全屏属性
现在再看一组代码：
01 .ui-header-fixed, .ui-footer-fixed{left:0; right:0; width:100%; position:
fixed; z-index:1000}
02 .ui-header-fixed{top:-1px; padding-top:1px}
03 .ui-header-fixed.ui-fixed-hidden{top:0; padding-top:0}
04 .ui-footer-fixed{bottom:-1px; padding-bottom:1px}
05 .ui-footer-fixed.ui-fixed-hidden{bottom:0; padding-bottom:0}
06 .ui-header-fullscreen, .ui-footer-fullscreen{filter:Alpha(Opacity=90);
opacity:.9}
07 .ui-page-header-fixed{padding-top:2.6875em}
08 .ui-page-footer-fixed{padding-bottom:2.6875em}
上面代码中的第6行，竟然设定了某种样式下的头部栏和尾部栏要保持一定的透明度。原来导航栏还有一个data-fullscreen的属性，下面是使用该属性的一个例子。
【范例5-7 导航栏使用data-fullscreen的一个例子】
01 <! DOCTYPE html> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<! --声明编码方式-->
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <! --<script src="cordova.js"></script>--> <! --备用生成APP的JS文
件-->
07 <link rel="stylesheet" href="jquery.mobile.min.css" /> <! --
引入jQuery Mobile样式-->
08 <script src="jquery-2.1.4.min.js"></script> <! --引入jQuery脚本-->
09 <script src="jquery.mobile.min.js"></script> <! --引入jQuery Mobile脚
本-->
10 </head>
11 <body>
12 <div data-role="page">
13 <div data-role="header" data-fullscreen="true"><! --头部栏加入全屏属性
-->
14 <a href="#">返回</a>
15 <h1>头部栏</h1>
16 <a href="#">设置</a>
17 </div>
18 <h1>导航栏的使用 </h1>
19 <h1>导航栏的使用 </h1>
20 <h1>导航栏的使用 </h1>
21 <h1>导航栏的使用 </h1>
22 <h1>导航栏的使用 </h1>
23 <h1>导航栏的使用 </h1>
24 <h1>导航栏的使用 </h1>
25 <div data-role="footer" data-fullscreen="true"><! --尾部栏加入全屏属性
-->
26 <div data-role="navbar">
27 <ul>
28 <li><a id="weixin" href="#" data-icon="plus"> 微信
</a></li>
29 <li><a id="tongxun" href="#" data-icon="plus ">通讯录
</a></li>
30 <li><a id="friend" href="#" data-icon="plus ">找朋友
</a></li>
31 <li><a id="set" href="#" data-icon=" plus "> 设置
</a></li>
32 </ul>
33 </div>
34 </div>
35 </div>
36 </body>
37 </html>
运行结果如图5-19所示。
图5-19 data-fullscreen属性的使用
仔细观察图5-19可以发现，头部栏和尾部栏确实有了一点透明的效果（尾部栏中尤其明显）。
为什么会有这个属性呢？当然是为了让用户能有一种全屏的感受。想一想，一些用户交互性较好的视频播放器，在全屏播放视频时是不是会以半透明的形式来显示进度条？不过笔者觉得透明度应该再加强一些会更好。