自适应header、footer和全屏视图
来源:互联网 发布:软件外包管理流程 编辑:程序博客网 时间:2024/05/18 07:36
转自:http://blog.csdn.net/mengxiangyue/article/details/8502422
在开发的过程中我们开发的页面可能会非常的长,我们在页面的两端放置了header和footer。这样的页面当我们滚动的时候,header和footer会随着滚动而滚到屏幕外,这时候我们如果想操做header和footer必须再滚动回去。jquerymobile为我们考虑了这种情况,在这种情况下我们可以点击屏幕,然后消失的header和footer就会出现,再次点击的时候就又会消失。如果我们正在文章的开头,无论我们怎么点击这个header都不会消失,footer在底部一样。下面我看一段代码:
<!DOCTYPE html><html><head><title>Fixed Positioning Example</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script></head><body><div data-role="page"><div data-role="header" data-position="fixed"><h1>My Header</h1></div><div data-role="content"><p>..........代表很长的内容,测试的时候请自己填满超过一个屏幕</div><div data-role="footer" data-position="fixed"><h4>My Footer</h4></div></div></body></html>
在上面的代码中主要是在header和footer中添加了data-position属性,并将其值设置为fixed。这样是达到了我们的效果,但是同样还有一个问题,有时候我们可能在开始和结尾的时候也能全屏查看。这时候我们只需要对上面的代码进行一下改造,修改代码如下即可:
<div data-role="page" data-fullscreen="true">
在page上添加data-fullscreen,并且设置为true就可以了。这样当我们点击的时候会全屏,再点击的时候就会header、footer都出现了。同样这个全屏可以使用在一些图片的预览上。
0 0
- 自适应header、footer和全屏视图
- jquerymobile-6 自适应header、footer和全屏视图
- jquerymobile-5 自适应header、footer和全屏视图
- jquerymobile-6 自适应header、footer和全屏视图
- webView视图添加header视图和footer视图
- 20header和footer
- iOS开发之UITableView自定义Header视图和自定义Footer视图
- FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
- 自定义普通文本TableView header footer 视图
- 自定义普通文本TableView header footer 视图
- ReccylerView添加header和footer
- RecyclerView添加Header和Footer
- RecycleView添加header和footer
- RecyclerView添加Header和Footer
- RecyclerView添加Header和Footer
- RecyclerView添加header和footer
- RecyclerView添加header和footer
- RecyclerView 添加 Header 和 Footer
- Linux:使用ulimit设置文件最大打开数
- iOS单例
- 解题报告 之 SOJ4426 Counting_3
- Elasticsearch之Nested(嵌套)系列
- 自学ios之路(1)
- 自适应header、footer和全屏视图
- 2015 前端[JS]工程师必知必会
- 《公司不是家》作者回应柳传志:我们有车有房了
- Android ActionBar完全解析,使用官方推荐的最佳导航栏(下)
- Mybatis/Ibatis,数据库操作的返回值
- Linux中的错误:too many open files
- Android开发帮助文档Doc打开速度慢解决_Python篇
- C#第一次作业
- ACdream之取集合中任意俩个数做差,求集合最大扩充