0
jQuery  Mobile  v1.3  最新情報                      2013/03/16                 ABC  2013  Spring  Toru  Yoshikawa  (@yoshikawa...
Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t   Google  Developer  Experts  (Chrome)   html5j.org/HTML5とか勉強会スタッフ   ⽇日本jQuery ...
History    これまでの資料を見たい方は、こちらからjQuery  Mobileカスタマイズ⾃自由⾃自在  v1.2     http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile...
Agenda jQuery  Mobile  1.3  サマリー jQuery  Mobile  1.3  の新機能     Panelウィジット     レスポンシブテーブル     レスポンシブグリッド     新しい⼊入⼒力力フォーム  ...
jQuery  Mobile  1.3  サマリー レスポンシブWebデザインの対応を強化 レスポンシブなウィジットや機能の追加 既存のスタイルもスクリーンサイズに合わせてフ レキシブルになるように書き換え(width:100% など、%による...
jQuery  Mobile  1.3  の新機能
Panelウィジット
Panelウィジットサイドメニューなど、横からスライドしてくるパネル
Panelウィジットサンプルコード                                          記述箇所に注意<div data-role="page">  <div data-role="panel" id="menu"...
Panelウィジット              data-‐‑‒role="panel"data-‐‑‒position:  配置   left   rightdata-‐‑‒display  :  表⽰示⽅方法   overlay:  Pan...
Panelウィジット               data-‐‑‒role="panel"data-‐‑‒swipe-‐‑‒close:  スワイプ操作で閉じる   true  (default)data-‐‑‒dismissible:  Pa...
Panelウィジットサンプルコード                                      全オプション<div data-role="panel" id="menu" data-position="left" data-di...
Panelウィジットサンプルコード(レスポンシブ)<div data-role="page" class="ui-responsive-panel">  <div data-role="panel" id="menu">    ...  </d...
Panelウィジットサンプルコード(JavaScript)// Panelを開く(optionsはv1.3では効いていない)$(#menu).panel(open, options);// Panelを閉じる$(#menu).panel(clo...
レスポンシブテーブル
レスポンシブテーブル    Column  Toggleモード(スクリーンサイズによって列列数が変化)
レスポンシブテーブル      Reflowモード(スクリーンサイズによって表⽰示が変化)
レスポンシブテーブル(Column  Toggleモード)
レスポンシブテーブル       (Column  Toggleモード)サンプルコード<table data-role="table" class="ui-responsive">  <thead>    <tr>               ...
レスポンシブテーブル(共通)             data-‐‑‒role="table"           class="ui-‐‑‒responsive" data-‐‑‒mode:  レスポンシブモード   columntoggle...
Column  Toggleモード           data-‐‑‒role="table"   data-‐‑‒mode="columntoggle"<th>要素に指定 data-‐‑‒priority:  どのサイズで表⽰示するか優先度...
Column  Toggleモード             data-‐‑‒role="table"     data-‐‑‒mode="columntoggle"data-‐‑‒column-‐‑‒btn-‐‑‒text:  カラム選択ボタン...
レスポンシブテーブルを装飾するサンプルコード<table data-role="table" class="ui-responsive table-stripeui-body-d">  <thead>    <tr class="ui-bar-...
レスポンシブテーブル (Reflowモード)
レスポンシブテーブル            (Reflowモード)サンプルコード<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">  <t...
レスポンシブテーブル            (Reflowモード)※Reflowモードでは、テーブルの幅が100%にならないバグがあるので、次のスタイルを記述して対応する @media (min-width: 35em) {   .ui-table...
レスポンシブグリッド
レスポンシブグリッドグリッドレイアウトがモバイルでは縦に並ぶ
レスポンシブグリッドサンプルコード<div class="ui-grid-c ui-responsive">  <div class="ui-block-a">A</div>  <div class="ui-block-b">B</div>  ...
レスポンシブグリッド       (カスタム)サンプルコード@media all and (max-width: 480px) {  .ui-responsive .ui-block-a,  .ui-responsive .ui-block-b...
新しい⼊入⼒力力フォーム
新しい⼊入⼒力力フォームDual  range  sliderinput  type="file"のサポートテキスト⼊入⼒力力の削除オプション  data-‐‑‒clear-‐‑‒btn="true"オートコンプリート
新しい⼊入⼒力力フォームサンプルコード                                            sliderを2つ記述<!-- Dual range slider --><div data-role="ranges...
新しい⼊入⼒力力フォームサンプルコード(Autocomplete)<ul data-role="listview" data-filter="true" data-filter-placeholder="a, b, c..." data-fil...
新しいアイコンとオプション
新しいアイコンとオプション アイコンの追加  bars  menu 新しいオプション  ui-‐‑‒icon-‐‑‒alt  ui-‐‑‒icon-‐‑‒nodisc
新しいアイコンとオプションサンプルコード<!-- barsアイコンとaltオプション --><a data-role="button" data-icon="bars" data-iconpos="notext" class="ui-icon-...
その他の変更更点jQuery  1.9、2.0をサポートページ遷移アニメーションでIE10/WP8をサポートjQuery  MobileのリファレンスとAPIドキュメントが新しくなりました。Download  Builder  Toolに、固定...
その他の変更更点 (マークアップ関連)ダイアログの閉じるボタンの表⽰示位置をカスタマイズできるようになりました。data-‐‑‒close-‐‑‒btn属性に"right"、"left"、"none"が指定できます。(http://view.j...
その他の変更更点    (JavaScript関連)チェックボックスやラジオボタンに使われるグループ化の機能(controlgroup)がウィジット化されました。createイベントなどをトリガーとして⽣生成できるようになります。(http:/...
今後のロードマップ
今後のロードマップメンテナンスリリース   1.1.2と1.2.1を来週に、  1.3.1を再来週にリリース予定1.4  2013第2四半期(2013年年1⽉月〜~3⽉月)   タブUIの追加、jQuery  UIとの統合   https://...
⽇日本  jQuery  Mobile  ユーザー会 https://groups.google.com/group/jqm-‐‑‒jp/ jQuery  Mobileに関するノウハウの共有・情報交換
Thank  you!! (@yoshikawa_̲t)
Upcoming SlideShare
Loading in...5
×

jQuery Mobile 1.3 最新情報

15,002

Published on

Android Bazaar and Conference 2013 Spring の講演資料です。

Published in: Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,002
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
55
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Mobile 1.3 最新情報"

  1. 1. jQuery  Mobile  v1.3  最新情報 2013/03/16 ABC  2013  Spring Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 2. Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t Google  Developer  Experts  (Chrome) html5j.org/HTML5とか勉強会スタッフ ⽇日本jQuery  Mobileユーザー会  管理理⼈人 Sublime  Text  2  Japan  Users  Group  管理理⼈人 allWebクリエイター塾/jQuery  Mobile担当講師 Blog:  http://d.hatena.ne.jp/pikotea/
  3. 3. History これまでの資料を見たい方は、こちらからjQuery  Mobileカスタマイズ⾃自由⾃自在  v1.2   http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒14844564jQuery  Mobile  1.2  最新情報  &  Tips http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒tips-‐‑‒20120719jQuery  Mobile  1.1  最新情報  &  Tips http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒tipsjQuery  Mobileではじめるモバイルサイト/アプリ制作 http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒10578175
  4. 4. Agenda jQuery  Mobile  1.3  サマリー jQuery  Mobile  1.3  の新機能 Panelウィジット レスポンシブテーブル レスポンシブグリッド 新しい⼊入⼒力力フォーム 新しいアイコンとオプション その他の変更更点 今後のロードマップサンプルファイル (http://bit.ly/jqm130316)
  5. 5. jQuery  Mobile  1.3  サマリー レスポンシブWebデザインの対応を強化 レスポンシブなウィジットや機能の追加 既存のスタイルもスクリーンサイズに合わせてフ レキシブルになるように書き換え(width:100% など、%による指定やemによる指定など)
  6. 6. jQuery  Mobile  1.3  の新機能
  7. 7. Panelウィジット
  8. 8. Panelウィジットサイドメニューなど、横からスライドしてくるパネル
  9. 9. Panelウィジットサンプルコード 記述箇所に注意<div data-role="page"> <div data-role="panel" id="menu"> <!-- Panelの内容 --> </div> <div data-role="header"> <a href="#menu" data-icon="bars" data-iconpos="notext"> <!-- ... --> </div> <div data-role="content"> Panelを呼び出し <!-- ... --> </div></div>
  10. 10. Panelウィジット data-‐‑‒role="panel"data-‐‑‒position:  配置 left rightdata-‐‑‒display  :  表⽰示⽅方法 overlay:  Panelを上に被せる reveal:  Panelを下に置く push:  PanelとPageをくっつける
  11. 11. Panelウィジット data-‐‑‒role="panel"data-‐‑‒swipe-‐‑‒close:  スワイプ操作で閉じる true  (default)data-‐‑‒dismissible:  Panel以外をタッチして閉じる true  (default)data-‐‑‒animate:  アニメーション true  (default)data-‐‑‒position-‐‑‒fixed:  Panel固定 false  (default)
  12. 12. Panelウィジットサンプルコード 全オプション<div data-role="panel" id="menu" data-position="left" data-display="overlay" data-swipe-close="true" data-dismissible="true" data-animate="true" data-theme="a"> <ul data-role="listview" data-theme="a"> <li><a href="#">Menu1</a> 内容は普通に記述 <li><a href="#">Menu2</a> ... </ul> <a href="#" data-rel="close">閉じる</a></div> 閉じるボタンを作成
  13. 13. Panelウィジットサンプルコード(レスポンシブ)<div data-role="page" class="ui-responsive-panel"> <div data-role="panel" id="menu"> ... </div></div>⼤大きいスクリーンサイズでは、ページ本体の右側が切切れないようになる(reveal、pushのみ)
  14. 14. Panelウィジットサンプルコード(JavaScript)// Panelを開く(optionsはv1.3では効いていない)$(#menu).panel(open, options);// Panelを閉じる$(#menu).panel(close);
  15. 15. レスポンシブテーブル
  16. 16. レスポンシブテーブル Column  Toggleモード(スクリーンサイズによって列列数が変化)
  17. 17. レスポンシブテーブル Reflowモード(スクリーンサイズによって表⽰示が変化)
  18. 18. レスポンシブテーブル(Column  Toggleモード)
  19. 19. レスポンシブテーブル (Column  Toggleモード)サンプルコード<table data-role="table" class="ui-responsive"> <thead> <tr> theadとtbody必須 <th>No.</th> <th data-priority="1">列1</th> <th data-priority="1">列2</th> <th data-priority="3">列3</th> <th data-priority="4">列4</th> どのサイズで表⽰示するか </tr> 優先度度を指定 </thead> <tbody><tr>...</tr><tr>...</tr></tbody></table>
  20. 20. レスポンシブテーブル(共通) data-‐‑‒role="table" class="ui-‐‑‒responsive" data-‐‑‒mode:  レスポンシブモード columntoggle  (default) reflow class:  レスポンシブテーブル⽤用の既定クラス table-‐‑‒stripe:  各⾏行行の背景⾊色を交互にストライプで表⽰示 table-‐‑‒stroke:  各⾏行行の下線を表⽰示
  21. 21. Column  Toggleモード data-‐‑‒role="table" data-‐‑‒mode="columntoggle"<th>要素に指定 data-‐‑‒priority:  どのサイズで表⽰示するか優先度度を指定 1:  320px  (20em)以降降のサイズで表⽰示 2:  480px  (30em)〜~ 3:  640px  (40em)〜~ 4:  800px  (50em)〜~ 5:  960px  (60em)〜~ 6:  1,120px  (70em)〜~ ※data-‐‑‒priorityを指定しない場合、必ず表⽰示される
  22. 22. Column  Toggleモード data-‐‑‒role="table" data-‐‑‒mode="columntoggle"data-‐‑‒column-‐‑‒btn-‐‑‒text:  カラム選択ボタンのテキスト "Columns..."  (default)data-‐‑‒column-‐‑‒btn-‐‑‒theme:  カラム選択ボタンのテーマ a〜~edata-‐‑‒column-‐‑‒popup-‐‑‒theme:  カラム選択ポップアップのテーマ a〜~e
  23. 23. レスポンシブテーブルを装飾するサンプルコード<table data-role="table" class="ui-responsive table-stripeui-body-d"> <thead> <tr class="ui-bar-d"> 既定クラスをうまく利利⽤用する <th>No.</th> <th data-priority="1">列1</th> <th data-priority="1">列2</th> <th data-priority="3">列3</th> <th data-priority="4">列4</th> </tr> </thead> <tbody><tr>...</tr><tr>...</tr></tbody></table>
  24. 24. レスポンシブテーブル (Reflowモード)
  25. 25. レスポンシブテーブル (Reflowモード)サンプルコード<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke"> <thead> <tr> data-‐‑‒modeでreflowを指定する <th>No.</th> <th>列1</th> <th>列2</th> <th>列3</th> data-‐‑‒priorityは不不要 <th>列4</th> </tr> </thead> <tbody><tr>...</tr><tr>...</tr></tbody></table>
  26. 26. レスポンシブテーブル (Reflowモード)※Reflowモードでは、テーブルの幅が100%にならないバグがあるので、次のスタイルを記述して対応する @media (min-width: 35em) { .ui-table-reflow.ui-responsive { display: table; } }
  27. 27. レスポンシブグリッド
  28. 28. レスポンシブグリッドグリッドレイアウトがモバイルでは縦に並ぶ
  29. 29. レスポンシブグリッドサンプルコード<div class="ui-grid-c ui-responsive"> <div class="ui-block-a">A</div> <div class="ui-block-b">B</div> <div class="ui-block-c">C</div> <div class="ui-block-d">D</div></div>デフォルトのブレークポイントは、560px  (35em)
  30. 30. レスポンシブグリッド (カスタム)サンプルコード@media all and (max-width: 480px) { .ui-responsive .ui-block-a, .ui-responsive .ui-block-b, .ui-responsive .ui-block-c, .ui-responsive .ui-block-d { width: 50%; float: left; }}
  31. 31. 新しい⼊入⼒力力フォーム
  32. 32. 新しい⼊入⼒力力フォームDual  range  sliderinput  type="file"のサポートテキスト⼊入⼒力力の削除オプション data-‐‑‒clear-‐‑‒btn="true"オートコンプリート
  33. 33. 新しい⼊入⼒力力フォームサンプルコード sliderを2つ記述<!-- Dual range slider --><div data-role="rangeslider"> <input type="range" name="range-min" min="0" max="100"value="40"> <input type="range" name="range-max" min="0" max="100"value="80"></div><!-- input type="file" --><input type="file"><!-- data-clear-btn="true" --><input type="text" data-clear-btn="true">
  34. 34. 新しい⼊入⼒力力フォームサンプルコード(Autocomplete)<ul data-role="listview" data-filter="true" data-filter-placeholder="a, b, c..." data-filter-reveal="true" data-inset="true"> <li><a href="#">a</a></li> <li><a href="#">ab</a></li> listviewのfilter <li><a href="#">abc</a></li> を応⽤用したUI <li><a href="#">abcd</a></li></ul>listviewbeforefilter  イベントを利利⽤用すれば、ajaxで動的に⽣生成することも可能
  35. 35. 新しいアイコンとオプション
  36. 36. 新しいアイコンとオプション アイコンの追加 bars menu 新しいオプション ui-‐‑‒icon-‐‑‒alt ui-‐‑‒icon-‐‑‒nodisc
  37. 37. 新しいアイコンとオプションサンプルコード<!-- barsアイコンとaltオプション --><a data-role="button" data-icon="bars" data-iconpos="notext" class="ui-icon-alt">ボタン</a><!-- editアイコンとnodiscオプション --><div class="ui-icon-nodisc"> <button data-icon="edit" data-iconpos="notext" data-theme="a">ボタン</button></div>※リンクボタン以外のボタンの場合、ui-‐‑‒icon-‐‑‒altとui-‐‑‒icon-‐‑‒nodiscは、外側で指定する必要がある
  38. 38. その他の変更更点jQuery  1.9、2.0をサポートページ遷移アニメーションでIE10/WP8をサポートjQuery  MobileのリファレンスとAPIドキュメントが新しくなりました。Download  Builder  Toolに、固定ツールバーをAndroid  2.xやiOS  4でサポートするためのオプションが追加されました。
  39. 39. その他の変更更点 (マークアップ関連)ダイアログの閉じるボタンの表⽰示位置をカスタマイズできるようになりました。data-‐‑‒close-‐‑‒btn属性に"right"、"left"、"none"が指定できます。(http://view.jquerymobile.com/1.3.0/docs/widgets/dialog/)※ダイアログは、1.4で⾮非推奨になりますポップアップウィジットでポップアップの外の部分をタッチした際にポップアップを閉じないようにできるようになりました。data-‐‑‒dismissible="false"で設定できます。(http://view.jquerymobile.com/1.3.0/docs/widgets/popup/)カスタムセレクトメニューのoptgroup要素にdata-‐‑‒divider-‐‑‒themeで任意のテーマが指定できるようになりました。また、ヘッダー内に配置した際にclassにui-‐‑‒btn-‐‑‒right、ui-‐‑‒btn-‐‑‒leftで左右の配置を指定できます。折りたたみ可能ブロックにdata-‐‑‒corners(⾓角丸の設定)が追加されました。
  40. 40. その他の変更更点 (JavaScript関連)チェックボックスやラジオボタンに使われるグループ化の機能(controlgroup)がウィジット化されました。createイベントなどをトリガーとして⽣生成できるようになります。(http://api.jquerymobile.com/controlgroup/)Swipeイベントの判定ロジックなどをカスタマイズできるようになりました。(http://api.jquerymobile.com/swipe/)新たにhashchangeイベントとpopstateイベントを統合したNavigateイベントが追加されました。(http://stage.api.jquerymobile.com/navigate/)History  APIを簡単に扱うためのメソッドとして、$.mobile.navigateが追加されています。(http://stage.api.jquerymobile.com/jQuery.mobile.navigate/)ボタンのテーマを動的に変更更できるようになりました。(http://api.jquerymobile.com/button/)
  41. 41. 今後のロードマップ
  42. 42. 今後のロードマップメンテナンスリリース 1.1.2と1.2.1を来週に、  1.3.1を再来週にリリース予定1.4  2013第2四半期(2013年年1⽉月〜~3⽉月) タブUIの追加、jQuery  UIとの統合 https://github.com/jquery/jquery-‐‑‒mobile/wiki/1.4-‐‑‒planning1.5  2013第2四半期(2013年年4⽉月〜~6⽉月) カルーセル追加1.6  2013第3四半期(2013年年7⽉月〜~9⽉月) マルチパネル対応1.7  2013第4四半期(2013年年10⽉月〜~12⽉月) コードの最適化・パフォーマンスチューニング
  43. 43. ⽇日本  jQuery  Mobile  ユーザー会 https://groups.google.com/group/jqm-‐‑‒jp/ jQuery  Mobileに関するノウハウの共有・情報交換
  44. 44. Thank  you!! (@yoshikawa_̲t)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×