用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()，以便激活菜單欄和加載外部頁面內容。

 

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);