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

简介: 当回去使用在用户滚动页面时会显示和隐藏的普通footer时,也可以通过JavaScript代码来触发footer是隐藏还是显示。代码清单9-16演示了这是如何工作的。

本节书摘来自异步社区《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也一样。

相关文章
|
6月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
61 1
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1335 0
|
5月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
41 4
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
|
JavaScript
jquery多图片上传预览demo效果示例(整理)
jquery多图片上传预览demo效果示例(整理)
|
JavaScript
jquery上传头像demo效果示例(整理)
jquery上传头像demo效果示例(整理)
|
JavaScript
通俗易懂的jquery倒计时demo效果示例(整理)
通俗易懂的jquery倒计时demo效果示例(整理)
|
JavaScript
jquery模糊查询--搜索demo效果示例(整理)
jquery模糊查询--搜索demo效果示例(整理)