jQuery Mobile 教程 (1)

移动互联网是块诱人的大蛋糕，在手机屏上，到底是C/S横扫一切，还是B/S力争一席之地？我相信，B/S还是很有希望的。在找移动Web App开发的资料，发现了jQuery Mobile ，对它的设计理念是赞同的，因此简单的了解一下。

jQuery Mobile 简介#

项目目标——跨平台和跨设备（Seriously cross-platform & cross-device）

这个javascript 类库是针对手机浏览器推出的 Javascript 库，程序员能够使用一套相同的语法和库来适配主流移动设备的浏览器，比如：iPhone, Android, BlackBerry OS6.0 等手机内置的浏览器，更简单的说法就是程序员写一个 HTML + CSS + Javascript 的网页在不同的终端浏览器上获得的效果基本一致，运算结果和效率仅仅跟 CPU 速度和浏览器的渲染速度相关。

这个mobile项目在UI的设计上专门为触摸屏幕做了优化（Touch-optimized layouts & UI widgets），看看下面的图片：

同样的，秉承jQuery UI的优良传统，jQuery Mobile 也是可以定制主题的（Themable designs: Bigger and better），据官方文档（we added support for more CSS3 properties like text-shadow, box-shadow, and gradients.）

jQuery Mobile Hello World！#

不脱俗，先从hello world 开始

<br> <br> <br> <br> <br> <br> <br> <br> <br><br><div><br><br> <div><br> <h1>Hello jQuery Mobile!<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h1></div><br><br> <div> <br> <p>Hello world, jQuery Mobile!.</p> </div><br><br> <div><br> <h4>Page Footer<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4></div></div>

效果如下：

首先，需要引用jquery&& jquery mobile

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

然后，在body中插入内容块：

<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div> 
data-role="page“代表这个div是一个Page，在一个屏幕中只会显示一个page；

header是标题，content是内容块，footer是页脚

如果一个html中有多个Page，会怎么显示呢？

我们来看下面的代码

<br><div id="first"><br><br> <div><br> <h1>第一个页面<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h1></div><br><br> <div> <br> <p>Hello，我是第一个页面</p> <br> <p>进入 <a href="#second" rel="noopener nofollow">第二个页面</a></p> </div><br><br> <div><br> <h4>第一个页面的 Footer<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4></div></div><br><br><br><br><div id="second"><br><br> <div><br> <h1>第二个页面<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h1></div><br><br> <div> <br> <p>我是第二个页面.</p> <br> <p><a href="#first" rel="noopener nofollow">返回第一个页面</a></p> </div><br><br> <div><br> <h4>第二个页面的 Footer<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4></div></div>