jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖。你懂的！
近期在做html5页面的开发，主要做智能终端设备的开发。对于内容比較少的页面，领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这种要求，事实上一点也只是分。但对于新手来说，确实非常难，非常不easy。今天我就将我学习的内容一起分享一下。
放置页眉和页脚的方式有三种：
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共同学习。
jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习的更多相关文章
- 学习jquery mobile
学习jquery mobile的时间不是很长,在学习的过程当中也遇到了很多令人抓狂的问题,在网上搜索问题答案的时候发现,现在关于jquery mobile的文章还不是很多,所以,我也是一边学习,一边摸 ...
- jQuery支持mobile的全屏水平横向翻页效果
这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...
- （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- jQuery UI vs Kendo UI & jQuery Mobile vs Kendo UI Mobile
jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...
- 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框
一.为什么要学Jquery Mobile JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- 学习jQuery的免费资源：电子书、视频、教程和博客
jQuery毫无疑问是目前最流行的JavasScript库.排名最前的网站中70%使用了jQuery,并且jQuery也成为了Web开发的标准.如果你想找Web开发方面的工作,了解jQuery会大大的 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
随机推荐
- Free Pascal的IDE界面乱码解决方法
右击[Free Pascal]快捷图标,选[属性] [属性]窗口中,选择[选项]页,下拉[当前代码页(C)],选择[437 (美国)] 按[确定] 注意:[开始]菜单和桌面中的快捷图标都得设置.
- <转>如何测试一个杯子
在软件测试的面试中, 经常会碰到类似的问题. 比如:如何测试一个杯子, 或者如何测试一只笔. 要求你设计20个以上的test case. 这类的面试题目,是考察面试者是否熟悉各种软件测试方法, 设计t ...
- 约瑟夫环是一个数学的应用问题：已知n个人（以编号1，2，3...n分别表示）围坐在一张圆桌周围。从编号为k的人开始报数，数到m的那个人出列；他的下一个人又从1开始报数，数到m的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。
以数组的方法: public static void main(String[] args) { final int n = 10; final int k = 1; ...
- ASP.NET MVC中的Json Binding和Validate
引子:电子商务网站支付功能页面往往会有很多信息,对于这些信息的保存,往往是分步完成的,那么使用Ajax最合适不过了,比如其中的收货人信息模块.这些信息的新建和编辑保存都是用Ajax来完成的.那么有几种 ...
- Python 变量 对象 引用
1.变量 变量第一次赋值时被创建,变量在使用前必须赋值 变量本身没有类型,变量类型为它引用的对象类型: 变量在使用时被替换成它引用的对象 2.对象 对象本身具有计数和类型,变量引用对象,当对象的引用变 ...
- 多校5 1004 HDU5784 统计锐角三角形数目
http://acm.hdu.edu.cn/showproblem.php?pid=5784 题意:n个点,找多少个锐角三角形数目 思路:极角排序+two pointers 当前选择的点集要倍增一倍, ...
- Java中的return
比如你写了一个叫getInt的类public int getInt(){ //这个类的意思就是一个具有返回值类型为int的类了 //通常如果不需要返回值的话 这里就写void....//你的具体代码r ...
- UIButton 在 iOS7.0与iOS7.1 中关于enabled的一点区别
前些日子,在一台iOS7.0的设备上进行调试,关于UIButton的一部分代码如下 1 self.btn_loadmore.enabled = NO; 2 [self.btn_loadmore set ...
- Emacs和它的朋友们——阅读源代码篇(转)
正如那本<Code Reading>一书中指出的那样,源代码阅读一直没有被很好的重 视:你上大学的时候有“代码阅读”这门课吗?相信没有. 1 Source Insight 谈到阅读源代码, ...
- Cocos2dx游戏源码合集（BY懒骨头+持续更新+2014.02.21）
转自:http://blog.csdn.net/iamlazybone/article/details/19612941 声明: <萝莉快跑><喵汪大战>两个demo的原作者b ...