More Related Content
What's hot (7)
Viewers also liked (20)
More from yoshikawa_t (20)
jQuery Mobileではじめるモバイルサイトアプリ崙恬
- 1. jQuery Mobile 2011/12/13 at #ragtech1213 Toru Yoshikawa ( @yoshikawa_t )
- 2. Toru Yoshikawa @yoshikawa_t ? Google API Expert Chrome ? html5j.org HTML5 ? allWeb jQuery Mobile ? Web ? Blog http://d.hatena.ne.jp/pikotea/
- 3. ? jQuery Mobile ? jQuery Mobile ? ? Web API ?
- 7. jQuery Mobile ? Cross-platform ? Markup-driven ? Progressive Enhancement
- 8. Cross-platform Apple iOS 3.2 5.0 A Android 2.1 2.3 Honeycomb A Windows Phone 7.0 7.5 A 6.0 7.0 Playbook A Blackberry 5.0 B Palm WebOS 1.4 2.0 3.0 A Firefox Mobile Beta A Opera Mobile 11.0 A Opera Mini 5.0 6.0 B MeeGo 1.2 A Kindle 3 Fire A Nokia Symbian Symbian^3 B Chrome 11 15 A Firefox 4 8 A Internet Explorer 7 9 A Opera 10 11 A http://jquerymobile.com/gbs/
- 9. Markup-driven JavaScript <!-- --> <a href="#" data-role="button">Button</a>
- 10. Progressive Enhancement JavaScript ON JavaScript OFF
- 12. jQuery Mobile ? ? jQuery Mobile
- 13. jQuery Mobile CMS jQuery Mobile
- 14. jQuery Mobile
- 15. jQuery Mobile <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title> </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src=/slideshow/jquery-mobile-10578175/10578175/"http:/code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- --> <div data-role="page" id="main"> <!-- --> <div data-role="header"> <h1> </h1> </div> <!-- --> <div data-role="content"> </div> <!-- --> <div data-role="footer"> <h4> </h4> </div> </div> </body> </html>
- 16. jQuery Mobile <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum- scale=1, maximum-scale=1"> <title> </title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src=/slideshow/jquery-mobile-10578175/10578175/"jquery-1.6.4.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> http://jquerymobile.com/download/
- 17. ? ? ? ?
- 18. <!-- --> <div data-role="page"> ??<!-- --> ??<div data-role="header"> ? ??<h1> </h1> ??</div> ??<!-- --> ??<div data-role="content"> ? ?? ??</div> ??<!-- --> ??<div data-role="footer"> ? ??<h1> </h1> ??</div> </div>
- 19. ? ajax ? ? slide ? slideup ? slidedown ? pop ? fade ? ?ip
- 20. <!-- slide --> <a href="#next">slide</a> <!-- ?--> <a href="#next" data-transition="slideup">slide</ a>? sample/page_transition.html
- 21. ? ?
- 22. <!-- data-rel dialog --> <a href="#confirm" data-rel="dialog"> </a> <!-- ---> <div data-role="page" id="confirm"> ??<div data-role="header"> ? ??<h1> </h1> ??</div> ??<div data-role="content"> ? ??... ??</div> </div> sample/dialog.html
- 24. ? <a data-role="button"> ? <button> ? <input type=""> - button - submit - reset - image ? : data-role="inline" ? : class="ui-bar"
- 25. ? : data-icon ? arrow-l ? etc... ? : data-iconpos ? left ? right ? notext ? etc...
- 26. ? <input type=""> - text - search - range ? <textarea>
- 27. ? data-role="?eldcontain" label width < 480px width >= 480px
- 28. <!-- data-role="fieldcontain" label ?--> <div?data-role="fieldcontain"> ??<label for="text-search"> :</label> ??<input type="search" id="text-search" placeholder=" ..."> </div>
- 29. ? <input type=""> - checkbox - radio ? <label>
- 30. ? : data-role="controlgroup" - button - checkbox - radio - select ? : data-type - vertical - horizontal
- 31. ? : <select data-role="slider"><option> 〜2 ? : <select> - - : data-native- menu="false"
- 32. ? <div data-role="collapsible"> ? : data-collapsed - : false - : true ? data-collapsible-set :
- 33. 1 ? : <ul data-role="listview"> - - - : <li><a> - - ? - : <li> divider="true" data-list- - - - : <li><img> - - : <li><span class="ui-li- aside"> -
- 34. 2 ? : <ul data-role="listview"> - - - - - ? - - - - - : <li><img class="ui-li- icon"> - - : <ul data-inset="true"
- 35. 3 ? : <ol data-role="listview"> - - <ol> - - : <li><ul> - ? - - : <li><span class="ui-li-count"> - - - - -
- 36. 4 ? : <ul data-role="listview"> - - - - - : <li>2 <a> ? - - - : data-?lster="true" - - - -
- 37. ? : data-fullscreen="true" ? : data- position="?xed" ? : <div data- role="navbar"><ul><li>< a>
- 38. ? ? <div class="ui-grid-a"> - <div class="ui-block-a"> - <div class="ui-block-b">
- 40. ? data-theme ? "a" "e" 4 ? "f" "z"
- 41. ? ￥ThemeRoller ￥
- 42. ThemeRoller jQuery Mobile http://jquerymobile.com/themeroller/
- 43. ThemeRoller ? ? ? 30 ? ? Adobe Kuler http://kuler.adobe.com/
- 44. ThemeRoller
- 49. jQuery Mobile <link rel="stylesheet" href="http://code.jquery.com/mobile/ 1.0/jquery.mobile-1.0.min.css" /> <link rel="stylesheet" href="custom.css" /> <script src=/slideshow/jquery-mobile-10578175/10578175/"http:/code.jquery.com/jquery-1.6.4.min.js"></ script> <script src="http://code.jquery.com/mobile/1.0/ jquery.mobile-1.0.min.js"></script>
- 50. data-theme <div data-role="page" data-theme="f"> <div data-role="header" data-theme="f"> ... </div> <div data-role="content"> ... </div> </div>
- 51. ThemeRoller 1. ThemeRoller 2.
- 53. ? ? ? ? ?
- 54. DOM Chrome
- 55. ? Internet Explorer - ? Chrome - ? Firefox - ?rebug ? Opera - Dragon?y ? Dreamweaver
- 57. 1. <h1> 2. 3. 4.
- 58. Demo
- 59. <h1> .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0!important; }
- 60. <link rel="stylesheet" href="http://code.jquery.com/mobile/ 1.0/jquery.mobile-1.0.min.css" /> <style> .ui-header .ui-title { margin: .6em 45px .8em; } </style>
- 62. .ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
- 63. ID <a href="#" data-role="button" id="btn1" > 1</a> <link rel="stylesheet" href="http://code.jquery.com/mobile/ 1.0/jquery.mobile-1.0.min.css" /> <style> #btn1.ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } </style>
- 64. DOM ex) <input> <input type="button" value=" 2" id="btn2"> <div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false"> <span class="ui-btn-inner ui-btn-corner-all" aria- hidden="true"> <span class="ui-btn-text"> 2</span> </span> <input type="button" value=" 2" id="btn2" class="ui-btn- hidden" aria-disabled="false"> </div>
- 66. "ui-btn-active" <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">Menu1</a></li> <li><a href="#page2" data-transition="fade">Menu2</a></li> <li><a href="#page3" data-transition="fade">Menu3</a></li> </ul> </div>
- 68. ? <div> - ui-body-e - ui-corner-all
- 69. jQuery Mobile anything! <input type="button" value=" 1" data-role="none" >
- 70. jQuery Mobile Gallery http://www.jqmgallery.com/
- 71. Web API
- 72. jQuery Mobile jQuery jQuery Mobile <link rel="stylesheet" href="jquery.mobile.css" /> <script src=/slideshow/jquery-mobile-10578175/10578175/"jquery.js"></script> <!-- jQuery jQuery Mobile --> <script> $(document).bind("mobileinit", function(){ $.mobile.foo = bar; }); </script> <script src="jquery.mobile.js"></script>
- 73. 1 $.mobile loadingMessage ajax : "loading" pageLoadErrorMessage ajax : "Error Loading Page"
- 74. 2 $.mobile touchOver?owEnabled over?ow-scrolling: touch iOS5 : true pushStateEnabled URL history.pushState URL : true
- 75. 3 $.mobile ajaxEnabled ajax : true
- 76. UI <link rel="stylesheet" href="jquery.mobile.css" /> <script src=/slideshow/jquery-mobile-10578175/10578175/"jquery.js"></script> <!-- jQuery jQuery Mobile --> <script> $(document).bind("mobileinit", function(){ //data-role="page" $.mobile.page.prototype.options.foo = bar; }); </script> <script src="jquery.mobile.js"></script>
- 77. // $.mobile.page.prototype.options.backBtnText = ' '; <!-- --> <div data-role="page" data-back-btn-text=" "> ??... </div> ☆ data
- 78. // $(document).bind('mobileinit', function(){ // $.mobile.loadingMessage = ' '; $.mobile.pageLoadErrorMessage = ' '; $.mobile.dialog.prototype.options.closeBtnText = ' '; $.mobile.selectmenu.prototype.options.closeText= ' '; $.mobile.listview.prototype.options.filterPlaceholder = ' '; $.mobile.page.prototype.options.backBtnText = ' '; });
- 79. jQuery Mobile API
- 80. API1 $.mobile.changePage(to, options) ? to: URL jQuery $(｀#pageid¨) ? options : - type :￣get￣ get post - data - transition : - reverse : false - changeHash : true - reloadPageI : false
- 81. $.mobile.changePage(to, options) // id="next" $.mobile.changePage('#next'); // $.mobile.changePage('next.html', { type: 'get', data: $('#formId').serialize() // }); // pop $.mobile.changePage('#next', { transition: 'pop', changeHash: false });
- 83. $.mobile.showPageLoadingMsg() $.mobile.hidePageLoadingMsg() // $.mobile.showPageLoadingMsg(); // : var list = $('#listview-id'); // for ( var i = 0; i < 10; i++ ) { list.append($('<li> ' + i + '</li>')); } list.listview('refresh'); // $.mobile.hidePageLoadingMsg();
- 84. API3 $.mobile.silentScroll(yPos) y ? yPos : y :0
- 86. UI API1 page() button(method) ? method : - refresh β1 - enable - disable
- 87. page() // $('#target').append($('<input type="button" value=" ">')); $('#target').page(); button() // $('#buttonid').button('disable');
- 88. UI API2 dialog(method) ? method : - close listveiw(method) ? method : - refresh
- 89. jQuery Mobile
- 90. ? - pageinit - - pagebeforeshow - tap - pagebeforehide - taphold - pageshow - swipe swipeleft - pagehide - swiperight ? ? - pagebeforechange - - pagechange - scrollstart scrollstop - pagechangefailed ? ? - - mobileinit - pagebeforecreate - orientationchange pagecreate - throttledresize
- 91. 1 mobileinit jQuery Mobile jQuery Mobile //jQuery Moible $(document).bind('mobileinit', function(){ // $.mobile.loadingMessage = ' '; });
- 92. 2 pagebeforecreate pagecreate 1 // $('#pageId').bind("pagebeforecreate", function(evt){ // //Home $('#target').append('<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>'); //false //return false; });
- 93. 3 pagebeforechange pagechange pagebeforecreate pagebeforeshow pagechangefailed
- 95. // $(document).ready( function(){ $(':jqmData(role=page)').live("pagebeforecreate", function (evt){ // $(this).find(':jqmData(role=header)').append( $('<a href="#main" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>') ); }); });
- 96. <div data-role="page"?data-dom-cache="true">...</a> <a href="next.html" data-prefetch>...</a> > git clone git://github.com/jquery/jquery-mobile.git build.xml > cd jquery-mobile > make
- 98. PhoneGap Web http://phonegap.com/
- 99. PhoneGap ? Web HTML/CSS/ JavaScript ? One source Android iPhone ? ? Dreamweaver CS5.5
- 101. ? git ? zip index.html
- 102. ? iPhone
- 104. Demo
- 105. PhoneGap ? HTML/CSS/JavaScript ? ? PhoneGap Build
- 106. jQuery Mobile Publickey http://www.publickey1.jp/m/ http://kokucheese.com/s/
- 107. jQuery Mobile Final fantasy XI Forum http://forum.square-enix.com/ffxi/ http://www.junkudo.jp/ forum.php
- 108. jQuery Mobile WALLPAPER COLLECTION http://machiuke.v-colors.com/ http://baito.mynavi.jp/sp/
- 109. jQuery Mobile Design Spice http://design-spice.com/
- 110. jQuery Mobile ? jQuery Mobile ? UI ? Date Picker UI
- 111. Thank You!! Toru Yoshikawa ( @yoshikawa_t )