首先依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. linux timezone

    首先需要了解下“UTC时间”与“本地时间”UTC时间:世界协调时间(又称世界标准时间.世界统一时间),在一般精度要求下,它与GMT(Greenwich Mean Time,格林威治标准时间)是一样的, ...

  2. 如何去设计一个自适应的网页设计或HTMl5

    如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...

  3. Sql practice

    employee表 数据准备 use tempdb go if OBJECT_ID('employee') is not null drop table employee ;with employee ...

  4. 【C#】SQL数据库助手类2.0（自用）

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  5. python如何控制数据库？

    http://www.w3cschool.cc/python/python-mysql.html 通过利用MySQLdb可以操作数据库 实例: 以下实例链接Mysql的TESTDB数据库: # enc ...

  6. 三维网格形变算法（Linear rotation-invariant coordinates和As-Rigid-As-Possible）

    在三维网格形变算法中,个人比较喜欢下面两个算法,算法的效果都比较不错, 不同的是文章[Lipman et al. 2005]算法对控制点平移不太敏感.下面分别介绍这两个算法: 文章[Lipman et ...

  7. Spring 4.1+　的 JSONP使用

    如今的巨石应用已经越来越不行了,很多互联网在后期都会在用分布式的架构 那么在页面上不同的服务调用不同域名下的json是有问题的 (跨域:不同域名,相同域名但是不同端口) JavaScript规范中提到 ...

  8. [转]微服务（Microservice）那点事

    WHAT – 什么是微服务 微服务简介 这次参加JavaOne2015最大的困难就是听Microservice相关的session,无论内容多么水,只要题目带microservice,必定报不上名,可 ...

  9. java 14-3 正则表达式的分割

    分割功能 String类的public String[] split(String regex) 根据给定正则表达式的匹配拆分此字符串. 例子: 可以用来做年龄段的筛选,比如说,我要筛选18-26之间 ...

  10. 谈谈Git的忽略规则.gitignore

    对于经常使用Git的朋友来说,.gitignore配置一定不会陌生. 今天就来说说这个.gitignore的使用. 首先要强调一点,这个文件的完整文件名就是“.gitignore”,注意最前面有个“. ...