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属性和元素属性的区分值得 ...
随机推荐
- 云计算服务模型，第 2 部分: 平台即服务(PaaS)
英文原文:Cloud computing service models, Part 2: Platform as a Service 平台即服务 (PaaS) 常常是最容易让人迷惑的云计算类别,因为很 ...
- .NET Remoting
.NET Remoting .NET Remoting是微软早期的分布式通信技术,虽然微软后来通过WCF通用基础通信框架整合掉了,但是通过回顾学习Remoting,反过来学习理解WCF也是很有帮助 ...
- CXF之七 传输文件
CXF的文件传输通过MTOM实现.MTOM(SOAP Message Transmission Optimization Mechanism)SOAP消息传输优化机制,可以在SOAP消息中发送二进制数 ...
- ASP.NET Session丢失的解决方案
正常操作情况下会有ASP.NET Session丢失的情况出现.因为程序是在不停的被操作,排除Session超时的可能.另外,Session超时时间被设定成60分钟,不会这么快就超时的.现在我就把原因 ...
- 【windows核心编程】一个API拦截的例子
API拦截 修改PE文件导入段中的导入函数地址 为 新的函数地址 这涉及PE文件格式中的导入表和IAT,PE文件中每个隐式链接的DLL对应一个IMAGE_IMPORT_DESCRIPTOR描述符结构, ...
- Linux性能监控之Memory篇
首先说说虚拟内存和物理内存: 虚拟内存就是采用硬盘来对物理内存进行扩展,将暂时不用的内存页写到硬盘上而腾出更多的物理内存让有需要的进程来用.当这些内存页需要用的时候在从硬盘读回内存.这一切对于用户来说 ...
- 【成都GamEver游戏公司诚邀服务器伙伴】【7~15k一年4次项目奖金】
关于我们 我们厌倦了朝九晚五,一眼看到头的人生我们厌倦了耗费自己青春做的都是没有感情的项目平均从业经验5年以上行业顶尖美术和金牌制作人,资深欧美制作经验立志做中国的suppercell,公司小而美 我 ...
- 【Hadoop学习】HDFS中的集中化缓存管理
Hadoop版本:2.6.0 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4146398.html 概述 ...
- HDU-4737 A Bit Fun 维护
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4737 题意:给一个数列a0, a1 ... , an-1,令 f(i, j) = ai|ai+1|ai ...
- Java并发控制机制详解
在一般性开发中,笔者经常看到很多同学在对待java并发开发模型中只会使用一些基础的方法.比如Volatile,synchronized.像Lock和atomic这类高级并发包很多人并不经常使用.我想大 ...