jquerymobile-6 自适应header、footer和全屏视图

最新推荐文章于 2022-08-06 16:58:57 发布

guo-snowstorm

最新推荐文章于 2022-08-06 16:58:57 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： jQuerymobile header footer

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原文链接：http://blog.csdn.net/mengxiangyue/article/details/8502422

在开发的过程中我们开发的页面可能会非常的长，我们在页面的两端放置了header和footer。这样的页面当我们滚动的时候，header和footer会随着滚动而滚到屏幕外，这时候我们如果想操做header和footer必须再滚动回去。jquerymobile为我们考虑了这种情况，在这种情况下我们可以点击屏幕，然后消失的header和footer就会出现，再次点击的时候就又会消失。如果我们正在文章的开头，无论我们怎么点击这个header都不会消失，footer在底部一样。下面我看一段代码：

[html]view plain copy 
   
 <!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。这样是达到了我们的效果，但是同样还有一个问题，有时候我们可能在开始和结尾的时候也能全屏查看。这时候我们只需要对上面的代码进行一下改造，修改代码如下即可：

[html]view plain copy 
   
 <div data-role="page"  data-fullscreen="true">  

在page上添加data-fullscreen，并且设置为true就可以了。这样当我们点击的时候会全屏，再点击的时候就会header、footer都出现了。同样这个全屏可以使用在一些图片的预览上。

guo-snowstorm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquerymobile-6 自适应header、footer和全屏视图

原文链接：http://blog.csdn.net/mengxiangyue/article/details/8502422在开发的过程中我们开发的页面可能会非常的长，我们在页面的两端放置了header和footer。这样的页面当我们滚动的时候，header和footer会随着滚动而滚到屏幕外，这时候我们如果想操做header和footer必须再滚动回去。jquerymobile为我们
复制链接

扫一扫

专栏目录