首先依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. dba诊断之lock

    --产生锁的详细信息 select a.session_id, c.SERIAL#,d.spid, os_user_name, b.object_name,locked_mode,    c.sql_ ...

  2. mysql忘记密码的重置方法

    1. 编辑mysql主配置文件 my.cnfvim /etc/my.cnf在[mysqld]字段下的位置添加参数skip-grant保存退出2. 重启数据库服务service mysqld resta ...

  3. 译文：Nesting Your BEM?

    原文链接:http://csswizardry.com/2016/11/nesting-your-bem/ 在我开始这篇文章之前,我得说这不是一个建议或者是新的"练习指南".这只是 ...

  4. 瓶颈生成树与最小生成树 POJ 2395 Out of Hay

    百度百科:瓶颈生成树 瓶颈生成树 :无向图G的一颗瓶颈生成树是这样的一颗生成树,它最大的边权值在G的所有生成树中是最小的.瓶颈生成树的值为T中最大权值边的权. 无向图的最小生成树一定是瓶颈生成树,但瓶 ...

  5. 单调队列应用--BZOJ 3831 Little Bird

    3831: [Poi2014]Little Bird Time Limit: 20 Sec  Memory Limit: 128 MB Description In the Byteotian Lin ...

  6. DoTween NGUI bug

    多次动画导致UISprite丢失 DOTween动画进行时与UISprite有冲突,DOTween多次重复同一个动画时,UISprite会莫名的丢失 UISprite动画代码 CUIManager.I ...

  7. 为Unity项目生成文档(一)

    VS生成chm帮助文档 VS代码中使用Xml注释,并通过Sandcastle生成chm文档的文章,这几篇值得分享: 使用.NET中的XML注释(一) -- XML注释标签讲解 使用.NET中的XML注 ...

  8. ＵＭＬUnified Modeling Language (UML)又称统一建模语言或标准建模语言

    1.用例图(use case diagram) 2.活动图(activity diagram) 3.静态结构图 4.顺序图(Sequence Diagram):时序图 5.交互纵览图(Interact ...

  9. ClickJacking（点击劫持）

    问题: 点击劫持(ClickJacking)是一种视觉上的欺骗手段.大概有两种方式,一是攻击者使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在该页面上进行操作,此时用户将在不知情的情况下点 ...

  10. iOS请求服务器数据去空NSNull

    我们在处理数据库接口的过程中,如果数据中出现null,我们是没法处理的.我在使用NSUserDaults保存后,出现崩溃. null产生原因 null是后台在处理数据的时候,如果没有设置value值, ...