web app開發——使用jQuery Mobile建立餐廳訂餐應用

時間  2019-11-19
標籤 web app 開發 使用 jquery mobile 建立 餐廳 訂餐 應用 欄目 HTML 简体版
原文   原文鏈接

從零開始建立移動Web應用須要編程者學習專門的移動編程知識技能，還要有好比專門的編碼工具（好比專門爲iOS系統開發應用的工具），再有就是須要在每個平臺都進行測試部署（如Andr​​oid，iOS，BlackBerry，Windows Mobile等）。php

這樣的話，開發移動應用將花費很多，而另外一個解決方案是再使用HTML,CSS,Javascript，它們的特色是跨平臺和跨設備。此外，目前已 經出現了很多專爲移動web應用開發的專門框架，好比jQuery Mobile。jQuery Mobile是專門爲移動web應用開發而定製使用的， 只要掌握HTML,CSS，JavaScript和jQuery，就能夠很容易使用它進行移動web app開發，並且開發出來的應用能適應不一樣的平臺和 設備。css

在本文中，將指導用戶一步步實現一個移動訂餐的jQuery Mobile應用，閱讀對象爲有必定jQuery基礎的用戶。前端

本文的代碼能夠在此處能夠下載，而在線的效果能夠在這裏看到。jquery

防止丟失，代碼放了一份在個人網盤：http://pan.baidu.com/share/link?shareid=124587&uk=52813371web

應用概述ajax

咱們將建立的這個移動web應用，是一個能讓用戶選擇晚餐餐廳的應用，使用戶可以選擇想去什麼餐廳。要注意的是，本文只是講解了前端的技術應用，如 果要讓這個應用真正實際運行其來，還須要使用服務端的編程技術去動態更新餐廳的數據，由於篇幅問題因此本文就忽略該部分，用戶能夠按照實際須要進行改造。編程

 設計構圖瀏覽器

爲了方便咱們的設計，咱們看下整個應用的草圖，首先在第一屏中，顯示的是有什麼菜式可供選擇，而且要顯示應用的logo以下圖：app

在第一屏中，咱們將放置咱們的應用程序的標誌。而後，咱們以列表的形式列出各類菜式，每個列表項的前面，將是菜式的圖片。當用戶點每一個菜式的圖（或者是箭頭時），將引導到第二個頁面，將會讓用戶選擇到哪個小鎮選擇餐館，以下圖：框架

在第二屏中，用戶能夠選擇想要去餐館的城鎮。在城鎮的列表中，每一個城鎮的名稱後面都有一個數字，標出了能在這個城鎮中能夠預訂的餐館的數量。

因爲城鎮的名單能夠很長，咱們會提供一個過濾器，用戶能夠在過濾框中輸入城鎮的名稱，則會自動顯示篩選出符合的城鎮名稱，此外，用戶可使用後退按鈕返回到上一步。

當用戶點擊一個城鎮的時候，打開的是該城鎮的具體餐廳的名稱，以下圖：

如今，用戶能夠選擇要去就餐的餐廳。其中圖片是餐廳的縮略圖，用五角星顯示出餐廳的評級。當用戶再點右箭頭時，能夠查看這家餐廳的具體信息。以下圖：

餐廳的詳細信息界面是由三部分組成：餐廳詳細資料，聯繫方式，用戶的評級打分。首先在最上部，是餐廳的簡單介紹，包括了圖片和連接。而第二部分的聯 系信息，則顯示了餐館的地址，還包括一個調用Google Map查看餐館地址詳細信息的功能（固然要用戶的設備能鏈接上網而且安裝了google地 圖），此外還有一個Call us的按鈕，直接撥打餐館的電話。

最後一個部分還包括用戶對餐館等級的點評。

開始動手設計

下面咱們能夠開始動手設計程序了。首先是設計出jQuery Mobile的基本框架頁，其中最重要的是頁面的頭部，其中引入了jQuery Mobile的相關框架js，以下：

  1.    <!DOCTYPE HTML> 
  2.  
  3. <HTML> 
  4.  
  5. <head> 
  6.  
  7. <meta charset="UTF-8"> 
  8.  
  9. <title>Restaurant Picker</title> 
  10.  
  11. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  12.  
  13. <link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" /> 
  14.  
  15. <link rel="stylesheet" href="jquery.mobile-1.0.1.CSS" /> 
  16.  
  17. <script src="js/jquery-1.7.1.min.js"></script> 
  18.  
  19. <script src="js/jquery.mobile-1.0.1.min.js"></script> 
  20.  
  21. </head> 
  22.  

