• Save
jQuery Mobileではじめるモバイルサイト/アプリ制作
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,010
On Slideshare
8,814
From Embeds
1,196
Number of Embeds
10

Actions

Shares
Downloads
0
Comments
0
Likes
19

Embeds 1,196

http://laugh-raku.com 775
http://d.hatena.ne.jp 282
http://paper.li 64
http://takenokotakkenoko.wordpress.com 48
http://feeds.feedburner.com 8
http://us-w1.rockmelt.com 7
https://twitter.com 6
http://impresarios.co.jp 3
http://webcache.googleusercontent.com 2
http://news.google.com 1

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 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•
  • 4. http://jquerymobile.com/
  • 5. jQuery Mobile
  • 6. jQuery Mobile•• jQuery••
  • 7. jQuery Mobile• Cross-platform• Markup-driven• Progressive Enhancement
  • 8. Cross-platformApple iOS 3.2 5.0 AAndroid 2.1 2.3 Honeycomb AWindows Phone 7.0 7.5 A 6.0 7.0 Playbook ABlackberry 5.0 BPalm WebOS 1.4 2.0 3.0 AFirefox Mobile Beta AOpera Mobile 11.0 AOpera Mini 5.0 6.0 BMeeGo 1.2 AKindle 3 Fire ANokia Symbian Symbian^3 BChrome 11 15 AFirefox 4 8 AInternet Explorer 7 9 AOpera 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
  • 11. jQuery Mobile•••
  • 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="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="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 • flip
  • 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
  • 23. http://d.hatena.ne.jp/pikotea/20101019/
  • 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="fieldcontain" 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-filster="true" - - - -
  • 37. • : data-fullscreen="true"• : data- position="fixed"• : <div data- role="navbar"><ul><li>< a>
  • 38. •‣ <div class="ui-grid-a"> - <div class="ui-block-a"> - <div class="ui-block-b">
  • 39. • data-theme• "a" "e" 4• "f" "z"
  • 40. • ★ThemeRoller ★
  • 41. ThemeRollerjQuery Mobile http://jquerymobile.com/themeroller/
  • 42. ThemeRoller••• 30•• Adobe Kuler http://kuler.adobe.com/
  • 43. ThemeRoller
  • 44. Demohttp://jquerymobile.com/themeroller/index.php?style_id=20111212-57 30
  • 45. 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="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>
  • 46. data-theme<div data-role="page" data-theme="f"> <div data-role="header" data-theme="f"> ... </div> <div data-role="content"> ... </div></div>
  • 47. ThemeRoller1. ThemeRoller2.
  • 48. iOShttp://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
  • 49. • ✦ ✦ ✦ ✦
  • 50. DOMChrome
  • 51. • Internet Explorer -• Chrome -• Firefox - firebug• Opera - Dragonfly• Dreamweaver
  • 52. 1. <h1>2.3.4.
  • 53. Demo
  • 54. <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;}
  • 55. <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>
  • 56. .ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;}
  • 57. 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>
  • 58. DOM ex) <input><input type="button" value=" 2" id="btn2"><div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadowui-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>
  • 59. "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>
  • 60. ui-body-aui-bar-aui-btn-activeui-btn-up-aui-btn-down-aui-btn-hover-aui-corner-allui-corner-topui-corner-bottom
  • 61. • <div> - ui-body-e - ui-corner-all
  • 62. jQuery Mobile anything!<input type="button" value=" 1" data-role="none" >
  • 63. jQuery Mobile Gallery http://www.jqmgallery.com/
  • 64. Web API
  • 65. jQuery MobilejQuery jQuery Mobile<link rel="stylesheet" href="jquery.mobile.css" /><script src="jquery.js"></script><!-- jQuery jQuery Mobile --><script>$(document).bind("mobileinit", function(){ $.mobile.foo = bar;});</script><script src="jquery.mobile.js"></script>
  • 66. 1$.mobileloadingMessage ajax : "loading"pageLoadErrorMessage ajax : "Error Loading Page"
  • 67. 2$.mobiletouchOverflowEnabledoverflow-scrolling: touch iOS5 : truepushStateEnabledURL history.pushState URL : true
  • 68. 3$.mobileajaxEnabled ajax : true
  • 69. UI<link rel="stylesheet" href="jquery.mobile.css" /><script src="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>
  • 70. //$.mobile.page.prototype.options.backBtnText = ;<!-- --><div data-role="page" data-back-btn-text=" ">  ...</div>※ data
  • 71. //$(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 = ;});
  • 72. jQuery Mobile API
  • 73. API1$.mobile.changePage(to, options)• to: URL jQuery $(‘#pageid’)• options : - type :”get” get post - data - transition : - reverse : false - changeHash : true - reloadPageI : false
  • 74. $.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});
  • 75. API2$.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg()
  • 76. $.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();
  • 77. API3$.mobile.silentScroll(yPos) y• yPos : y :0
  • 78. $.mobile.silentScroll(yPos)//$.mobile.silentScroll();//$.mobile.silentScroll($(#target).position().top);
  • 79. UI API1page()button(method)• method : - refresh β1 - enable - disable
  • 80. page()//$(#target).append($(<input type="button" value=" ">));$(#target).page();button()//$(#buttonid).button(disable);
  • 81. UI API2dialog(method)• method : - closelistveiw(method)• method : - refresh
  • 82. jQuery Mobile
  • 83. • - pageinit - - pagebeforeshow - tap - pagebeforehide - taphold - pageshow - swipe swipeleft - pagehide - swiperight •• - pagebeforechange - - pagechange - scrollstart scrollstop - pagechangefailed• • - - mobileinit - pagebeforecreate - orientationchange pagecreate - throttledresize
  • 84. 1mobileinitjQuery Mobile jQuery Mobile//jQuery Moible$(document).bind(mobileinit, function(){ // $.mobile.loadingMessage = ;});
  • 85. 2pagebeforecreate 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;});
  • 86. 3pagebeforechange pagechange pagebeforecreate pagebeforeshowpagechangefailed
  • 87. pagebeforeloadpageload pageloadfailedpagebeforecreatepagecreatepageinitpagebeforechangepagebeforeshowpageshowpagechange pagechangefailed
  • 88. //$(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>) ); });});
  • 89. <div data-role="page" data-dom-cache="true">...</a><a href="next.html" data-prefetch>...</a>> git clone git://github.com/jquery/jquery-mobile.gitbuild.xml> cd jquery-mobile> make
  • 90. PhoneGapWeb http://phonegap.com/
  • 91. PhoneGap• Web HTML/CSS/ JavaScript• One source Android iPhone•• Dreamweaver CS5.5
  • 92. PhoneGap BuildPhoneGap Buildhttps://build.phonegap.com/
  • 93. • git• zip index.html
  • 94. • iPhone
  • 95. Demo
  • 96. PhoneGap• HTML/CSS/JavaScript•• PhoneGap Build
  • 97. jQuery Mobile Publickeyhttp://www.publickey1.jp/m/ http://kokucheese.com/s/
  • 98. jQuery MobileFinal fantasy XI Forum http://forum.square-enix.com/ffxi/ http://www.junkudo.jp/ forum.php
  • 99. jQuery MobileWALLPAPER COLLECTION http://machiuke.v-colors.com/ http://baito.mynavi.jp/sp/
  • 100. jQuery Mobile Design Spice http://design-spice.com/
  • 101. jQuery Mobile• jQuery Mobile• UI• Date Picker UI
  • 102. Thank You!!Toru Yoshikawa ( @yoshikawa_t )
  • 103. http://jquerymobile.com/http://jquerymobile.com/demos/jQuery Mobilehttp://d.hatena.ne.jp/pikotea/20101019/jQuery Mobilehttp://dev.screw-axis.com/doc/jquery_mobile/jQuery Mobilehttp://www.jqmgallery.com/
  • 104. jQuery Mobilehttp://www.adobe.com/jp/joc/devnet/dreamweaver/articles/jq_snippets.htmlGithub jquery-mobilehttps://github.com/jquery/jquery-mobile