Microsoft PowerPoint - 11 jQuery Mobile 介紹與程式設計

Size: px

Start display at page:

Download "Microsoft PowerPoint - 11 jQuery Mobile 介紹與程式設計"

享秘莱
6 years ago
Views:

1 計劃名稱 : 104 年度教育部資通訊軟體創新人才推升推廣計畫跨校資源中心 : 雲端運算 ( 國立中山大學 ) 課程名稱 : 網路及平台服務 Part1- 課程教材教材名稱 :jquery Mobile 介紹與程式設計國立高雄大學資訊工程學系張保榮教授

2 大綱認識 jquery 跨平台行動裝置網頁 jquery Mobile jquery Mobile UI 元件

3 介紹在行動式裝置普及化的現在, 要開發一個能夠跨行動式裝置的原生應用程式 (Native App) 是非常不容易的, 除了需要了解不同的作業系統的差異 (Ex: Windows Phone Android ios), 還需要了解各種程式開發技術 (Ex:.NET JAVA Object C) 寫一套軟體就要寫三四種版本, 對我們程式開發者來說, 除了形成了一個很大的進入門檻之外, 也增加了巨大的負擔 Source:

4 介紹 ( 續 ) 一般來說, 我們在各種行動式裝置上所能得到資訊的方式, 除了原生應用程式之外, 也能夠由網頁上得到 ( 例如, 網路訂位論壇資訊 ), 而其實網頁是能夠解除各家不同行動裝置使用上限制的最佳途徑, 當然, 網頁的功能有侷限 ( 如, 電子羅盤, 相機, 重力偵測 ), 但是如果針對一般性的提供資訊的應用程式來說, 使用網頁開發一種很好的選擇但是以往的網頁應用程式介面, 其實大部分都不太適合現今的行動裝置所使用, 畫面不是過大, 就是因為內容過多而導致載入速度不佳,- 甚至是瀏覽方式並不適合行動式裝置, 有鑑於此, jquery 就推出一套新的函式庫 :jquery Mobile Source:

5 介紹 ( 續 ) 簡單的說,jQuery Mobile 希望能夠就是統一市面上常見的行動式裝置的使用者介面系統它是一個在 jquery 與 jquery UI 的基礎下, 一個有彈性且易主題化的一個輕量級函式庫而它做法上關鍵的差別, 就是在於目標是各種行動裝置, 希望能夠讓各種行動裝置的瀏覽器都能夠支援, 就如同對於桌上型的瀏覽器一般, 並且在使用網頁時, 能夠以接近一般原生應用程式的經驗來操作 (Ex: 觸碰或滑動 ) Source:

6 認識 JQuery jquery 是開放原始碼的 JavaScript 函式庫 (Library) 特色 : 簡化 DOM 文件的操作, 輕鬆選取物件, 並以簡潔的程式完成想做的事情透過 jquery 指定 CSS 屬性值, 達到想要的特效與動畫效果強化非同步傳輸 (AJAX) 以及事件 (Event) 功能, 輕鬆存取遠端資料文件物件模型 (Document Object Model,DOM) 是給 HTML 與 XML 文件使用的一組 API 它提供了文件的結構表述 (representation), 讓你可以更動其中的內容及可見物其本質是建立網頁與 Script 或程式語言溝通的橋樑

7 引用 jquery 函式庫下載 jquery 網址 : 有兩種版本 : jquery min.js 壓縮版本, 檔案較小 ; jquery js 是程式碼未壓縮的開發版本, 檔案較大, 適合程式開發人員使用使用 CDN 載入 jquery jquery V2.x 之後的版本不支援 IE6/7/8 jquery CDN (Content Delivery Network) 的 URL, 可以在網頁最下方找到, 將 URL 加入網頁 HTML 的 <head> 標記之間 <head> <link rel="stylesheet" href=" min.css"> <script src="//code.jquery.com/jquery min.js"></script> <script src="//code.jquery.com/jquery migrate min.js"></script> </head>