首先要注意的是，jQuery Mobile中使用的是HTML 5的doctype命名空間，並且jQuery Mobile中大量使用了 HTML 5的特性。接下來，要注意的是meta標籤中的爲viewport的屬性，主要是用來控制屏幕的顯示。若是不使用這個標記的話，因爲移動設備的 屏幕大小問題，會把頁面進行必定的壓縮，這樣就會致使走樣。若是設置了content="width=device-width, initial- scale=1"，則代表應用的頁面將完整利用設備的寬度，並且不進行縮放，比例依然爲1：1,initial-scale=1代表當頁面進行加載時依然 維持原來的比例。

接下來，分別引用了jQuery Mobiled的樣式CSS文件，以及jQuery 1.7的js文件（注意這個是必須的），jQuery Mobile框架自己的文件。

編寫第一個頁面

首先給出第一個頁面，也就是顯示菜式列表的頁面，以下代碼：

  1.    <body> 
  2.  
  3. <p data-role="page" id="home" data-theme="c"> 
  4.  
  5. <p data-role="content"> 
  6.  
  7. <p id="branding"> 
  8.  
  9. <h1>Restaurant Picker </h1> 
  10.  
  11. </p> 
  12.  
  13. <p class="choice_list"> 
  14.  
  15. <h1> What would you'd like to eat? </h1> 
  16.  
  17. <ul data-role="listview" data-inset="true" > 
  18.  
  19. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li> 
  20.  
  21. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li> 
  22.  
  23. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li> 
  24.  
  25. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li> 
  26.  
  27. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li> 
  28.  
  29. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="tradi.jpg"/> <h3> Something more traditional</h3></a></li> 
  30.  
  31. </ul> 
  32.  
  33. </p> 
  34.  
  35. </p> 
  36.  
  37. </p><!-- /page --> 
  38.  
  39. </body> 
  40.  
  41. </HTML> 
  42.  

jQuery Mobile和普通的HTML文檔頁面有一些區別。一個jQuery Mobile的界面中，能夠由多個頁面組成，每一個頁面之間使用 data-role=「page」來標示，頁面之間用anchors錨點進行控制。因此在上面的代碼中，使用 <p data- role=」page」 id=」home」 data-theme=」c」>來設置了data-role屬性，而且指定使用的是 jQuery Mobile的主題c的預約義樣式。

接下來使用data-role=「listview」屬性，定義了一個列表，data-insert=true屬性指定了列表的樣式是一個圓角的列表，而且每一個列表項都有一個箭頭圖標。在列表項中，產生了多個菜式的圖片列表項，而且使用

data-transition定義了以幻燈方式跳轉到下一頁的效果。最後咱們的效果圖以下：

   

設計第二個頁面：去哪就餐？

接下來，當用戶點了喜歡要吃的菜式後，則會跳轉到下一頁以列表的形式顯示能就餐的城鎮，代碼以下：

  1.  
  2.  
  3.    <body> 
  4.  
  5. <p id="choisir_ville" data-role="page" data-add-back-btn="true"> 
  6.  
  7. <p data-role="header"> 
  8.  
  9. <h1> Restaurant Picker</h1> 
  10.  
  11. </p> 
  12.  
  13. <p data-role="content"> 
  14.  
  15. <p class="choice_list"> 
  16.  
  17. <h1> In which town do you want to eat? </h1> 
  18.  
  19. <ul data-role="listview" data-inset="true" data-filter="true" > 
  20.  
  21. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li> 
  22.  
  23. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li> 
  24.  
  25. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li> 
  26.  
  27. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li> 
  28.  
  29. …  
  30.  
  31. </ul> 
  32.  
  33. </p> 
  34.  
  35. </p> 
  36.  
  37. </p><!-- /page --> 
  38.  
  39. </body> 
  40.  
  41.         

