JQuery mobile 1第一个页面

最近在公司做一个移动客户端,混合应用模式开发,使用的Jquerymobile,自己对jquerymobile不是很熟悉,利用空闲的时间从头开始学习jquerymobile。希望通过自己的努力,和记录能够使自己对于jquerymobile有一定的了解。

花了几分钟写了一个jquerymobile的最简单的页面,学习每个技术都是先写hello XX,所以我这次第一次写的是hello jquerymobile。代码如下:

[html] view plain copy
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>第一个jquerymobile页面</title>  
  6.     <meta name="viewport" content="width=device-width,initial-scale=1" />   
  7.     <link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>  
  8.     <script src="jqm/jquery-1.8.2.min.js"></script>  
  9.     <script src="jqm/jquery.mobile-1.2.0.min.js"></script>  
  10. </head>  
  11.   
  12. <body>  
  13.     <div id="first" data-role="page">  
  14.         <div id="header" data-role="header">  
  15.             <h1>这是第一个jquerymobile页面</h1>  
  16.         </div>  
  17.         <div id="content" data-role="content">  
  18.             Hello Jquerymobile!!  
  19.         </div>  
  20.         <div id="footer" data-role="footer">  
  21.             <h4>Footer</h4>  
  22.         </div>  
  23.     </div>  
  24. </body>  
  25. </html>  

这是一个很简单的页面,但是有几点需要说明。
在代码中使用的是本地下载的css、js,但是真正做网站的时候不建议这样,建议使用jquerymobile的CDN去加载文件,代码如下:
[html] view plain copy
  1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />  
  2. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
  3. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
引用js的时候,一定要先写jquery然后再写jquerymobile,否则会出错。因为jquerymobile依赖jquery。
还有在head中的一段代码:
[html] view plain copy
  1. <meta name="viewport" content="width=device-width,initial-scale=1" />   
这行代码的功能是:设置移动设备中浏览器缩放的宽度与等级。通常情况下,移动设备的浏览器默认以“900px”的宽度显示页面,这种宽度会导致屏幕缩小,页面放大,不适合浏览。如果在页面中添加 元素,并设置“content”的属性值为“width=device-width,initial-scale=1”,可以使页面的宽度与移动设备的屏幕宽度相同,更加适合用户浏览。
在代码中我们并没有对header和footer加什么样式,但是显示的结果是有样式的,这样的原因是jquerymobile自动为它们添加了样式。

你可能感兴趣的:(jquery,html5,mobile,移动设备,移动浏览器)