8 jquery 基本架構 ready() 方法來確認 DOM 已經全部載入 jquery ( document ).ready(function() { // 程式碼 }); jquery 程式碼是由 jquery 開始, 也可以用錢字號 $ 來代替 $( document ).ready(function() { // 程式碼 }); 更簡潔的寫法 : $(function(){ // 程式碼 });

9 jquery 選擇器 jquery 選擇器是用來選擇 HTML 元件, 可以透過 HTML 標記名稱 id 屬性及 class 屬性等等來取得元件標記名稱選擇器例如想要選擇所有的 <p> 元件 $("p") id 選擇器 (#) 例如想要選擇 id 屬性為 test 的元件 $("#test") class 選擇器 (.) 例如想要選擇 class 屬性為 test 的元件 $(".test") 選擇器組合使用例如想要找出所有 <P> 標記 class 屬性為 test 的元件 $("p.test")

10 常用的選擇器及搜尋法表示法說明 $("*") 選取所有元件 $(this) $("p:first") $("[href]") $("tr:even") $("tr:odd") $("div p") $("div").find("p") $("div").next("p") 選取目前作用中的元件選取第一個 <p> 元件選取有 href 屬性的元件選取偶數 <tr> 元件選擇奇數 <tr> 元件選擇 <div> 元件裡面包含的 <p> 元件搜尋 <div> 元件裡的 <p> 元件搜尋 <div> 元件之後的第一個 <p> 元件 $('li').eq(2) 搜尋第 3 個 <li> 元件,eq() 裡是輸入元件的位置, 只能輸入整數, 最小為 0

11 設定 CSS 樣式屬性使用 css() 方法來改變 CSS 樣式例如指定 <div> 元件的背景色為紅色 $("div").css("background-color", "red"); jquery 語法與 JavaScript 語法一樣並不限定使用單引號和雙引號, 只不過必須要成對出現, 例如 "div" 'div' 都是對的, 而 "div' 是不被接受的

12 跨平台行動裝置網頁 jquery Mobile 統一目前行動裝置的使用者介面 (UI) 認識 jquery Mobile 建立於 jquery 與 jquery UI 的基礎, 提供行動裝置跨平台的使用者介面函式庫 jquery Mobile 優點 : 跨平台容易學習提供多種函式庫多樣的佈景主題及 ThemeRoller 工具

13 jquery Mobile 作業流程新增 HTML 文件宣告 HTML5 document 載入 jquery mobile css jquery 與 jquery mobile 程式庫使用 jquery mobile 所定義的 HTML 標準, 撰寫網頁架構及內容

14 行動裝置模擬器 Mobilizer 網址 : Opera Mobile Emulator 網址 : 開啟現有瀏覽器也可代替模擬器

15 第一個 jquerymobile 網頁引用 jquerymobile 方式有兩種, 一種是到 jquerymobile 官網直接下載引用, 另一種是使用 CDN 來載入程式庫 CDN 方式引用, 網址 : <head> <title>jquery Mobile 建立的第一個網頁 </title>  <link rel="stylesheet" href=" /> <script src=" <script src=" min.js"></script> </head>

16 jquery Mobile 頁面架構 jquery Mobile 的網頁是由 header content 與 footer 三個區域組成利用 <div> 標記加上 data-role 屬性用來定義行動裝置的頁面架構 <div data-role="page"> <div data-role="header"> 標題 (header) </div> <div data-role="content"> 網頁內容 (content) </div> <div data-role="footer"> 頁尾 (footer) </div> </div>

17 切換頁面 jquery Mobile 網頁是以頁 (page) 為單位, 一個 HTML 文件可以是一個頁面, 也可以放多頁 (multi-page), 瀏覽器每次只會顯示一頁, 在頁面加上超連接, 方便使用者切換頁面

18 頁面切換範例 :ch10_05.htm <! 第一頁 > <div data role="page" data title=" 第一頁 " id="first"> <div data role="header"> <h1> 第一頁標題 (header)</h1> </div> <div data role="content" id="content"> <a href="#second"> 按我到第二頁 </a> </div> <div data role="footer"> <h4> 頁尾 </h4> </div> </div> <! 第二頁 > <div data role="page" data title=" 第二頁 " id="second"> <div data role="header"> <h1> 第二頁 </h1> </div> <div data role="content" id="content"> <a href="#first"> 回到第一頁 </a> </div> <div data role="footer"> <h4> 頁尾 </h4> </div> </div>

19 Viewport meta 標記調整頁面比例 <meta name="viewport" content="width=device-width, initial-scale=1"> width: 控制寬度, 可以指定的一個寬度數值或輸入 devicewidth 表示寬度隨著設備寬度自動調整 width:[ 數字 ] 或 device-width height: 控制高度, 或輸入 device-height initial-scale: 初始縮放比例, 最小 0.25, 最大 5 minimum-scale: 允許使用者縮放的最小比例, 最小 0.25, 最大 5 maximum-scale: 允許使用者縮放的最大比例, 最小 0.25, 最大 5 user-scalable: 是否允許使用者手動縮放, 可以輸入 0 或 1 也可以輸入 yes 或 no

20 jquery Mobile UI 元件文字方塊 (text input) <input type="text" name="uname" id="uid" value="" /> 範圍滑動欄位 (range Slider) <input type="range" name="rangebar" id="rangebarid" value="25" min="0" max="100" data-highlight="true" />

21 認識 UI 元件單選 (Radio button) <fieldset data-role="controlgroup"> <legend> 最喜歡的水果 :</legend> <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> 蘋果 </label> <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> 香蕉 </label> <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> 檸檬 </label> </fieldset> <fieldset> 標記加上 data-role= controlgroup 屬性可設定為群組

22 認識 UI 元件 ( 續 ) 核取方塊 (Check box) /* 第一種寫法 */ <label><input type="checkbox" name="checkbox-0" checked /> 我同意 </label> /* 第二種寫法 */ <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1"> 我同意 </label>

23 認識 UI 元件 ( 續 ) 選擇清單 (Select menu) <label for="select-choice-0" class="select"> 每天上網時數 :</label> <select name="select-choice-0" id="selectchoice-1" data-mini="true" > <option value="standard"> 少於 1 小時 </option> <option value="standard">1 小時 </option> <option value="rush">2 小時 </option> <option value="express">3 小時 </option> <option value="overnight">3 小時以上 </option> </select>

24 按鈕 (button) 連結按鈕 (link button) <a href="#second" data-role="button"> 第二頁 </a> data-mini="true" 屬性 : 讓按鈕及字體小一號顯示表單按鈕 (Form button) <input type="button" value="button" /> <input type="button" value="submit Button" /> <input type="button" value="reset Button" />

25 按鈕 data icon 屬性 data-icon 屬性在按鈕上加入小圖示 <a href="#" data-role="button" data-icon="delete"> 刪除 </a> 小圖示預設顯示在按鈕的左邊變換圖示的位置 : 圖示在上方 data-iconpos="top" 圖示在下方 data-iconpos="bottom" 圖示在右方 data-iconpos="right" 只顯示圖示不顯示文字 data-iconpos="notext 並排顯示圖示 data-inline="true"

圖示參數及外觀樣式 Icon 參數說明 Icon 參數說明 data-icon="delete" 刪除 data-icon="refresh" 重新整理 data-icon="arrow-l" 向左箭頭 data-icon="forward" 前進 data-icon="arrow-r" 向右箭頭 data-icon="back" 後退 data-icon="arrow-u" 向上箭頭

26 圖示參數及外觀樣式 Icon 參數說明 Icon 參數說明 data-icon="delete" 刪除 data-icon="refresh" 重新整理 data-icon="arrow-l" 向左箭頭 data-icon="forward" 前進 data-icon="arrow-r" 向右箭頭 data-icon="back" 後退 data-icon="arrow-u" 向上箭頭 data-icon="grid" 格子 data-icon="arrow-d" 向下箭頭 data-icon="star" 星號 data-icon="plus" 加號 data-icon="alert" 警示 data-icon="minus" 減號 data-icon="info" 資訊 data-icon="check" 核可 data-icon="home" 首頁 data-icon="gear" 齒輪 data-icon="search" 搜尋圖示外觀 :

27 群組化按鈕 (Grouped buttons) 群組按鈕 data-role="controlgroup" <div data-role="controlgroup"> <a href="index.html" data-role="button"> 新聞 </a> <a href="index.html" data-role="button"> 運動 </a> <a href="index.html" data-role="button"> 電影 </a> </div> 水平顯示 data-type="horizontal"

28 列表 (ListView) ListView 是行動裝置常見的元件, 手機螢幕小, 資料適合以列表方式來顯示, 例如 : 商品列表購物車新聞等 <ol> 標記或 <ul> 標記加入 data-role= listview 屬性 <ol data-role="listview" > <li><a href="chinese.htm"> 國文 </a></li> <li><a href="math.htm"> 數學 </a></li> <li><a href="english.htm"> 英文 </a></li> </ol>

29 ListView 屬性及功能加入圓角 data-inset="true 加入圖片及說明 <li> <a href="chinese.htm"> <img src="images/chinese.jpg"/> <h3> 國文 </h3> <p> 時間 : 星期一人數 :15 人 </p> </a> </li>

列表分割按鈕計數泡泡計數泡泡 (Count bubble) <li> <a href="chinese.htm"> <img src="images/chinese.

30 ListView 屬性及功能 ( 續 ) 列表分割按鈕 (Split button list) <li> <a href="chinese.htm"> <img src="images/chinese.jpg" /> <h3> 國文 </h3> <p> 時間 : 星期一人數 :15 人 </p> </a> <a href="#taking" data-icon="gear"></a> </li> 列表分割按鈕計數泡泡計數泡泡 (Count bubble) <li> <a href="chinese.htm"> <img src="images/chinese.jpg" /> <h3> 國文 </h3> <p> 時間 : 星期一人數 :15 人 </p> <span class="ui-li-count">12</span> </a> <a href="#taking" data-icon="gear"></a> </li>

31 網頁導向與佈景主題 jquery Mobile 網頁會透過 Ajax 來載入並加到 DOM 中, 網頁內的元素也會預先加載到瀏覽器, 頁面間切換會比較流暢 ; 當 ajax 載入失敗, 就會顯示錯誤訊息的小視窗, 如下圖停用 Ajax 改用傳統的 http 來載入網頁 rel= "external " data-ajax= "false " 例如 : <a href="page2.htm" data-icon="gear" rel="external">

32 jquerymobile 常用連結回上頁 data-rel="back" <a data-rel="back"> 回上頁 </a> 彈出新視窗連結網頁 data-rel="dialog <a href="#second" data-rel="dialog"> 第二頁 </a>

ThemeRoller 快速套用佈景主題 ThemeRoller 網址 http://jquerymobile.

33 ThemeRoller 快速套用佈景主題 ThemeRoller 網址按此鈕可以刪除主題面板 1. 切換到 A 標籤就可以調整 A 主題的樣式 2. 點選顏色時就會出現色盤選好的樣式就會馬上套用到主題面板上

34 套用樣式 1. 設定好 ThemeRoller 之後, 按下 Download 鈕即可下載 2. 將下載的樣式引用到文件中 3. 程式碼只要在元素內加上 data-theme= 樣式名稱即可套用自己設計的樣式

35 套用預設佈景主題 jquery Mobile 的預設佈景主題有五種, 分別是 swatch A B C D E Swatch A: 黑色 Swatch B: 藍色 Swatch C: 淺灰色 Swatch D: 灰色 Swatch E: 黃色 E B D C A

36 END

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript