Your SlideShare is downloading. ×
0
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Mobile

2,703

Published on

前端讀書會分享之內容

前端讀書會分享之內容

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,703
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. 利用 JQUERY MOBILE 架構產生跨平台的 APPJQUERY MOBILE + THEMEROLLER + CODIQA +ELECTRICPLUM + WEINRE divaka / 2012/05/28
  2. 專案說明 電動車電池監控平台 Web Based System  需具備管理功能 App  監控資訊用
  3. 專案開始了..反正網站都已經做了, 客戶又要求 APP, 不如再花點時間做給它吧 !
  4. APP 開發環境 開發人數:1 開發架構:軟硬整合專案 開發時間:未知 ~ 3個月  專案涉及四個跨國團隊 開發 Device:尚未採購,先用老闆的..
  5. 這…
  6. 專案 Demo Web  http://124.9.6.27:8080/sbma/entrance.jsp APP  http://124.9.6.27:8080/sbma/mobile/index.html
  7. ELECTRICPLUMHTTP://WWW.ELECTRICPLUM.COM/SIMULATOR.ASPX目前用起來最順手的 APP 模擬軟體
  8. 可自選 iOS Device
  9. 不過.. 跟實際 iOS Device 的設備還是不太一樣 iOS Device  Touch Behavior  No Scrollbar  Re-render Component 所以還是搞台 iPad, iPhone 來比較實際一點..
  10. JQUERY MOBILEHTTP://JQUERYMOBILE.COM/快速開發跨平台手機 APP 的工具
  11. jQuery Mobile 簡介 A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
  12. jQuery Mobile 優點 jQuery 延伸, 學習成本較低 免費, Open-Source, 輕量 可與電腦共用程式碼 不需開發者帳戶即可測試 跨平台 跨 Device (跨瀏覽器解析度)  Responsive Design
  13. Responsive Design 自動根據瀏覽的 Device 呈現最佳瀏 覽體驗
  14. jQuery Mobile 缺點 效率較原生 Code 差  維護與效率的 Trade-off 無法操作手機硬體  此部份可靠 phoneGap 等架構補強 必須連上網路 較難商品化  效適用於內容型 App
  15. jQuery Mobile 案例 http://www.jqmgallery.com/
  16. jQuery UI Componenthttp://jquerymobile.com/test/
  17. jQuery Mobile 相關資源 官方  Forum  Blog  Resources Tutorial  jQuery Mobile Tutorial: Creating a Restaurant Picker Web App  http://msdn.microsoft.com/zh-tw/hh875190 文章  使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 簡報  jQuery Mobile  Mobile Web & HTML5 Performance Optimization
  18. JQUERY MOBILELET’S DO IThttp://kuro.tw/blog/2012/02/15/hello-jquery-mobile-jquery-mobile-2
  19. jQuery Mobile Let’s do it Download jQuery Mobile Library  http://jquerymobile.com/download/ 或引入以下程式碼 (CDN)  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile- 1.0.1.min.css" />  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> Download Basic Project (dropbox)  https://www.dropbox.com/home/front_end_study/20 12_05_28%20(%E4%B8%80)/divaka
  20. Step1 產生基本架構 (List-View)  主要是用 data-role 來定義各種樣式 <div data-role="page" id="page-01"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer"> <h4>Footer content</h4> </div><!-- /footer --> </div><!-- /page -->
  21. Step2 建立資料清單與標頭 <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">Overview</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> </ul> </div><!-- /content -->
  22. Step3 建立圓弧群組分類 <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Overview</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> </ul> </div><!-- /content -->
  23. Step4 多層清單 (Nested list)  <ul> 是無序清單 , <ol> 是有序清單 <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Overview</li> <li>ITEM A <ol> <li>A-1</li> <li>A-2</li> <li>A-3</li> </ol> </li> </ul> </div><!-- /content -->
  24. Step5 加入圖片 (Thumbnails)  在每個 li 的一開始加上一個 <img> , jQuery Mobile 就會自動把它放在最左邊當做縮圖。 <li> <img src="icon/ADOBE - Photoshop_48x48-32.png" /> <h1>Photoshop</h1> <p>Description</p> </li>
  25. Step6 加入 Split Button 將 list 內的資料利用 <a> 標籤拆成兩組  data-icon=“gear“ 是內建的 iconSet (參考這) <li> <a href="#" oncilck=“#">ITEM A</a> <a href="#" data-icon="gear"></a> </li>
  26. Step7  加入超連結 (HyperLink) 到另一頁  Data-transition 是指定動畫方式 (樣式可參考這裡)<li> <a href="#page-02">page2</a></li><div data-role="page" id="page-02"> <div data-role="content"> <ul data-role="listview" data-inset="true" id="another"> <li data-role="list-divider">another View</li> <li><a href=“page-01" data-transition="slidedown"> view2 </a> </li> </ul> </div><!-- /content --></div>
  27. 小技巧 覆蓋原本的 CSS  打開 FireFox 查看該元素的 class 直接另寫 CSS 定義 隱藏工具列 & 網址列  請參見以下討論串  http://stackoverflow.com/questions/9798158/how- does-jquery-mobile-hide-mobile-safaris- addressbar
  28. THEMEROLLERHTTP://JQUERYUI.COM/THEMEROLLER/快速建立客製化 jQuery Mobile UI Theme
  29. 簡介 類似 jQuery UI 的 Mobile 版 自訂 font, corner radius, header, toolbar, content 的 CSS
  30. CODIQAHTTP://WWW.CODIQA.COM/視覺化編輯 jQuery Mobile-based APP
  31. Let’s See
  32. 但是.. 編輯器 BUG 還很多 自動產生的程式碼有點怪 只用來產生最初的骨架用  原本的 library 只有純 JS code
  33. WEINREHTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/手機版瀏覽器的 FireBug (追蹤 MobileJavaScript)
  34. DEMO//下載 Libraryhttp://nodejs.org/#download//在目標網頁加入以下 script , 記得換 IP<script src="http://localhost:8080/target/target-script-min.js#anonymous" ></script>//執行 weinre servercmd > node weinre//開啟以下 IP,再點開要 debug 的 Browser APPhttp://localhost:8080/client/#anonymous//會看到以下畫面,代表連線成功http://kuro.tw/sites/default/files/images/weinre-6.png
  35. 請參考以下文章 [教學]Node.js 安裝教學. node.JS install 使用 Weinre 遠端 Debug 你的手機版網頁 (Mobile Web)
  36. 測試工具列表 http://www.mobilexweb.com/emulators
  37. FUTURE WORKPhoneGap 使用 Web Code 操作手機底層硬體

×