《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.12 技巧:跨页面时固定footer

简介: 点击链接时,在页面发生变化期间会触发动画。有些情形下你并不想让footer成为动画的一部分。代码清单9-14演示了当链接至别的页面时如何将footer保持在同一个地方。

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

9.12 技巧:跨页面时固定footer

点击链接时,在页面发生变化期间会触发动画。有些情形下你并不想让footer成为动画的一部分。代码清单9-14演示了当链接至别的页面时如何将footer保持在同一个地方。

代码清单9-14 当页面发生变化时固定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 
15 </head> 
16 <body> 
17 <div data-role="page">
18 
19   <div data-role="header">
20    <h1>First</h1>
21   </div>
22 
23   <div data-role="content"> 
24    <p>Go to the <a href="#second">second page</a></p>  
25   </div>
26 
27   <div data-role="footer" data-id="myfooter" data-position="fixed">
28    <p>First page</p>
29   </div>
30   
31 </div>
32 <div data-role="page" data-add-back-btn="true" id="second">
33 
34  <div data-role="header">
35   <h1>Second</h1>
36  </div>
37 
38  <div data-role="content"> 
39    <p>Content</p>
40    <p>More text</p>
41    
42  </div>
43  <div data-role="footer" data-id="myfooter" data-position="fixed">
44    <p>Second page</p>
45  </div>
46  
47 </div>
48 
49 </body>
50 </html>

第27行和第43行都包含了data-position="fixed"属性。点击链接时,你看到了header和content区域的动画,但footer保持固定。但是你的确看到footer的内容发生了变化。

相关文章
|
9月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
76 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
9月前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
9月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
72 1
|
9月前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
303 0
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
33 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
2月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
45 0
|
8月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
57 4
|
3月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
45 0
|
6月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
48 2

热门文章

最新文章