手把手教學，用jQuery Mobile建立Web App

　　移動網際網路的發展，促生了各種各樣的移動Web框架。jQuery是繼Prototype之後又一個優秀的JavaScript框架。通過jQuery，我們能夠快速地處理HTML文件、控制事件、給頁面新增動畫和Ajax效果。在Web設計中，我們通常會將設計轉化成程式碼。但是這個過程通常是漫長而又反覆，更悲劇的是，程式碼的可用性還要打個問號。而通過jQuery外掛，我們只需在短短的幾分鐘內就能解決以往需要幾小時甚至是幾天的問題。

　　在本文中，Jake Rocheleau將為我們展示如何用jQuery來建立一個基於移動裝置的Web App。在開發過程中，我們將使用CSS3的媒體查詢功能來找出當前移動裝置螢幕的的最大解析度，根據不同的解析度使用不同CSS。此外，Media Queries還可以幫助我們在小螢幕上隱藏導航選單以展示更多的內容。我們還會使用jQuery來幫助我們使用Ajax.Load()，以便啟用選單欄和載入外部頁面內容。

• LIVE DEMO
• SOURCE CODE

　　1. 定義頁面佈局

　　首先，我們先要檢視HTML頁面，並且使用CSS樣式來確定頁面的樣式。在開頭我會跳過許多不常見的Meta標籤（對所建立的Web App沒有直接的影響）。但是我們仍然要注意一些程式碼片段（在下面我已經列舉出來）。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

　　X-UA-Compatible是用來描述檔案在某些瀏覽器上的渲染程度。不得不說， 在HTML5程式設計過程中這是一個非常有趣的事情。所以我不用太擔心這個問題。但重要的是，如果我們恰當地使用Meta標籤，它會給我們許多意想不到的幫助。例如加入關鍵字會被大型搜尋網站自動蒐集，可以設定頁面格式及重新整理和讓網頁自動適應移動瀏覽器大小等。

　　內容主體

　　在BODY中，我通過ID#w建立了一個Wrapper Div。在其中我將頁面佈局分成了#pagebody和#navmenu兩個部分。整個頁面的寬度為640px，所以#pagebody和#navmenu的寬度可以精確地計算。

　　我給導航選單賦了一個較低的z-index值來保證#pagebody總能在最頂部面顯示。

<div id="pagebody">
    <header id="toolbarnav">
        <a rel="external" href="#navmenu" id="menu-btn"></a>
    
        <h1>HK Mobile</h1>
    </header>
    
    <section id="content" class="clearfix">
        <h2>Welcome to the Mobile Site!</h2>
    </section>
</div>
 
<div id="navmenu">
    <header>
        <h1>Menu Links</h1>
    </header>
    
        <ul>
         <li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
         <li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
         <li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
         <li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
         <li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
         <li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
        </ul>
</div>

　　我在每個.html頁面前都新增了井字元（#）。每當點選一個連結時，URL欄都會出現和下推主體內容。當引用的ID沒有被過載時，我們只能通過JavaScript來重新呼叫它。

　　2. CSS定位

　　我們CSS程式碼中並沒有太多複雜的內容。大多數的定位工作都是通過手動完成的，完成之後才會交由jQuery來操作。同樣，這裡也有一些我們要注意的程式碼片段。

/** @group core body **/
#w #pagebody {
    position: relative;
    left: 0;
    max-width: 640px;
    min-width: 320px;
    z-index: 99999;
}
 
#w #navmenu {
    background: #475566;
    height: 100%;
    display: block;
    position: fixed;
    width: 300px;
    left: 0px;
    top: 0px;
    z-index: 0;
}

　　上面的這段程式碼分別定義了頁面中兩個部分的樣式。導航選單的寬度為300px，這樣一來，就為我們瀏覽頁面內容留下了一點空間，開啟和關閉選單按鈕也固定在左側。這裡最重要的部分就是導航選單的z-index的屬性值和位置（z-index: 0；position: fixed）。

　　我們頂部欄標題也是一個有趣的部分。它被放置在一個固定的位置，會隨著頁面內容的滾動而滾動，大多數的iOS App上都有這個效果。

/** @group header **/
#w #pagebody header#toolbarnav {
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
    background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    height: 44px;
    width: 100%;
    max-width: 640px;
}
 
#w #pagebody header#toolbarnav h1 {
    text-align: center;
    padding-top: 10px;
    padding-right: 40px;
    color: #e6e8f2;
    font-weight: bold;
    font-size: 2.1em;
    text-shadow: 1px 1px 0px #313131;
}

　　移動規則

　　很容易注意到，在背景上我使用了藍色的橫條作為標題欄。這個標題欄的大小為640x44px，從而能夠與頁面的佈局保持吻合。不僅如此，我還為iPhone/iPad視網膜螢幕設計了一張@2x圖片。大家可以從上圖看到這些圖片，或者從SOURCE CODE中獲取。

• {System}/demo/img/tabbar-solid-bg@2x.png
• {System}/demo/img/tabbar-solid-bg@2x.png

/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
    #w #pagebody header {
        background: #0b1851 url('img/tabbar-solid-bg@2x.png') top left no-repeat;
        background-size: 640px 44px;
    }
    
    #w #pagebody header #menu-btn {
        background: url('img/nav-btn@2x.png') no-repeat;
        background-size: 53px 30px;
    }
}