這裏咱們的頁面結構其實跟以前的差異不是太大，首先是設置了新的id(id="choisir_ville"）,用來區別第一頁，而且增長了data-add-back-btn＝「true」，這將增長一個回退的按鈕，這樣能夠點這個按鈕返回到前一頁，

而且這裏添加了data-role=「header」中，設置的是頁面的頭部樣式文字。

而在城鎮列表中，經過添加了data-filter=「true」，這樣當用戶在列表框上輸入部分字母后，能夠當即篩選出其城鎮。在列表項的最右方，經過建立一個

<span class>來顯示出一個圓圈，其中顯示的是這個城鎮的餐館的數量。第二個頁面的效果以下圖：

    

建立第三個頁面：選擇餐館

接下來，當進入某個城鎮後，能夠看到第三個頁面，會顯示該城鎮中有什麼餐館可供選擇的，代碼以下：

  1.  
  2.  
  3.     <body> 
  4.  
  5. <p id="choisir_restau" data-role="page" data-add-back-btn="true"> 
  6.  
  7. <p data-role="header"> 
  8.  
  9. <h1> Restaurant Picker</h1> 
  10.  
  11. </p> 
  12.  
  13. <p data-role="content"> 
  14.  
  15. <p class="choice_list"> 
  16.  
  17. <h1> Please choose a restaurant.</h1> 
  18.  
  19. <ul data-role="listview" data-inset="true" > 
  20.  
  21. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li> 
  22.  
  23. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li> 
  24.  
  25. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li> 
  26.  
  27. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li> 
  28.  
  29. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li> 
  30.  
  31. </ul> 
  32.  
  33. </p> 
  34.  
  35. </p> 
  36.  
  37. </p><!-- /page --> 
  38.  
  39. </body> 
  40.  

這個頁面的結構跟第一個頁面有點象。但這裏多了的是每家餐館的評級。這個評級實際上是在CSS中，增長了p元素，而且設置了多 個.classement的樣式，好比.one,.two,.three等分別表明對應的評級的樣式，在本文的稍後，將詳細講解如何應用CSS樣式。第三 個頁面的實際運行效果以下圖：

   

餐館詳細信息

接下來，按前文說的，咱們將餐館的詳細信息劃分爲三個部分，先看代碼實現：

  1.  
  2.  
  3. <body> 
  4.  
  5. <p id="restau" data-role="page" data-add-back-btn="true"> 
  6.  
  7. <p data-role="header"> 
  8.  
  9. <h1> Restaurant Picker</h1> 
  10.  
  11. </p>   
  12.  
  13. <p data-role="content"> 
  14.  
  15. <p class="ui-grid-a" id="restau_infos"> 
  16.  
  17. <p class="ui-block-a"> 
  18.  
  19. <h1> Le Mouffetard</h1> 
  20.  
  21. <p><strong>  Restaurant bar in the center of Strasbourg</strong></p> 
  22.  
  23. <p> On the menu: </p> 
  24.  
  25. <ul> 
  26.  
  27. <li> Milkshake with chocolat</li> 
  28.  
  29. <li> Planchettes </li> 
  30.  
  31. <li> Leek pie </li> 
  32.  
  33. </ul> 
  34.  
  35. </p> 
  36.  
  37. <p class="ui-block-b"> 
  38.  
  39. <p><img src="restau01.jpg" alt="jeannette photo"/></p> 
  40.  
  41. <p><a href="http://www.google.fr" rel="external" data-role="button"> See our website</a></p> 
  42.  
  43. </p> 
  44.  
  45. </p><!-- /grid-a --> 
  46.  
  47. <hr/> 
  48.  
  49. <p class="ui-grid-a" id="contact_infos"> 
  50.  
  51. <p class="ui-block-a"> 
  52.  
  53. <h2> Contact us</h2> 
  54.  
  55. <p>30 Rue des Tonneliers</p> 
  56.  
  57. <p> 67000 Strasbourg </p> 
  58.  
  59. </p> 
  60.  
  61. <p class="ui-block-b"> 
  62.  
  63. <img src="01_maps.jpg" alt="plan jeanette"/> 
  64.  
  65. </p> 
  66.  
  67. </p><!-- /grid-a --> 
  68.  
  69. <p id="contact_buttons"> 
  70.  
  71. <a href="http://maps.google.fr/maps?q=jeannette+et+les+cycleux&hl=fr&sll=46.75984,1.738281&sspn=10.221882,18.764648&hq=jeannette+et+les+cycleux&t=m&z=13&iwloc=A" data-role="button" data-icon="maps"> Find us on Google Maps </a> 
  72.  
  73. <a href="tel:0388161072"  data-role="button" data-icon="tel"> Call us </a> 
  74.  
  75. </p> 
  76.  
  77. <hr/> 
  78.  
  79. <p id="notation"> 
  80.  
  81. <form> 
  82.  
  83. <label for="select-choice-0" class="select"><h2> User rating </h2></label> 
  84.  
  85. <select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" > 
  86.  
  87.    <option value="one" class="one"> Not good at all </option> 
  88.  
  89.    <option value="two" class="two">Average </option> 
  90.  
  91.    <option value="three" class="three">Pretty good </option> 
  92.  
  93.    <option value="four" class="four"> Excellent </option> 
  94.  
  95. </select> 
  96.  
  97. </form> 
  98.  
  99. </p> 
  100.  
  101. </p> 
  102.  
  103. </p><!-- /page --> 
  104.  
  105. </body> 
  106.  

其運行效果以下圖：

  

對於餐廳的詳細信息，咱們使用的是jQuery Mobile兩列的模板。要建立一個兩列的界面 ，咱們只須要在上面的代碼中，使用ui- block-a，ui-block-b這樣的樣式便可。而咱們在上面的代碼中，對於按鈕和連接都加上了rel＝「external」的設置，也就是讓 jQuery Mobile不使用ajax方式打開這些鏈結，而是直接經過瀏覽器進行打開。

而另一個值得注意的地方，是在電話和地圖的按鈕中，經過指定了data-icon=」tel」和data-icon=」maps」來設置了電話和 地圖的兩個按鈕圖標。而對於google map的這個連接，在有的移動設備上可能沒法直接識別，但通常來講，只要安裝了google map,則當點這 個連接時，會自動調用google map查找出這個地方的具體位置信息。此外，象href=tel:0388161072這樣的連接方式，在傳統瀏覽器 上是不能運行的，只有在智能手機上運行，當點這個連接時，會自動撥打這個電話。

最後一部分是用戶評級。爲此，咱們將使用一個簡單的下拉菜單，注意這裏使用了

data-native-menu="false"屬性設置了能夠對下拉菜單的樣式進行設置，這裏的四個等級，能夠看到將使用不一樣的class樣式 進行修飾，這個下文中講解CSS樣式是，會看到將使用五角星的樣式去進行修飾，而不是自帶的jQuery Mobile的樣式。

接下來，咱們就開始講解使用CSS樣式美化訂餐應用

使用自定義CSS樣式

要在jQuery Mobile中使用自定義樣式的話，能夠有兩個辦法：或者是移除jquery.mobile-1.0.1css，本身從新編寫一 個，或者是本身增長一些CSS，其中有的部分是複用原來的jQuery Mobile的js。若是要方便的話，可使用jQuery Mobile提供的主題設計器去進行設計，這將減小不少的工做量。

先來看下，對於全局的CSS的樣式設置，以下代碼：

  1.  
  2.  
  3.  /*** general styling */ 
  4.  
  5. .ui-page.ui-body-c{  
  6.  
  7. background:url(images/bg.png);  
  8.  
  9. box-shadow: 0px 0px 30px 5px rgba(107, 105, 105, 0.3) inset,  
  10.  
  11. 0px 0px 0px 1px rgba(107, 105, 105, 0.4) inset;  
  12.  
  13. }  
  14.  
  15. .ui-icon.ui-icon-arrow-r {  
  16.  
  17. background-color:rgb(136, 111, 110);  
  18.  
  19. }  
  20.  
  21. .ui-corner-all,  
  22.  
  23. .ui-corner-top,  
  24.  
  25. .ui-corner-bottom,  
  26.  
  27. .ui-corner-tl,  
  28.  
  29. .ui-corner-tr,  
  30.  
  31. .ui-corner-bl,  
  32.  
  33. .ui-header .ui-btn-corner-all,  
  34.  
  35. .ui-listview-filter .ui-btn-corner-all,  
  36.  
  37. #restau_infos .ui-btn-corner-all,  
  38.  
  39. #contact_buttons .ui-btn-corner-all,  
  40.  
  41. #notation .ui-btn-corner-all{  
  42.  
  43. border-radius:0.2em;  
  44.  
  45. }  
  46.  
  47. .ui-btn-active {  
  48.  
  49. background: #654644; /* Old browsers */ 
  50.  
  51. background: -moz-linear-gradient(top, #654644 0%, #331c1b 100%); /* FF3.6+ */ 
  52.  
  53. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#654644), color-stop(100%,#331c1b)); /* Chrome,Safari4+ */ 
  54.  
  55. background: -webkit-linear-gradient(top, #654644 0%,#331c1b 100%); /* Chrome10+,Safari5.1+ */ 
  56.  
  57. background: -o-linear-gradient(top, #654644 0%,#331c1b 100%); /* Opera 11.10+ */ 
  58.  
  59. background: -ms-linear-gradient(top, #654644 0%,#331c1b 100%); /* IE10+ */ 
  60.  
  61. background: linear-gradient(top, #654644 0%,#331c1b 100%); /* W3C */ 
  62.  
  63. color:#fff !important;  
  64.  
  65. }  
  66.  
  67. .ui-content .choice_list .ui-btn-active .ui-link-inherit,  
  68.  
  69. .ui-btn-down-c a.ui-link-inherit,  
  70.  
  71. #home .ui-btn-down-c a.ui-link-inherit{  
  72.  
  73. color:#fff !important;  
  74.  
  75. }  
  76.  
  77. img{  
  78.  
  79. max-width: 100%;  
  80.  
  81. height: auto; width: auto;  
  82.  
  83. -webkit-box-sizing: border-box;  
  84.  
  85. -moz-box-sizing: border-box;  
  86.  
  87. box-sizing: border-box;  
  88.  
  89. }  
  90.  
  91. .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {  
  92.  
  93. width: 48%;  
  94.  
  95. padding:1%;  
  96.  
  97. }  
  98.  

爲了在app應用的第一屏就能吸引住用戶，所以要增長漂亮的logo，下面是咱們指望實現的效果圖：

  

設置的CSS以下：

  1.       /*** home **/ 
  2.  
  3. #branding{  
  4.  
  5. background:url(images/logo.png) no-repeat;  
  6.  
  7. width:322px;  
  8.  
  9. height:165px;  
  10.  
  11. text-indent:-999px;  
  12.  
  13. font-size:0px;  
  14.  
  15. margin:-10px auto 0 auto;  
  16.  
  17. border-bottom:1px solid rgba(65, 38, 37, 0.6);  
  18.  
  19. }  
  20.  
  21. .choice_list h1{  
  22.  
  23. margin-top:30px;  
  24.  
  25. font-size:18px;  
  26.  
  27. color:rgb(65, 38, 37);  
  28.  
  29. font-weight:normal;  
  30.  
  31.  font-style:italic;  
  32.  
  33. padding:5px 0 6px 50px;  
  34.  
  35. background:url(images/pagination.png) no-repeat;  
  36.  
  37. }  
  38.  
  39. #home .choice_list h1{  
  40.  
  41. background-position: 0 -16px;  
  42.  
  43. }  
  44.  
  45.  #home .choice_list h3{  
  46.  
  47.  padding-top:10px;  
  48.  
  49. color:rgb(63, 41, 39);  
  50.  
  51. }  
  52.  
  53. #home .choice_list .ui-btn-active a.ui-link-inherit h3{  
  54.  
  55.  color:#fff;  
  56.  
  57. }  
  58.  
  59. .choice_list img{  
  60.  
  61. padding:3px;  
  62.  
  63. }  
  64.  

