《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.14　技巧：隐藏和显示footer

最新推荐文章于 2025-09-05 18:39:19 发布

weixin_34347651

最新推荐文章于 2025-09-05 18:39:19 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：https://yq.aliyun.com/articles/97213

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.14节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

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也一样。