jQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile

on

  • 2,792 views

前端讀書會分享之內容

前端讀書會分享之內容

Statistics

Views

Total Views
2,792
Slideshare-icon Views on SlideShare
2,792
Embed Views
0

Actions

Likes
0
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery Mobile jQuery Mobile Presentation Transcript

    • 利用 JQUERY MOBILE 架構產生跨平台的 APPJQUERY MOBILE + THEMEROLLER + CODIQA +ELECTRICPLUM + WEINRE divaka / 2012/05/28
    • 專案說明 電動車電池監控平台 Web Based System  需具備管理功能 App  監控資訊用
    • 專案開始了..反正網站都已經做了, 客戶又要求 APP, 不如再花點時間做給它吧 !
    • APP 開發環境 開發人數:1 開發架構:軟硬整合專案 開發時間:未知 ~ 3個月  專案涉及四個跨國團隊 開發 Device:尚未採購,先用老闆的..
    • 這…
    • 專案 Demo Web  http://124.9.6.27:8080/sbma/entrance.jsp APP  http://124.9.6.27:8080/sbma/mobile/index.html
    • ELECTRICPLUMHTTP://WWW.ELECTRICPLUM.COM/SIMULATOR.ASPX目前用起來最順手的 APP 模擬軟體
    • 可自選 iOS Device
    • 不過.. 跟實際 iOS Device 的設備還是不太一樣 iOS Device  Touch Behavior  No Scrollbar  Re-render Component 所以還是搞台 iPad, iPhone 來比較實際一點..
    • JQUERY MOBILEHTTP://JQUERYMOBILE.COM/快速開發跨平台手機 APP 的工具
    • 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.
    • jQuery Mobile 優點 jQuery 延伸, 學習成本較低 免費, Open-Source, 輕量 可與電腦共用程式碼 不需開發者帳戶即可測試 跨平台 跨 Device (跨瀏覽器解析度)  Responsive Design
    • Responsive Design 自動根據瀏覽的 Device 呈現最佳瀏 覽體驗
    • jQuery Mobile 缺點 效率較原生 Code 差  維護與效率的 Trade-off 無法操作手機硬體  此部份可靠 phoneGap 等架構補強 必須連上網路 較難商品化  效適用於內容型 App
    • jQuery Mobile 案例 http://www.jqmgallery.com/
    • jQuery UI Componenthttp://jquerymobile.com/test/
    • 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
    • JQUERY MOBILELET’S DO IThttp://kuro.tw/blog/2012/02/15/hello-jquery-mobile-jquery-mobile-2
    • 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
    • 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 -->
    • 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 -->
    • 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 -->
    • 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 -->
    • Step5 加入圖片 (Thumbnails)  在每個 li 的一開始加上一個 <img> , jQuery Mobile 就會自動把它放在最左邊當做縮圖。 <li> <img src="icon/ADOBE - Photoshop_48x48-32.png" /> <h1>Photoshop</h1> <p>Description</p> </li>
    • Step6 加入 Split Button 將 list 內的資料利用 <a> 標籤拆成兩組  data-icon=“gear“ 是內建的 iconSet (參考這) <li> <a href="#" oncilck=“#">ITEM A</a> <a href="#" data-icon="gear"></a> </li>
    • 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>
    • 小技巧 覆蓋原本的 CSS  打開 FireFox 查看該元素的 class 直接另寫 CSS 定義 隱藏工具列 & 網址列  請參見以下討論串  http://stackoverflow.com/questions/9798158/how- does-jquery-mobile-hide-mobile-safaris- addressbar
    • THEMEROLLERHTTP://JQUERYUI.COM/THEMEROLLER/快速建立客製化 jQuery Mobile UI Theme
    • 簡介 類似 jQuery UI 的 Mobile 版 自訂 font, corner radius, header, toolbar, content 的 CSS
    • CODIQAHTTP://WWW.CODIQA.COM/視覺化編輯 jQuery Mobile-based APP
    • Let’s See
    • 但是.. 編輯器 BUG 還很多 自動產生的程式碼有點怪 只用來產生最初的骨架用  原本的 library 只有純 JS code
    • WEINREHTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/手機版瀏覽器的 FireBug (追蹤 MobileJavaScript)
    • 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
    • 請參考以下文章 [教學]Node.js 安裝教學. node.JS install 使用 Weinre 遠端 Debug 你的手機版網頁 (Mobile Web)
    • 測試工具列表 http://www.mobilexweb.com/emulators
    • FUTURE WORKPhoneGap 使用 Web Code 操作手機底層硬體