對第二個頁面設計的CSS以下：

  1.  
  2.  
  3. /* title bar */ 
  4.  
  5. .ui-header.ui-bar-a{  
  6.  
  7. background:url(images/header_bg.png);  
  8.  
  9. }  
  10.  
  11. .ui-header .ui-title {  
  12.  
  13. text-indent:-9999px;  
  14.  
  15. font-size:0px;  
  16.  
  17. background:url(images/header_logo.png) no-repeat 69% 5px ;  
  18.  
  19. height:33px;  
  20.  
  21. padding:5px 0 5px 50px;  
  22.  
  23. margin:0px;  
  24.  
  25. }  
  26.  
  27. .ui-header  .ui-btn-up-a  {  
  28.  
  29. background:rgba(255, 255, 255, 0.1);  
  30.  
  31. box-shadow:none;  
  32.  
  33. }  
  34.  
  35. .ui-header  .ui-btn-hover-a {  
  36.  
  37. background:rgba(0, 0, 0, 0.3);  
  38.  
  39. box-shadow:none;  
  40.  
  41. }  
  42.  

其運行後的效果以下圖：

第三個頁面中的選擇餐廳的效果圖以下：

   

CSS以下：

  1.    /** choix du restaurant **/ 
  2.  
  3. #choisir_restau .choice_list h1{  
  4.  
  5. background-position: 0 -132px;  
  6.  
  7. margin:10px auto 20px auto;  
  8.  
  9. }  
  10.  
  11. #choisir_restau .choice_list a{  
  12.  
  13. padding-top:10px;  
  14.  
  15. color:rgb(63, 41, 39);  
  16.  
  17. }  
  18.  
  19. #choisir_restau .classement{  
  20.  
  21. display:inline-bloc;  
  22.  
  23. background:url(images/pagination.png) no-repeat 0 -182px;  
  24.  
  25. height:22px;  
  26.  
  27. text-indent:-999px;  
  28.  
  29. font-size:0px;  
  30.  
  31. }  
  32.  
  33. #choisir_restau .one{  
  34.  
  35. width:30px;  
  36.  
  37. }  
  38.  
  39. #choisir_restau .two{  
  40.  
  41. width:55px;  
  42.  
  43. }  
  44.  
  45. #choisir_restau .three{  
  46.  
  47. width:75px;  
  48.  
  49. }  
  50.  
  51. #choisir_restau .four{  
  52.  
  53. width:99px;  
  54.  
  55. }  

