本篇文章主要讲解一下几个知识点:
- JQuery Mobile的安装
- 用CDN加载JQuery Mobile
- 下载JQuery Mobile
- 搭建一个页面框架
JQuery Mobile的安装
在使用Web端的框架时. 只需要引用需要的外部文件就可以使用. 如何在你的页面上使用JQuery Mobile呢. 可以通过两种方式. 一种是使用CDN的方式, 另一种是通过站内文件访问. 什么叫做CDN? CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定. 通过不同的网络节点. 加快访问者的访问速度. 所以, 安装So easy!
用CDN加载JQuery Mobile
与 jQuery 类似，无需在您的计算机上安装任何程序；您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库，这样 jQuery Mobile 就可以工作了：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
因为JQuery Mobile使用的是JQuery的内核. 所以, 需要引用JQuery的js文件. 然后也要需要JQuery Mobile的js文件和css文件, 这样就可以使用JQuery Mobile了.
下载JQuery Mobile
如果你想把JQuery Mobile放在你的主机中, 或者作为开发时使用, 你可以使用下载的文件. 这个文件你可以从http://jquerymobile.com/去下载. 然后把下载的文件拷贝到你的项目中. 这里给出放在项目根目录的文件引用方式.
<head>
<link rel=stylesheet href="jquery.mobile-1.10.2.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.0.js"></script>
</head>
这里学过javascript的应该发现一个问题, 就是在使用script的时候并没有使用 type="text/javascript" , 这是因为, JQueryMobile是基于HTML5. 在HTML5中, javascript是默认的脚本语言. 所以这里就没有写这个属性.
搭建一个页面框架
上面的配置已经搭建完成, 现在开始JQuery Mobile的第一步, 小试牛刀吧. 简单的说一下HTML5中的格式. 开始的时候需要使用 <!DOCTYPE> 它指示Web浏览器页面使用那个HTML的版本进行编译指令. 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
<!DOCTYPE html> HTML5中就这一种声明方式.
最后运行图:
源代码:
jQuery Mobile 使用 HTML5 data-* 属性为移动设备创建“对触摸友好的”美观的外观。这里JQuery Mobile定义了很多的样式效果. 所以这里的data-role="header", data-role="content", data-role="footer", 分别代表着页头, 页面内容, 页脚 具体转到 JQuery Mobile常用的data-role类型
其中 <meta name="viewport" content="width=device-width, initial-scale=1">代表适应手机浏览器.
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放