本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.14节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
当回去使用在用户滚动页面时会显示和隐藏的普通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也一样。
相关资源：Android 开发技巧