如何在jQuery Mobile上編寫應用程序

作者：周雪峰 2011-01-28 09:12:53

51CTO將會為您講述如何在jQuery Mobile框架上創建一個簡單的應用程序，這個應用程序只有幾個頁面，可以支持Twitter，帶有Google Maps功能，以及一些基本的元素。

【51CTO譯文】從jQuery Mobile出現之前，介紹過他將支持的各個平臺。現在jQuery Mobile框架已經發布，雖然他出現的時間并不長，但是它的質量卻有了很大的改善。實際上，它的許多子系統都已經重新編寫了（為了改善代碼的清晰度和性能），跨瀏覽器兼容性在質量上也有了很大的提升。

jQuery Mobile

以前，我使用過jQTouch和Sencha Touch。它們各有優缺點，但是我更喜歡把注意力放在jQuery Mobile開發上。現在，我將會為您講述如何創建一個簡單的應用程序，這個應用程序只有幾個頁面，可以支持Twitter，帶有Google Maps功能，以及一些基本的元素。讓我們開始吧！

首先，我們添加框架和樣式。

<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.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

現在，讓我們來創建頁面。這里我們應該注意一下jQuery Mobile和jQTouch的相似性——整個應用程序就是一個html頁面，在這個html頁面中，特殊標記的div就是這個應用程序的“頁面”。在它的基礎表單中，這樣的“應用程序頁面”如下所示：

<div data-role="page"> 
              <div data-role="header">...</div>   
              <div data-role="content">...</div>   
              <div data-role="footer">...</div>   
</div>

“data-role”參數用來設置div的功能：頁面，表頭，頁面的內容或頁腳。另外，必須為data-role="page"的div設置“id”參數才能對這個應用程序進行導航。

另外一個值得一提的參數是“data-theme”。這個參數可以應用到所有的頁面元素上，它可以決定使用哪個默認的樣式。在這篇文檔中，你可以找到一些可用的主題的例子（請點擊查閱）。

在我們的應用程序的主頁上應該有一個菜單，菜單項分別指向使用這些例子的頁面。要創建這樣一個菜單，我們需要添加一個ul列表。如下所示：

<ul data-role="listview" data-inset="true" data-theme="a">   
                <li><a href="#twitter_page">Twitter example</a></li>   
                <li><a href="#map_page">Map example</a></li>   
                <li><a href="#search">Search example</a></li>   
                <li><a href="#about">About</a></li>   
</ul>

ul標簽的參數：

◆data-role="listview"— 表示這是一個你想要應用樣式的列表。

◆data-inset="true" — 非全屏顯示一個列表，如果你的目的剛好相反，可以把它設置成“false”。

◆data-theme="a"- 使用哪個配色方案。

jQuery Mobile包含很多列表類型：簡單的，帶圖標的，帶圖像數據的，等等。在這篇文檔中，你可以找到一些例子（請點擊查閱）。

此外，我還想把一個設置按鈕添加到工具欄上。這是很容易做到的：

<a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>

就像你看到的一樣，這個按鈕可以把你導航到個性化的頁面，在“gear”樣式（data-icon="gear"）中，它的外觀是一個圖標，它位于工具欄的右邊。在這個框架中，有一套預置的圖標。在這篇文檔中，你可以看到一些例子（請點擊查閱）。

最后，主頁如下所示：

<div data-role="page" id="main_page" data-theme="b">   
              <div data-role="header" > 
                      <h1 id="twi_acc">Home page</h1>   
                      <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>   
              </div>   
              <div data-role="content" >   
                      <ul data-role="listview" data-inset="true" data-theme="a">   
                              <li><a href="#twitter_page">Twitter example</a></li>   
                              <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li>   
                              <li><a href="#about">About</a></li>   
                      </ul>   
              </div>   
              <div data-role="footer">   
              </div>   
</div>

現在，讓我們來創建其他的頁面。我們將會把注意力集中在設置頁面上。這里我們將會放置一些表單元素。在這篇文檔中，你可以找到可用的表單元素的完整列表（請點擊查閱）。

根據指南，你應該把所有元素都放到一個特定的div中：

<div data-role="fieldcontain"> 
</div>

讓我們按照這條建議來行事。現在，我們把下面這些元素放在表單上。

input域：

<label for="name">My name:</label>   
<input type="text" name="name" id="name" value="" />

文本域：

<label for="textarea">About myself:</label>   
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

滑塊，設置它的最大值，最小值和當前值：

<label for="slider">Value this site:</label> 
<input type="range" name="slider" id="slider" value="0" min="-50" max="50" />

選項：

<label for="slider2">Value this site:</label> 
<select name="slider2" id="slider2" data-role="slider"> 
        <option value="off">Like</option> 
        <option value="on">Dislike</option> 
</select>

選擇器：

<select name="select-choice-1" id="select-choice-1"> 
        <option value="standard">Tired</option> 
        <option value="standard">Happy</option> 
        <option value="standard">Sick</option> 
        <option value="standard">Sunny</option> 
</select>

現在，我們來創建一個搜索頁面。它主要由兩個元素構成：input域和searchresult列表。

<div data-role="content" >        
        <label for="search">Search</label> 
        <input type="search" name="password" id="search" value="" /> 
        <ul data-role="listview" data-inset="true" id="searchresult">                                     
        </ul> 
</div>

現在，我們需要使用JavaScript，把input域綁定到keyup函數上，來填充searchresult列表。

