jQuery Mobile页面解构

jQuery Mobile 的“页面”结构不同于传统的html页面，这样做是为了优化single page application的用户体验。

利用jQuery Mobile可以使web应用达到和本地应用同样的用户体验，这是传统web应用无法实现的。

同时如果由于跨域名或者其他原因禁用了Ajax的话，jquery mobile也能平滑的降级为传统的web应用，it just works。

jQuery mobile页面结构

jQuery mobile站点的页面必须以HTML5的doctype开头，即 “<!DOCTYPE html>”（不支持HTML5的浏览器会忽略这个标签）。

然后引入jQuery，jQuery mobile的javascript代码文件以及jquery mobile的css文件。

jQuery工作组建议使用jquery的CDN来获得最佳性能（我访问jquery的网站速度有点慢，不知道这个CDN速度有多快，不过如果网站面向全世界用户，使用CDN应该稍稍提升性能）。

所以，jquery mobile的页面应该都是这样开始的：

<!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.0.1/jquery.mobile-1.0.1.min.css" />     
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>     
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
</script> 
</head>   
<body>  ...content goes here... </body> 
</html> 

Viewport meta 标签

上面的代码里有一个viewport 标签，这个标签是用来指定浏览器对页面显示宽度和缩放等级。如果不设置这个标签，在很多移动设备浏览器中，页面可能会变得很宽，页面元素也会变得很小。给页面加上下面这个标签，页面宽度就会显示为屏幕宽度。

<meta name="viewport" content="width=device-width, initial-scale=1"> 
加上这个标签后，移动设备的用户能获得最佳的用户体验，同时也不会影响移动设备的缩放功能。

深入body

jQuery mobile展现页面的方式与传统HTML不同，她使用了一些列属性来表示当前的元素代表什么或者如何处理当前的元素，例如jquery mobile的page可以用线面的HTML代码表示：

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

data-role="page"就表达了当前这个div就是一个页面的语义（与knockout js有近亲关系？）

更多data-attribute请参考这里：http://jquerymobile.com/demos/1.0.1/docs/api/data-attributes.html

在一个“page”里面，还可以添加“header”，“content”，“footer”等等，页面代码可能是下面这个样子：

<div data-role="page">      
<div data-role="header">...</div>      
<div data-role="content">...</div>      
<div data-role="footer">...</div> </div>  

这样标记页面的好处是更加方便的使用Ajax来load页面，语义上来说，可以通过Ajax把一个完整的jquery mobile “page”在client和server端互传，这样client端和server的程序逻辑能更方便地处理这种语义上的完整页面，同时这个”page“在浏览器看来只是一个HTML片段，所以不会引发整个页面的刷新，从而给用户以更好的rich client app体验。

单页面结构

一个完整的单页面（single page）代码：

<!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.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body>

<div data-role="page">

<div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

<div data-role="content">    
        <p>Page content goes here.</p>        
    </div><!-- /content -->

<div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

多页面结构

多页面（multi-page）代码：

一个HTML页面可以包含多个jquery mobile ”page“，但是在页面加载时，只会显示HTML代码中第一个jquery mobile ”page“。不过只要在显示出来的页面上用link指向jquery mobile ”page“ 标签的id，那么在点击这些link的时候jquery mobile会load并显示这些”page“，并且可以指定load页面时的动画效果。

下面这段代码中，id=”foo“ 的页面会在页面加载的时候显示出来，其他”page“这时候看不见，但是foo ”page“包含了一个link（ <a href="#bar">bar</a> ），这个link的href指向隐藏”page“的id，点击这个link的时候jquery mobile就会加载并以指定的动画效果显示出bar ”page“（看起来不错，在很多浏览器上还是有点卡）。

<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>

ps：jQuery mobile 的这种语法可能会影响原始的HTML的书签的语法。

以上的jQuery Mobile ”page“语法并非强制，web开发者仍然可以使用传统的HTML开发方式

原文：http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

转载于:https://www.cnblogs.com/dlbrant/archive/2012/04/01/2429196.html

jQuery Mobile 笔记（1）- jQuery Mobile页面结构相关推荐

  1. jQuery 学习笔记 迭代jQuery对象和非jQuery对象

    jQuery提供了一个通用对象迭代器$.each()和一个jQuery集合迭代器.each(),它们是不相同的. 事实上,jQuery还提供了一组更有用的$.map() 和 .map()方法 $.ea ...

  2. jQuery读书笔记二 jQuery中的事件与应用

    1.实践中的冒泡现象: <style type="text/css">body{font-size:13px} .clsShow{border:#ccc 1px sol ...

  3. jQuery学习笔记之jQuery的DOM操作

    前期:http://blog.csdn.net/goodshot/article/details/20202019 一.节点的操作 1.查找节点: var $var_1=$("htmltyp ...

  4. JQuery 基础笔记

    JQuery 基础笔记 1. jQuery 概述 1.1 jQuery 是什么? 1.2 jQuery 简单应用 1.3 jQuery 功能应用 1.4 jQuery 技术优势 1.5 jQuery ...

  5. jQuery学习笔记--目录

    jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

  6. jquery mobile ajax 实例,jQuery Mobile 表单

    jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单自动添加样式,让它们看起来更具吸引力,触摸起来更具友好性. jQuery Mobile 表单结构 jQuery M ...

  7. jquery html data属性,jQuery Mobile Data 属性

    jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观. 在下面的参考列 ...

  8. 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 ...

  9. jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例

    day03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery ...

最新文章

  1. 每日一题（字符串拆分）
  2. 语音合成android代码,百度 TTS 语音合成-Android
  3. Android Kotlin 协程async
  4. mysql 终止 存储过程
  5. 方式程0day MS17-010远程溢出漏洞测试
  6. qt如何讲自己定义的label放到mainwindow中_如何更改SAS变量格式？
  7. netty系列之:基于流的数据传输
  8. MySQL实战案例100例（一）-如何解决非等值范围查找问题？
  9. 什么是商业智能（BI），以及其与数据分析的区别？
  10. mybatis typehandler
  11. 备忘（持续更新。。。）
  12. DataSet与DataReader的区别
  13. |Vijos|图论最短路|P1082 丛林冒险
  14. 蓝桥杯 ADV-102 算法提高 单词个数统计
  15. Spring的junit4测试集成
  16. PHP中 如何将二位数组按某一个或多个字段值(升序/降序)排序？数字索引被重置,关联索引保持不变...
  17. （8）Python_分割numpy数组
  18. 线程之线程同步（1)
  19. c++字符串逆序输出
  20. 李少白讲摄影-不放过一切光线地坛书市新书首发圆满结束

热门文章

  1. Java线程详解(2)-创建与启动
  2. Prometheus 初探
  3. Andoird --- Json 经典异常：org.json.JSONException: Unterminated string at character
  4. 【收藏】电气设计相关计算公式大全（附举例）
  5. 某厂家精密空调精品培训资料
  6. 发改委最新《产业结构调整目录》公布！数据中心列入鼓励产业条目
  7. 读懂 | 路由器简史
  8. DL之PerceptronAdalineGD：基于iris莺尾花数据集利用Perceptron感知机和AdalineGD算法实现二分类
  9. 成功解决win系统电脑中网络仅看到自己计算机图文教程
  10. DL之FAN：基于人工智能算法偶像和明星渐变卡通形象