GBin1教程：使用jQuery Mobile快速開發一個手機閱讀網站
日期：2011/10/25 來源：GBin1.com
jQuery mobile已經慢慢進入了web開發人員的視野，隨著jQuery mobile框架的發展，使用jQuery mobile開發手機端應用將會成為一個趨勢，今天GBin1帶給大家一個入門級的jQuery mobile開發，將講解如何使用jQuery快速生成一個手機端的網站，你不需要寫任何一行JS代碼。
手機版頁面效果如下：
HTML代碼
<html>
<head>
<title>GBin1中文互聯</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
...
</body>
</html>
以上代碼定義了jQuery Mobile需要倒入的類庫。
這個例子我們將只使用一個jQuery Mobile頁面來顯示所有的網站內容。 頁面定義如下：
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>GBin1中文互聯</h1>
<div data-role="navbar" data-theme="b">
<ul>
<li><a href="m.jsp?root=/" class="ui-btn-active" data-icon="grid">全部</a></li>
<li><a href="m.jsp?root=/technology" class="ui-btn-active" data-icon="search">互聯開發</a></li>
<li><a href="m.jsp?root=/internet" class="ui-btn-active" data-icon="search">互聯動態</a></li>
<li><a href="m.jsp?root=/tools" class="ui-btn-active" data-icon="search">軟件工具</a></li>
</ul>
</div><!-- /navbar -->
</div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="g">
<div data-role="collapsible">
<h3>
GBin1教程：使用jQuery Mobile快速開發一個手機網站
</h3>
<p>
jQuery mobile已經慢慢進入了web開發人員的視野，隨著jQuery mobile框架的發展，使用jQuery mobile開發手機端應用將會成為一個趨勢，今天GBin1帶給大家一個入門級的jQuery mobile開發，將講解如何使用jQuery快速生成一個手機端的網站，你不需要寫任何一行JS代碼。
<a rel="external" >
更多內容
</a>
</p>
</div>
<div data-role="collapsible">
<h3>
GBin1推薦：分享2011年8個最新的jQuery Mobile在線教程
</h3>
<p>
jQuery Mobile目前已經發布了RC1， 隨著類庫的完善，jQueryMobile必將成為移動端開發的利器之一，今天我們收集了2011年最新的8個jQuery移動開發教程，包含最簡單的入門介紹，到高級的開發應用案例，希望大家喜歡！
<a rel="external" >
更多內容
</a>
</p>
</div>
</div>
</div>
<div data-role="footer">
<p> © Copywrite 2011 gbin1.com</p>
</div>
</div>
以上代碼定義了一個頁面中的頭導航，中間內容，及其頁腳內容。
在jQuery Mobile中，定義一個單獨手機頁面使用如下CSS定義：
<div data-role="page" data-theme="a">
這行代碼中定義了數據角色為頁面，數據使用的主題為a，在目前版本的jQuery中，框架自己提供了5種缺省的主題，分別使用不同顏色，如下：
如果你不指定theme，那么缺省會使用“c”主題。 接下來定義了一個導航條，同樣可以定義主題，注意導航條可以定義在頁首也可以定義在頁腳，我們這個例子中定義在頁首，如下：
<div data-role="header">
<h1>GBin1中文互聯</h1>
<div data-role="navbar" data-theme="b">
<ul>
<li><a href="m.jsp?root=/" class="ui-btn-active" data-icon="grid">全部</a></li>
<li><a href="m.jsp?root=/technology" class="ui-btn-active" data-icon="search">互聯開發</a></li>
<li><a href="m.jsp?root=/internet" class="ui-btn-active" data-icon="search">互聯動態</a></li>
<li><a href="m.jsp?root=/tools" class="ui-btn-active" data-icon="search">軟件工具</a></li>
</ul>
</div><!-- /navbar -->
</div>
導航條定義后，我們將定義具體顯示內容，這里我們使用內容格式中的collapsible-set組件，它會給標題生成一個隱藏內容，點擊將顯示文章說明，及其具體鏈接地址，如下：
<div data-role="content">
<div data-role="collapsible-set" data-theme="g">
<div data-role="collapsible">
<h3>
GBin1教程：使用jQuery Mobile快速開發一個手機網站
</h3>
<p>
jQuery mobile已經慢慢進入了web開發人員的視野，隨著jQuery mobile框架的發展，使用jQuery mobile開發手機端應用將會成為一個趨勢，今天GBin1帶給大家一個入門級的jQuery mobile開發，將講解如何使用jQuery快速生成一個手機端的網站，你不需要寫任何一行JS代碼。
<a rel="external" >
更多內容
</a>
</p>
</div>
更多需要顯示的內容 ...
</div>
</div>
以 上代碼中，data-role="content"定義了頁面內容， data-role="collapsibl-set"定義了一組可擴展單元，而data-role="collapsible"定義了具體的可以擴展的 內容單元，如果大家使用PHP或者其它服務器端語言，可以動態生成以上內容，這里我使用純HTML生成倆個樣例文章。具體的組件使用，請大家參考 jQuery mobile的文檔，地址如下：
Content formatting: http://jquerymobile.com/demos/1.0rc2/#/demos/1.0rc2/docs/content/index.html
最后我們定義頁角內容，非常簡單，如下：
<div data-role="footer">
<p> © Copywrite 2011 gbin1.com</p>
</div>
以上我們沒有使用一行js代碼，很快的就可以把一個文章類型的網站轉換為一個手機閱讀的網站，是不是很簡單？ 當然，我們還可以擴展功能，比如，在手機中顯示網站每一個頁面的內容。這些我們將再以后的教程之中和大家分享。希望大家喜歡我們的文章。請留言支持我們！
浙公網安備 33010602011771號