9.14 技巧：隐藏和显示footer
当回去使用在用户滚动页面时会显示和隐藏的普通footer时，也可以通过JavaScript代码来触发footer是隐藏还是显示。代码清单9-16演示了这是如何工作的。
代码清单9-16 添加一个触发隐藏和显示footer的按钮
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Fixed Footer</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 <script>
15 $(document).ready(function() {
16 $.mobile.fixedToolbars
17 .setTouchToggleEnabled(false);
18 $.mobile.fixedToolbars
19 .show(true);
20 $.mobile.touchOverflowEnabled = true;
21 $('#show').on('click', function() {
22 $.mobile.fixedToolbars.show();
23 });
24 $('#hide').on('click', function() {
25 $.mobile.fixedToolbars.hide();
26 });
27 });
28 </script>
29 </head>
30 <body>
31
32 <div data-role="page">
33
34 <div data-role="header" data-position="fixed">
35 <h1>Fixed Footer</h1>
36 </div>
37
38 <div data-role="content" >
39 <p>Go to the <a href="#second">second page</a></p>
40 <a href="#" id="show" data-role="button">Show Footer</a>
41 <a href="#" id="hide" data-role="button">Hide Footer</a>
42
43 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
44 Cras metus tellus, iaculis vestibulum ornare sit amet,
45 semper ac nisi. Suspendisse convallis, libero ut sodales
46 interdum, turpis ligula lacinia justo, a accumsan tellus est
47 at lacus. Morbi ultricies posuere enim, sit amet luctus
48 massa faucibus ut. Maecenas vel mi quis massa volutpat
49 consequat ac non mi. Nam et ornare sapien. Donec vitae magna
50 sed neque lacinia imperdiet. Vivamus tellus velit, molestie
51 in interdum vel, gravida vel mauris. Vivamus justo augue,
52 ultrices ut viverra ut, sollicitudin id lacus. Integer
53 ornare massa ut risus tempus lobortis. Donec ac nisi eu nunc
54 volutpat posuere dapibus ut nisi. Nam sit amet mauris a ante
55 vehicula mattis. Phasellus rutrum rutrum enim, at convallis
56 neque convallis eu. Duis dictum justo venenatis mauris
57 feugiat quis aliquam enim egestas. Integer et ante metus, ut
58 faucibus libero. </p>
59
60 <p> Sed lobortis nunc nec ligula dictum dignissim
61 pellentesque lorem semper. Vivamus dui felis, pulvinar non
62 accumsan ac, facilisis a lectus. In blandit aliquet sapien
63 sed eleifend. Mauris ut arcu nisl. Morbi eget sapien
64 vulputate lectus dapibus congue. Cras id odio nulla, quis
65 viverra massa. Mauris tortor nisl, tincidunt et vestibulum
66 nec, blandit ut purus. In vel massa a erat tristique
67 lacinia. Vestibulum malesuada tristique nunc, in dictum quam
68 faucibus a. Etiam sed enim ante, et aliquam quam. Donec
69 velit velit, cursus at sodales id, accumsan at sapien. </p>
70
71 </div>
72 <div data-role="footer" data-position="fixed">
73 <p>Second page</p>
74 </div>
75
76 </div>
77
78
79 </body>
80 </html>
第16～26行包含了显示和隐藏header和footer的代码。当footer“不可见”时，在页面的下方它仍是可见的1，它只是不在屏幕的下方了。header也一样。
时间： 2024-10-21 23:09:06