Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

JQuery Mobile 框架介紹與使用

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 48 Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

A los espectadores también les gustó (20)

Anuncio

Similares a JQuery Mobile 框架介紹與使用 (20)

Más reciente (20)

Anuncio

JQuery Mobile 框架介紹與使用

  1. 1. 框架介紹與使用 www.ezoui.com
  2. 2. jQuery Mobile 是什麼? 2
  3. 3. jQuery + Mobile jQuery Mobile =
  4. 4. 這麼簡單,大家都知道呀!
  5. 5. 但是 jQuery Mobile 到底是什麼?能吃嗎?
  6. 6. jQuery Mobile 的特色 支援響應式網頁 使用 jQuery 建構 具備完整的 UI 畫面 支援 HTML5 支援各種平台裝置 多樣的效果和變化 更簡捷的語法與輕量化的大小 精簡觸控和滑鼠事件 3
  7. 7. <link rel="stylesheet" href="jquery.mobile.min.css" /> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> jQuery Mobile 預載的程式 4
  8. 8. 感受一下 jQuery Mobile http://demos.jquerymobile.com/1.4.2/ 5
  9. 9. 認識了 jQuery Mobile 之後就讓我們開始吧!
  10. 10. <head> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>header</h1> </div> <div class="ui-content"> <p>content</p> </div> <div data-role="footer"> <h4>footer</h4> </div> </div> </body> 起 手 式 6
  11. 11. <div id="page1" data-role="page"> <div role="main" class="ui-content"></div> </div> <div id="page2" data-role="page"> <div role="main" class="ui-content"></div> </div> <div id="page3" data-role="page"> <div role="main" class="ui-content"></div> </div> 一個 jQuery Mobile 通常會有多個 page 不過,只會顯示其中一頁 page 必須使用 id 進行區隔 page 7
  12. 12. page 使用 EZoApp 來體驗一下 page http://goo.gl/EmXUY9 8
  13. 13. ★ 使用 href ,直接切換到指定的 Page Id ★ 使用 data-transition 設定切換效果 ★ 設定 data-rel=”back” 用同樣效果返回 page 切換效果 <a href="#pageID" data-transition="效果"></a> ★ 也可以使用 javascript 來做切換 ★ $.mobile.changePage('#PageID'); ★ $.mobile.changePage('#PageB' , {'transition':'效果'} ); 9
  14. 14. ● default:預設值 ( fade ) ● fade:淡入淡出 ( 預設值 ) ● flip:翻轉 ● flow :流動切換效果 ● pop:彈出窗口顯示 ● slide:左右滑動切換 ● slidefade:左右滑動 + 淡入淡出切換 ● slideup:由上而下滑動切換 ● slidedown:由下而上滑動切換 ● turn:轉向下一頁 ● none:直接切換 page 切換效果 <a href="#pageID" data-transition="效果"></a> 範例: http://goo.gl/xwIR0F 10
  15. 15. Button <a href="#" class="ui-btn">Anchor</a> <button class="ui-btn">Button</button> 使用 class 產生按鈕樣式 <a href="#" class="ui-btn ui-btn-inline">Anchor</a> <button class="ui-btn ui-btn-inline">Button</button> 11
  16. 16. Button ICON 使用 class 產生按鈕 icon <button class="ui-btn ui-btn-icon-left ui-icon-action">action</button> <button class="ui-btn ui-btn-icon-left ui-icon-alert">alert</button> <button class="ui-btn ui-btn-icon-up ui-icon-arrow-d">arrow-d</button> <button class="ui-btn ui-btn-icon-right ui-icon-arrow-d-l">arrow-d-l</button> <button class="ui-btn ui-btn-icon-bottom ui-icon-arrow-d-r">arrow-d-r</button> <button class="ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button> 範例: http://goo.gl/TQxnvm 12
  17. 17. Grid <div class="ui-grid-b"> <div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div> <div class="ui-block-c">Block C</div> </div> 使用 class 產生 Grid,Grid 裡頭還可以放 Grid ui-grid-a : 兩格,ui-grid-b:三格 ui-grid-c:四格,ui-grid-d:五格 ( 最多五格 ) http://goo.gl/AizA2f 13
  18. 18. Input <div class="ui-field-contain"> <label for="#text_id">Title</label> <input type="text" name="" id="#text_id"> </div> <div class="ui-field-contain"> <label for="#textarea_id">Title</label> <textarea name="" id="#textarea_id"></textarea> </div> <div class="ui-field-contain"> <label for="#search_id">Title</label> <input type="search" name="" id="#search_id"> </div> http://goo.gl/XOXJPH 14
  19. 19. theme 使用 class 產生不同的主題 按鈕: <a href="#" class="ui-btn ui-btn-a">Theme A</a> <a href="#" class="ui-btn ui-btn-b">Theme B</a> navbar: <div data-role="navbar"> <ul> <li><a data-theme="a">Theme A</a></li> <li><a data-theme="b">Theme B</a></li> </ul> </div> http://goo.gl/E8QcW9 15
  20. 20. 做個小小的練習吧
  21. 21. 練習 1 < 嘗試將畫面中的按鈕更名,並且加上 icon > http://goo.gl/JacD3Z 16
  22. 22. 練習 2 < 設定點選按鈕後,出現各種切換頁面的效果 > http://goo.gl/xtf6at 17
  23. 23. 練習 3 < 請將左圖修改為右圖的樣子 > http://goo.gl/Op9kDX 18
  24. 24. 由上面幾個例子就可以看出 jQuery Mobile 裡頭 class 扮演舉足輕重的地位 19
  25. 25. 你一定會認為
  26. 26. 當然不是呀! 第二個也非常重要的就是:data attribute 2 20
  27. 27. 什麼是 data attribute 呀?
  28. 28. HTML 5 當中,使用 "data" 屬性來自定義屬性 使用者可以使用 Javascript 或 CSS 來控制 比較嚴謹的格式為 "data-*" 完整的 jQuery Mobile data attribute http://api.jquerymobile.com/data-attribute/ 21
  29. 29. Header & Footer <div data-role="header" data-position="fixed"> <h1>header</h1> </div> <div data-role="footer" data-position="fixed"> <h4>footer</h4> </div> http://goo.gl/YpuDEY 22
  30. 30. Navbar <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> </ul> </div> http://goo.gl/3nwwe1 23
  31. 31. Radio button <form> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Horizontal:</legend> <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked"> <label for="radio-choice-h-2a">One</label> <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off"> <label for="radio-choice-h-2b">Two</label> <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other"> <label for="radio-choice-h-2c">Three</label> </fieldset> </form> http://goo.gl/Vh67Vf 24
  32. 32. Check box <form> <fieldset data-role="controlgroup"> <legend>Vertical:</legend> <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"> <label for="checkbox-v-2a">One</label> <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"> <label for="checkbox-v-2b">Two</label> <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"> <label for="checkbox-v-2c">Three</label> </fieldset> </form> http://goo.gl/x7vfGr 25
  33. 33. Flip switch <form> <label for="flip-2">Flip toggle switch:</label> <select name="flip-2" id="flip-2" data- role="flipswitch" data-theme="b"> <option value="off">Off</option> <option value="on">On</option> </select> </form> http://goo.gl/83Mn0z 26
  34. 34. Listview <ul data-role="listview" data-inset="true" data-divider-theme="a"> <li data-role="list-divider">Mail</li> <li><a href="#">Inbox</a></li> <li><a href="#">Outbox</a></li> <li data-role="list- divider">Contacts</li> <li><a href="#">Friends</a></li> <li><a href="#">Work</a></li> </ul> 使用 data-role 輕鬆製作 listview ( filter ) http://goo.gl/XjmWug 27
  35. 35. Popup <a href="#popupID" data-rel="popup" class="ui-btn" data- transition="pop">Popup</a> <div data-role="popup" id="popupID"> <p>popup 內容</p> </div> 製作彈出式視窗 http://goo.gl/V2Zhxj 28
  36. 36. Table <table data-role="table" id="table-column-toggle" data- mode="columntoggle" class="ui-responsive table-stroke"> <thead> 內容省略 </thead> <tbody> 內容省略 </tbody> </table> http://goo.gl/pMJlkP 建立表格 (columntoggle / Reflow) 29
  37. 37. Slide Panel <div id="left-menu" data-role="panel" data-position="left"> 從左側展開的內容 </div> <div id="right-menu" data-role="panel" data- position="right"> 從左側展開的內容 </div> 跟 App 一樣的選單表現方式 30 參考文章: http://goo.gl/QajnSU 範例: http://goo.gl/8KlhuF
  38. 38. 不要忘記小小的練習
  39. 39. 練習 4 < 請將左圖修改為右圖的樣子 > http://goo.gl/oXlpVW 31
  40. 40. 練習 5 < 點選按鈕後,下方的 listview 會以 pop 方式彈出 > http://goo.gl/bnQJvD 32
  41. 41. 經過了剛剛一系列的的練習 大家應該稍微明白了 jQuery Mobile 33
  42. 42. 接下該如何讓 jQuery Mobile 運作呢? 34
  43. 43. 事件 頁面事件 (function (){ $(document).on( "pageinit" , "#pageID" , function(){ //頁面第一次載入會執行 }); })() (function (){ $(document).on( "pageshow" , "#pageID" , function(){ //頁面顯示後會執行 }); })() (function (){ $(document).on( "gkComponentReady" , "#pageID" , function(){ //GK 元件初始化完成會執行 }); })() http://goo.gl/0Zwgnd 35
  44. 44. $('#id').on('tap', function () {}); $('#id').on('taphold', function () {}); $('#id').on('swipe', function () {}); $('#id').on('swipeleft', function () {}); $('#id').on('swiperight', function () {}); 五種頁面觸控事件 ( 手勢與滑鼠均適用 ) http://goo.gl/S5bJNq 事件 觸控事件 36
  45. 45. $(window).on('orientationchange', function (event) {}); 偵測行動裝置的旋轉事件 http://goo.gl/HnE1Fe 事件 旋轉事件 37
  46. 46. 以上就是 jQuery Mobile 的基本介紹 如有興趣,可以上 jQuery Mobile 官網了解更多 http://jquerymobile.com/
  47. 47. 或直接使用 EZoApp 體驗 http://jqmdesigner.appspot.com/
  48. 48. 謝謝聆聽 敬請指教

Notas del editor

  • 解答:http://goo.gl/qYcWGz

×