進擊的網頁前端技術！

Page1 顯示民宿清單

• 打開 API頁籤 [民宿清單] [民宿資訊]

• 打開 EZoApp [JQMDesigner]

• 拉 json-listview 元件到面板中 , 設定 service's URL

• 根據民宿清單的json資料，設定 html 模板

  • storeName 店家名稱

  • addr 地址、iconURI 圖片、phone 電話

• 設定 js ，取得真正的民宿清單資料  value.list

Page2 顯示民宿資訊

• 新增一頁 detail Page

• 設定 <li> 加上 data-id="{{siID}}"

• 設定 <a href='#detail'

• 切換到 [JS] 區塊 , 增加 onRow function

• 確定能抓的到 siID , 並增加抓取 imgsrc

• 設定 var url = '….'; 取得民宿資訊

• copy $.getJSON 過來,設定 siID

• 設定真正的民宿資訊 value

• 切換到 [HTML] 頁籤，拖拉 [TEXT] , [IMG] 元件

• 切換到 [JS] ，設定回來的資料秀到畫面上 $('#name').html(data.name);

• 成功後，再加碼加上地圖元件

• 加碼演出 語音輸入