$("#search").keyup(function(){  
        var res = shuffle(monthes);  
        var list='';  
        $.each(res, function(index, value) {  
                list+='<li role="option" tabindex="0" data-theme="a" class="ui-btn ui-li ui-btn-up-a"><div class="ui-btn-inner"><div class="ui-btn-text">'+value+'</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';  
        });                                                       
        $("#searchresult").html(list);    
});

關于這段代碼，有幾點需要說明一下。在第一行中，我們對現有的數組進行了“shuffle”。Shuffle函數如下所示：

var shuffle = function(o){ //v1.0  
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);  
                return o;  
        };

然后，我們創建了一個列表。我們應該用這種方式來創建它，因為列表項是動態地添加到這個列表中的，為了掛載樣式和參數，一個框架不會再處理它們了。

然后，我們使用anywhere函數，創建一個支持Twitter的頁面。首先，我們應該連接那些庫：

<script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script>

為了得到相應的Key，你必須在這個頁面中注冊一下（請點擊查閱）。

然后，我們創建這個頁面的代碼：

<div data-role="page" id="twitter_page" data-theme="b"> 
        <div data-role="header" > 
                <h1>Simple twitter example</h1> 
        </div> 
        <div data-role="content" >        
                <div id="twi_list"></div> 
        </div> 
        <div data-role="footer">                                  
        </div> 
</div>

現在是最主要的東西了——JavaScript代碼，當我們打開這個頁面的時候，這些代碼將會執行。要追蹤這個事件，可以使用一個專門的事件——pageshow。關于其他的事件，具體可以參考（請點擊查閱）。

$('#twitter_page').live('pageshow',function(event, ui){                                   
        twttr.anywhere(function(T) {                      
                T.User.find('andrebrov').timeline().first(20).each(function(status) {                                     
                        $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');  
                });       
                                                  
        });                                       
});

關于anywhere函數的使用方法，具體可以參考（請點擊查閱）。當我們打開我們剛剛創建好的這個頁面的時候，我們會發現，有一段時間，它一直是空白的，這是因為tweets正在載入。為了讓用戶知道這是怎么回事，我們將會添加一個spinner。代碼如下所示：

$('#twitter_page').live('pageshow',function(event, ui){                                   
        twttr.anywhere(function(T) {                      
                $.mobile.pageLoading();   
                var j=0;  
                T.User.find('andrebrov').timeline().first(20).each(function(status) {                                     
                        $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');  
                        j++;  
                        if (j==1){  
                                $.mobile.pageLoading(true);  
                        }  
                });                                                       
        });                                       
});

在這篇文檔中，你可以找到關于spinner，及其實用程序的詳細信息（請點擊查閱）。

現在，我們來創建地圖頁面。首先，選擇合適的腳本

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

然后，我們創建這個頁面

<div data-role="page" id="map_page" data-theme="b"> 
        <div data-role="header" > 
                <h1>Map example</h1> 
        </div> 
        <div data-role="content" >        
                <div id="map_canvas"></div> 
        </div> 
        <div data-role="footer">                                                  
        </div> 
</div>

“map_canvas”元素將會包含這個地圖。讓我們來定義它的樣式：

#map_canvas{  
        width:100%;  
        height: 100%;     
        position:relative;  
        top:0px;  
}

現在，我們添加一段JavaScript代碼，這段代碼可以確定當前的位置，把這個位置顯示在地圖的中央，然后給這個位置添加一個標記。此外，在這個標記上，我們還可以某個把某個事件綁定在它的點擊操作上。

$('#map_page').live('pageshow',function(event, ui){                                       
        navigator.geolocation.getCurrentPosition(function(location) {                                             
                var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);  
                var myOptions = {  
                        zoom: 13,  
                        center: point,  
                        mapTypeId: google.maps.MapTypeId.ROADMAP  
                };  
                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);  
                var marker = new google.maps.Marker({position: point,map: map});                                                  
                google.maps.event.addListener(marker, 'click', function() {  
                        alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude);  
                });  
        });       
});

最后，對于我來說，這個頁面中最有趣的元素是：

完整的list-divider：

<li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li>

打開一個郵件客戶端的鏈接：

<li><a href="mailto:mailme@gmail.com" class="ui-link-inherit">EMail me</a></li>

指向電話號碼的鏈接：

<li><a href="tel:+79000000000" class="ui-link-inherit">Call me</a></li>

關于各種鏈接，具體可以參考這里！

總結

我們曾經對“四大主流移動Web開發框架”進行過介紹，其中jQuery Mobile項目宣布其要成為“完整的，統一的，移動UI架構”，jQuery Mobile核心項目也將繼續為移動提供優化，我們也最為看好這個框架，希望本文能對大家有所幫助！

感謝大家，這便是51CTO的獨家譯文《如何在jQuery Mobile上編寫一個簡單的應用程序》。

原文名稱：How to write a simple application on jQuery Mobile

查看原文

【51CTO譯稿，非經授權謝絕轉載，合作媒體轉載請注明原文出處、作者及51CTO譯稿和譯者！】

【編輯推薦】

jQuery Mobile Alpha正式發布支持所有主流平臺
jQuery Mobile將至支持主流移動平臺
細數六大支持智能手機的JS框架
走進四大主流移動Web開發框架

責任編輯：佚名來源： 51CTO譯文

jQuery Mobile

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

如何在jQuery Mobile上編寫應用程序