首先依HTML5方式加载，DOCTYPE表示格式为HTML5：主要适用于iPhone、Android等，viewport表示适用于移动终端的适中显示，initial-scale缩放比例在1.0~1.3之间比较合适，需要载入的文件有三个：jquery.js jquery.mobile.js jquery.mobile.css

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

</head> 

<body>

    ...content goes here...

</body>

</html>

　　在body中插入如下内容块，一个页面只能显示一个page，在结构化的页面中完整的页面结构分为 header、content、footer 这三个主要区域

<div data-role="page">

  <div data-role="header">...</div>

  <div data-role="content">...</div>

  <div data-role="footer">...</div>

</div>

　　对于多页面

<body> 

<!-- Start of first page -->

<div data-role="page" id="foo">

    <div data-role="header">

        <h1>Foo</h1>

    </div><!-- /header -->

    <div data-role="content">

        <p>I'm first in the source order so I'm shown as the page.</p>

        <p>View internal page called <a href="#bar">bar</a></p>

    </div><!-- /content -->

    <div data-role="footer">

        <h4>Page Footer</h4>

    </div><!-- /footer -->

</div><!-- /page -->

<!-- Start of second page -->

<div data-role="page" id="bar">

    <div data-role="header">

        <h1>Bar</h1>

    </div><!-- /header -->

    <div data-role="content">

        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>

        <p><a href="#foo">Back to foo</a></p>

    </div><!-- /content -->

    <div data-role="footer">

        <h4>Page Footer</h4>

    </div><!-- /footer -->

</div><!-- /page -->

</body>

jQuery Mobile学习日记（二）的更多相关文章

  1. jQuery Mobile学习日记之HelloWorld

    这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...

  2. jQuery Mobile学习日记

    本次主讲人是王思伦啦啦啦~ 框架特性 jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框 ...

  3. jQuery Mobile 学习

    jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021

  4. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  5. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

  6. jquery mobile 学习总结

    <!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  7. Android+Jquery Mobile学习系列(4)-页面跳转及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  8. Jquery mobile 学习笔记

    最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...

  9. Android+Jquery Mobile学习系列(9)-总结和代码分享

    经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...

随机推荐

  1. Excel中利用IF和TIME函数计算出上下班状态！

    大家都知道现在上下班实行打卡制,制作考勤的人员需要对你上下班的时间,计算出上下班的状态,比如:迟到.早退.加班.正常等.下面为您介绍一个“帮手”.     1.打开Excel文档.如下图       ...

  2. SSH 无密码访问其它机器 和 Windows 上 putty 无密码访问 Linux 机器

    1. 从一台 Linux 机器(ubuntu1)上无密码访问其它机器(ubuntu2) (1)登录 ubuntu1 并切换到用户比如 s1 (2)运行 ssh-keygen -t rsa (3)运行c ...

  3. gnuplot 学习笔记

    1 如何运行 gnuplot是一个命令行输入的工具,把命令行写入一个文本file1 file2.使用下列方式运行. gnuplot {option} file1 file2 2 产生一个图标,不管数据 ...

  4. NOIP2010普及组T4 三国游戏——S.B.S.

    题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有 N 位武将(N为偶数且不小于 4),任意两个武将之 ...

  5. POJ 1182 食物链 （三态种类并查集）

    这题首先不说怎么做,首先要提醒的是..:一定不要做成多组输入,,我WA了一个晚上加上午,,反正我是尝到苦头了,,请诸君千万莫走这条弯路..切记 这题是上一题(Find them and Catch t ...

  6. JavaWeb学习----JSP内置对象详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  7. HTML---总结

    (1) margin负值能让没有宽度的盒子变大. 对于有宽度的盒子,没有浮动,只有margin-top 和margin-left 有效:如果浮动,margin-浮动方向 有效,-top有效,margi ...

  8. 微软职位内部推荐-Software Development Engineering II

    微软近期Open的职位: Job Title: Software Development Engineering II Work Location: Suzhou, China Enterprise ...

  9. heartbeat初探

    1,概念及原理 http://www.mingxiao.info/tag/heartbeat/

  10. cisco交换技术list