jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

简介: 程序员都很赖,你懂的!<br> 最近在做html5页面的开发,主要做智能终端设备的开发。对于内容比较少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这样的要求,其实一点也不过分。但对于新手来说,确实很难,很不容易,今天我就将我学习的内容一起分享一下!<br><span style="font-size:14px"><strong>放置页眉和页脚的方式有三种:</stro
程序员都很赖,你懂的!
最近在做html5页面的开发,主要做智能终端设备的开发。对于内容比较少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这样的要求,其实一点也不过分。但对于新手来说,确实很难,很不容易,今天我就将我学习的内容一起分享一下!
放置页眉和页脚的方式有三种:
    Inline - 默认。页眉和页脚与页面内容位于行内。
    Fixed - 页面和页脚会留在页面顶部和底部。
    Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部
请使用 data-position 属性来定位页眉和页脚:
 看代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Fixed 页眉</h1>
  </div>

  <div data-role="content">
    <p><b>提示:</b>如果要看到效果,则需要调整窗口大小使滚动条可用。</p>

    <p><b>提示:</b>如果滚动条可用,那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p>
  
    <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling. to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h1>Fixed 页脚</h1>
  </div>
</div>

</body>
</html>
ok,我们上截图:

  点击下载资料:http://download.csdn.net/download/xmt1139057136/7422831
如果你还有不懂,请加qq群: 135430763共同学习!
目录
相关文章
|
4月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
4月前
|
JavaScript
jQuery学习(九)—常用的包裹方法
jQuery学习(九)—常用的包裹方法
|
4月前
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
4月前
|
JavaScript
jQuery学习(六)—jQuery对象的创建
jQuery学习(六)—jQuery对象的创建
|
4月前
|
JavaScript
jQuery学习(五)—课堂实训题专栏
jQuery学习(五)—课堂实训题专栏
|
4月前
|
JavaScript
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
|
3月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
26 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
16 0
|
3月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
37 0
|
4月前
|
JavaScript
【jQuery学习】—实现弹幕效果
【jQuery学习】—实现弹幕效果