　　選單箭頭的設計

　　在導航選單方面，我為每個選單連結的右側設計了一個指向右方的箭頭圖示。相信大多數CSS3的愛好者都會喜歡這麼做，這確實是一個不錯的創意。

　　我使用transform變數在導航內容後面建立一個小邊框，所以我們可以在左邊的框架內任意的移動，除此之外，在懸停狀態下我們可以很方便地改變邊框的顏色和樣式。更令人驚歎的是，你只需要使用基本的HTML5和CSS3樣式就可以完成這些邊框地設計。

　但首先，我們要進入JavaScript編碼世界。

#w #navmenu ul li a::after {

    content: '';

    display: block;

    width: 6px;

    height: 6px;

    border-right: 3px solid #d0d0d8;

    border-top: 3px solid #d0d0d8;

    position: absolute;

    right: 30px;

    top: 45%;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

}
 

#w #navmenu ul li a:hover::after { border-color: #cad0e6; }

　　3.  jQuery動畫設計

　　在編寫這些自定義程式碼過程中，我新建了一個script.js檔案。大家可以根據自己的需要來直接編寫<script> 標籤，也可以從SOURCR CODE中直接下載我的模板。

$(document).ready(function(){  
    var pagebody = $("#pagebody");  
    var themenu = $("#navmenu");  
    var topbar  = $("#toolbarnav");  
    var content = $("#content");  
    var viewport = {  
    width : $(window).width(),  
    height : $(window).height()  
    };  
    // retrieve variables as   
    // viewport.width / viewport.height

　　在開始之前，我設定一些頁面變數，如此一來，我們就可以更為方便地引用文件中的變數。我從沒用過視口值，但是如果你想調整動畫階段，設定視口值可以幫你一個大忙。例如：通過視口值，你可以檢查當前瀏覽器的寬度，並能夠的對你的選單欄進行相應地縮放。

function openme() {   
    $(function () {  
      topbar.animate({  
        left: "290px"
      }, { duration: 300, queue: false });  
      pagebody.animate({  
        left: "290px"
      }, { duration: 300, queue: false });  
    });  
}  
  
function closeme() {  
    var closeme = $(function() {  
    topbar.animate({  
      left: "0px"
    }, { duration: 180, queue: false });  
    pagebody.animate({  
      left: "0px"
    }, { duration: 180, queue: false });  
    });  
}

　　接下來，我為開啟和關閉選單定義了兩個重要的函式。除非我們確實需要兩種截然不同的動畫元素，否則我們可以在一個單一的函式和回撥切換中完成此項設計，但不幸的是， jQuery並不能幫助我們解決這個問題，所以我們需要求助於其它的替代語法。

　　這兩個函式我暫且命名為topbar和pagebody。內容區域的白色背景就是pagebody；我們把標題欄放置在頁面的頂部。這就意味著每當我們點選開啟或者關閉按鈕時，我們需要把topbar和pagebody向左和向右平移290px。

　　4. 載入動態內容

　　理論上，上述程式碼基本上就能滿足大部分人建立一個簡單移動的需求，但是，在這裡我還想新增一些另外的東西。

　　每當使用者點選一個選單連結，頁面會自動關閉當前的導航欄目和顯示一個載入的GIF影像。當頁面內容載入完成時，頁面會去除GIF圖片，並且顯示已載入好的內容。通過使用static .htm，我們可以很輕鬆的完成這項工作，從而避免了PHP、Ruby、Perl或者任何後端語言所帶來的困擾。

　　點選設定

　　首先，我們需要測試導航按鈕。當使用者點選導航按鈕，頁面會停止href的正常載入，此時，我們可以利用函式來顯示外部內容。

// loading page content for navigation
$("a.navlink").live("click", function(e){
    e.preventDefault();
    var linkurl   = $(this).attr("href");
    var linkhtmlurl = linkurl.substring(1, linkurl.length);
    
    var imgloader  = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>';

　　通過上段程式碼，每當使用者點選導航選單連結時，我們會停止當前頁面載入並且設定一個完整的URL變數。此外，我還建立一個包含標準影像Loader的HTML變數。如果你想定製自己的影像載入方式，Ajaxload會是一個很不錯的助力。

　　Ajax.Load()

　　要實現這個功能我們需要兩段不同的程式碼，下面這段程式碼不僅能幫助我們關閉導航選單和滑動文件視窗，而且還能幫助我們使用一個較小的載入動畫來替代當前頁面內的主體內容。

closeme();
    
$(function() {
    topbar.css("top", "0px");
    window.scrollTo(0, 1);
});

　　當外部頁面的內容載入完成時，我們要用外部的載入頁面來取代頁面上的載入動畫。通常情況下，這將只需要幾百毫秒甚至更快，所以我設定了超時功能。

content.html(imgloader);
setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */.}) }, 1200);

　　5. 總結

　　我鼓勵所有的Web開發者去下載教程中的原始碼，並且希望開發者能夠以此編寫自己的原始碼。這僅僅是一個基礎教程。通過媒體查詢和越來越多的可擴充Web瀏覽器，Web開發也變得比以往更加的容易。移動開發是一門藝術，需要大量的實踐和奉獻精神。我希望這個教程是一個很好的起點，期望它能夠幫助更多的開發者。如果你對程式碼有任何的疑問和心得，可以在討論區與我分享。

　　原文來源：Hongkiat