這裏，能夠看到.one,.two,.three,.four都是以前說到的，對餐廳評分等級時所用到的CSS。

最後一頁中的關於餐廳詳細信息的頁面效果，以下圖：

   

其具體的css代碼請參考附件中的下載文件。這裏值得一提的是，在附件文件中的addstarscript.js中，其代碼爲：

  1. $( '#restau' ).live( 'pageinit',function(event){  
  2.  
  3. var SelectedOptionClass = $('option:selected').attr('class');  
  4.  
  5. $('p.ui-select').addClass(SelectedOptionClass);  
  6.  
  7. $('#note_utilisateur').live('change', function(){  
  8.  
  9.   $('p.ui-select').removeClass(SelectedOptionClass);  
  10.  
  11.   SelectedOptionClass = $('option:selected').attr('class');  
  12.  
  13. $('p.ui-select').addClass(SelectedOptionClass);  
  14.  
  15. });  
  16.  

其含義爲當用戶點擊評分的下拉菜單時，將會彈出等級評分的窗口（如上圖中的Not good at all,Average等），當用戶選擇了某個 評分等級後，jQuery Mobile的change事件中將用戶所選擇的等級的CSS加載到頁面中顯示（也就是顯示用戶所選擇等級的星星數目），同時 關閉掉彈出的等級選擇窗口。

最後，爲了能適應在iOs設備上能夠建立桌面的快捷方式，一個好的體驗是建立對應的不一樣尺寸的小圖標，以下：

  1.   <link rel="apple-touch-icon" href="images/launch_icon_57.png" /> 
  2.  
  3. <link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" /> 
  4.  
  5. <link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" /> 

小結

在本文中，帶領你們初步體驗瞭如何使用jQuery Mobile編寫了一個簡單的訂餐應用，讀者能夠從中體驗到其中的編程方法，也能夠根據實際進行適當的擴展。

【編輯推薦】

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程