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属性和元素属性的区分值得 ...
随机推荐
- solr4.2 solrconfig.xml配置文件简单介绍
对于solr4.x的每个core有两个很重要的配置文件:solrconfig.xml和schema.xml,下面我们来了解solrconfig.xml配置文件. 具体很详细的内容请细读solrcofi ...
- window.history
作者:zccst 旧版: forword() backword() go(number) HTML5中新增了 onhashchange 浏览器兼容性较好,用得较多 pushState / repla ...
- C语言指针5分钟教程
指针.引用和取值 什么是指针?什么是内存地址?什么叫做指针的取值?指针是一个存储计算机内存地址的变量.在这份教程里“引用”表示计算机内存地址.从指针指向的内 存读取数据称作指针的取值.指针可以指向某些 ...
- <转>如何测试大型ERP软件？
大型ERP软件是一个在企业范围内部应用的.高度集成的软件,且操作频繁,数据在各业务系统之间高度共享.那么针对大型ERP软件的特点,我们应该怎么测试呢?要使用怎样的测试方法?需要什么样的测试人员?... ...
- WinForm使用webbrowser爬取数据，中文乱码问题
使用winform中的webbrowser抓取某个网站的数据时,遇到中文乱码的问题: 当时使用的获取网页内容的代码为: webBrowser1.DocumentText.ToString(); 不管我 ...
- 基于51，人体红外感应和RC522的门禁系统
总结一下最近学的东西,这两天学的东西,rfid门卡系统终于弄出来来了,这个程序算现在写过的比较满意的程序,大家可以参考参考 主函数: #include<reg52.h> #include& ...
- CentsOS7 网络自动启动
虚拟机中安装完成CentOS7后,网络总是需要手工启动才可使用,设置为自动连接的方式如下: cd /etc/sysconfig/network-scripts/ls #找到类似的文件:ifcfg-et ...
- 分析特定类的python脚本
今天接触了下pyUSB,事先没看对象内部成员资料,直接用python的dir函数看了看pyUSB的内部构成.突然间想到自己可不可以写个简单的脚本,利用dir或其他函数遍历某个对象内部的所有成员,并打印 ...
- CSS 高级：尺寸、分类、伪类、伪元素
CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程：简介及目录》（附上完整工程文件）
介绍:讲述如何使用Genesis-3D来制作一个横版格斗游戏,涉及如何制作连招系统,如何使用包围盒实现碰撞检测,软键盘的制作,场景切换,技能读表,简单怪物AI等等,并为您提供这个框架的全套资源,源码以 ...