移動網際網路是塊誘人的大蛋糕，在手機屏上，到底是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 開始

		Hello jQuery Mobile!

		
		Hello world, jQuery Mobile!.		

	
		Page Footer

效果如下：

首先，需要引用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>第一個頁面</h1></div><!-- /header --><br><br>    <div>   <br>        <p>Hello，我是第一個頁面</p>        <br>        <p>進入 <a href="#second">第二個頁面</a></p>   </div><!-- /content --><br><br> <div><br>       <h4>第一個頁面的 Footer</h4></div><!-- /header --></div><!-- /page --><br><br><br><!-- Start of second page --><br><div id="second"><br><br>  <div><br>       <h1>第二個頁面</h1></div><!-- /header --><br><br>    <div>   <br>        <p>我是第二個頁面.</p>     <br>        <p><a href="#first">返回第一個頁面</a></p> </div><!-- /content --><br><br> <div><br>       <h4>第二個頁面的 Footer</h4></div><!-- /header --></div><!-- /page -->

我們來看結果：

點選連結