如何在jQuery Mobile上編寫(xiě)應(yīng)用程序
原創(chuàng)【51CTO譯文】從jQuery Mobile出現(xiàn)之前，介紹過(guò)他將支持的各個(gè)平臺(tái)?，F(xiàn)在jQuery Mobile框架已經(jīng)發(fā)布，雖然他出現(xiàn)的時(shí)間并不長(zhǎng)，但是它的質(zhì)量卻有了很大的改善。實(shí)際上，它的許多子系統(tǒng)都已經(jīng)重新編寫(xiě)了（為了改善代碼的清晰度和性能），跨瀏覽器兼容性在質(zhì)量上也有了很大的提升。
jQuery Mobile
以前，我使用過(guò)jQTouch和Sencha Touch。它們各有優(yōu)缺點(diǎn)，但是我更喜歡把注意力放在jQuery Mobile開(kāi)發(fā)上?，F(xiàn)在，我將會(huì)為您講述如何創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序，這個(gè)應(yīng)用程序只有幾個(gè)頁(yè)面，可以支持Twitter，帶有Google Maps功能，以及一些基本的元素。讓我們開(kāi)始吧！
首先，我們添加框架和樣式。
- <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>
現(xiàn)在，讓我們來(lái)創(chuàng)建頁(yè)面。這里我們應(yīng)該注意一下jQuery Mobile和jQTouch的相似性——整個(gè)應(yīng)用程序就是一個(gè)html頁(yè)面，在這個(gè)html頁(yè)面中，特殊標(biāo)記的div就是這個(gè)應(yīng)用程序的“頁(yè)面”。在它的基礎(chǔ)表單中，這樣的“應(yīng)用程序頁(yè)面”如下所示：
- <div data-role="page">
- <div data-role="header">...</div>
- <div data-role="content">...</div>
- <div data-role="footer">...</div>
- </div>
“data-role”參數(shù)用來(lái)設(shè)置div的功能：頁(yè)面，表頭，頁(yè)面的內(nèi)容或頁(yè)腳。另外，必須為data-role="page"的div設(shè)置“id”參數(shù)才能對(duì)這個(gè)應(yīng)用程序進(jìn)行導(dǎo)航。
另外一個(gè)值得一提的參數(shù)是“data-theme”。這個(gè)參數(shù)可以應(yīng)用到所有的頁(yè)面元素上，它可以決定使用哪個(gè)默認(rèn)的樣式。在這篇文檔中，你可以找到一些可用的主題的例子（請(qǐng)點(diǎn)擊查閱）。
在我們的應(yīng)用程序的主頁(yè)上應(yīng)該有一個(gè)菜單，菜單項(xiàng)分別指向使用這些例子的頁(yè)面。要?jiǎng)?chuàng)建這樣一個(gè)菜單，我們需要添加一個(gè)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標(biāo)簽的參數(shù)：
◆data-role="listview"— 表示這是一個(gè)你想要應(yīng)用樣式的列表。
◆data-inset="true" — 非全屏顯示一個(gè)列表，如果你的目的剛好相反，可以把它設(shè)置成“false”。
◆data-theme="a"- 使用哪個(gè)配色方案。
jQuery Mobile包含很多列表類(lèi)型：簡(jiǎn)單的，帶圖標(biāo)的，帶圖像數(shù)據(jù)的，等等。在這篇文檔中，你可以找到一些例子（請(qǐng)點(diǎn)擊查閱）。
此外，我還想把一個(gè)設(shè)置按鈕添加到工具欄上。這是很容易做到的：
- <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
就像你看到的一樣，這個(gè)按鈕可以把你導(dǎo)航到個(gè)性化的頁(yè)面，在“gear”樣式（data-icon="gear"）中，它的外觀是一個(gè)圖標(biāo)，它位于工具欄的右邊。在這個(gè)框架中，有一套預(yù)置的圖標(biāo)。在這篇文檔中，你可以看到一些例子（請(qǐng)點(diǎn)擊查閱）。
最后，主頁(yè)如下所示：
- <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>
現(xiàn)在，讓我們來(lái)創(chuàng)建其他的頁(yè)面。我們將會(huì)把注意力集中在設(shè)置頁(yè)面上。這里我們將會(huì)放置一些表單元素。在這篇文檔中，你可以找到可用的表單元素的完整列表（請(qǐng)點(diǎn)擊查閱）。
根據(jù)指南，你應(yīng)該把所有元素都放到一個(gè)特定的div中：
- <div data-role="fieldcontain">
- </div>
讓我們按照這條建議來(lái)行事?，F(xiàn)在，我們把下面這些元素放在表單上。
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>
滑塊，設(shè)置它的最大值，最小值和當(dāng)前值：
- <label for="slider">Value this site:</label>
- <input type="range" name="slider" id="slider" value="0" min="-50" max="50" />
選項(xiàng)：
- <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>
現(xiàn)在，我們來(lái)創(chuàng)建一個(gè)搜索頁(yè)面。它主要由兩個(gè)元素構(gòu)成：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>
現(xiàn)在，我們需要使用JavaScript，把input域綁定到keyup函數(shù)上，來(lái)填充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);
- });
關(guān)于這段代碼，有幾點(diǎn)需要說(shuō)明一下。在第一行中，我們對(duì)現(xiàn)有的數(shù)組進(jìn)行了“shuffle”。Shuffle函數(shù)如下所示：
- 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;
- };
然后，我們創(chuàng)建了一個(gè)列表。我們應(yīng)該用這種方式來(lái)創(chuàng)建它，因?yàn)榱斜眄?xiàng)是動(dòng)態(tài)地添加到這個(gè)列表中的，為了掛載樣式和參數(shù)，一個(gè)框架不會(huì)再處理它們了。
然后，我們使用anywhere函數(shù)，創(chuàng)建一個(gè)支持Twitter的頁(yè)面。首先，我們應(yīng)該連接那些庫(kù)：
- <script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script>
為了得到相應(yīng)的Key，你必須在這個(gè)頁(yè)面中注冊(cè)一下（請(qǐng)點(diǎn)擊查閱）。
然后，我們創(chuàng)建這個(gè)頁(yè)面的代碼：
- <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>
現(xiàn)在是最主要的東西了——JavaScript代碼，當(dāng)我們打開(kāi)這個(gè)頁(yè)面的時(shí)候，這些代碼將會(huì)執(zhí)行。要追蹤這個(gè)事件，可以使用一個(gè)專(zhuān)門(mén)的事件——pageshow。關(guān)于其他的事件，具體可以參考（請(qǐng)點(diǎn)擊查閱）。
- $('#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>');
- });
- });
- });
關(guān)于anywhere函數(shù)的使用方法，具體可以參考（請(qǐng)點(diǎn)擊查閱）。當(dāng)我們打開(kāi)我們剛剛創(chuàng)建好的這個(gè)頁(yè)面的時(shí)候，我們會(huì)發(fā)現(xiàn)，有一段時(shí)間，它一直是空白的，這是因?yàn)閠weets正在載入。為了讓用戶(hù)知道這是怎么回事，我們將會(huì)添加一個(gè)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);
- }
- });
- });
- });
在這篇文檔中，你可以找到關(guān)于spinner，及其實(shí)用程序的詳細(xì)信息（請(qǐng)點(diǎn)擊查閱）。
現(xiàn)在，我們來(lái)創(chuàng)建地圖頁(yè)面。首先，選擇合適的腳本
- <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>
然后，我們創(chuàng)建這個(gè)頁(yè)面
- <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”元素將會(huì)包含這個(gè)地圖。讓我們來(lái)定義它的樣式：
- #map_canvas{
- width:100%;
- height: 100%;
- position:relative;
- top:0px;
- }
現(xiàn)在，我們添加一段JavaScript代碼，這段代碼可以確定當(dāng)前的位置，把這個(gè)位置顯示在地圖的中央，然后給這個(gè)位置添加一個(gè)標(biāo)記。此外，在這個(gè)標(biāo)記上，我們還可以某個(gè)把某個(gè)事件綁定在它的點(diǎn)擊操作上。
- $('#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);
- });
- });
- });
最后，對(duì)于我來(lái)說(shuō)，這個(gè)頁(yè)面中最有趣的元素是：
完整的list-divider：
- <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li>
打開(kāi)一個(gè)郵件客戶(hù)端的鏈接：
- <li><a href="mailto:mailme@gmail.com" class="ui-link-inherit">EMail me</a></li>
指向電話號(hào)碼的鏈接：
- <li><a href="tel:+79000000000" class="ui-link-inherit">Call me</a></li>
關(guān)于各種鏈接，具體可以參考這里！
總結(jié)
我們?cè)?jīng)對(duì)“四大主流移動(dòng)Web開(kāi)發(fā)框架”進(jìn)行過(guò)介紹，其中jQuery Mobile項(xiàng)目宣布其要成為“完整的，統(tǒng)一的，移動(dòng)UI架構(gòu)”，jQuery Mobile核心項(xiàng)目也將繼續(xù)為移動(dòng)提供優(yōu)化，我們也最為看好這個(gè)框架，希望本文能對(duì)大家有所幫助！
感謝大家，這便是51CTO的獨(dú)家譯文《如何在jQuery Mobile上編寫(xiě)一個(gè)簡(jiǎn)單的應(yīng)用程序》。
原文名稱(chēng)：How to write a simple application on jQuery Mobile
【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請(qǐng)注明原文出處、作者及51CTO譯稿和譯者！】
【編輯推薦】
