jQuery Mobile 1.3 最新情報
30 likes•14,398 views
Android Bazaar and Conference 2013 Spring の講演資料です。
jQuery Mobile 1.3 最新情報
- 1. jQuery Mobile v1.3 最新情報 2013/03/16 ABC 2013 Spring Toru Yoshikawa (@yoshikawa_̲t)
- 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. History これまでの資料を見たい方は、こちらから jQuery Mobileカスタマイズ⾃自由⾃自在 v1.2 http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒14844564 jQuery Mobile 1.2 最新情報 & Tips http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒tips-‐‑‒20120719 jQuery Mobile 1.1 最新情報 & Tips http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒tips jQuery Mobileではじめるモバイルサイト／アプリ制作 http://www.slideshare.net/yoshikawa_̲t/jquery-‐‑‒mobile-‐‑‒10578175
- 4. Agenda jQuery Mobile 1.3 サマリー jQuery Mobile 1.3 の新機能 Panelウィジット レスポンシブテーブル レスポンシブグリッド 新しい⼊入⼒力力フォーム 新しいアイコンとオプション その他の変更更点 今後のロードマップ サンプルファイル (http://bit.ly/jqm130316)
- 5. jQuery Mobile 1.3 サマリー レスポンシブWebデザインの対応を強化 レスポンシブなウィジットや機能の追加 既存のスタイルもスクリーンサイズに合わせてフ レキシブルになるように書き換え（width:100% など、％による指定やemによる指定など）
- 6. jQuery Mobile 1.3 の新機能
- 7. Panelウィジット
- 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. Panelウィジット data-‐‑‒role="panel" data-‐‑‒position: 配置 left right data-‐‑‒display : 表⽰示⽅方法 overlay: Panelを上に被せる reveal: Panelを下に置く push: PanelとPageをくっつける
- 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. 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. Panelウィジット サンプルコード（レスポンシブ） <div data-role="page" class="ui-responsive-panel"> <div data-role="panel" id="menu"> ... </div> </div> ⼤大きいスクリーンサイズでは、ページ本体の右側 が切切れないようになる（reveal、pushのみ）
- 14. Panelウィジット サンプルコード（JavaScript） // Panelを開く（optionsはv1.3では効いていない） $('#menu').panel('open', options); // Panelを閉じる $('#menu').panel('close');
- 15. レスポンシブテーブル
- 16. レスポンシブテーブル Column Toggleモード （スクリーンサイズによって列列数が変化）
- 17. レスポンシブテーブル Reflowモード （スクリーンサイズによって表⽰示が変化）
- 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. レスポンシブテーブル（共通） data-‐‑‒role="table" class="ui-‐‑‒responsive" data-‐‑‒mode: レスポンシブモード columntoggle (default) reflow class: レスポンシブテーブル⽤用の既定クラス table-‐‑‒stripe: 各⾏行行の背景⾊色を交互にストライプで表⽰示 table-‐‑‒stroke: 各⾏行行の下線を表⽰示
- 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. Column Toggleモード data-‐‑‒role="table" data-‐‑‒mode="columntoggle" data-‐‑‒column-‐‑‒btn-‐‑‒text: カラム選択ボタンのテキスト "Columns..." (default) data-‐‑‒column-‐‑‒btn-‐‑‒theme: カラム選択ボタンのテーマ a〜～e data-‐‑‒column-‐‑‒popup-‐‑‒theme: カラム選択ポップアップのテーマ a〜～e
- 23. レスポンシブテーブルを装飾する サンプルコード <table data-role="table" class="ui-responsive table-stripe ui-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>
- 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. レスポンシブテーブル （Reflowモード） ※Reflowモードでは、テーブルの幅が100%にならない バグがあるので、次のスタイルを記述して対応する @media (min-width: 35em) { .ui-table-reflow.ui-responsive { display: table; } }
- 27. レスポンシブグリッド
- 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. レスポンシブグリッド （カスタム） サンプルコード @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. 新しい⼊入⼒力力フォーム
- 32. 新しい⼊入⼒力力フォーム Dual range slider input type="file"のサポート テキスト⼊入⼒力力の削除オプション data-‐‑‒clear-‐‑‒btn="true" オートコンプリート
- 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. 新しい⼊入⼒力力フォーム サンプルコード（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. 新しいアイコンとオプション
- 36. 新しいアイコンとオプション アイコンの追加 bars menu 新しいオプション ui-‐‑‒icon-‐‑‒alt ui-‐‑‒icon-‐‑‒nodisc
- 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. その他の変更更点 jQuery 1.9、2.0をサポート ページ遷移アニメーションでIE10/WP8をサポート jQuery MobileのリファレンスとAPIドキュメントが新 しくなりました。 Download Builder Toolに、固定ツールバーをAndroid 2.xやiOS 4でサポートするためのオプションが追加され ました。
- 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. 今後のロードマップ
- 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-‐‑‒planning 1.5 2013第2四半期（2013年年4⽉月〜～6⽉月） カルーセル追加 1.6 2013第3四半期（2013年年7⽉月〜～9⽉月） マルチパネル対応 1.7 2013第4四半期（2013年年10⽉月〜～12⽉月） コードの最適化・パフォーマンスチューニング
- 43. ⽇日本 jQuery Mobile ユーザー会 https://groups.google.com/group/jqm-‐‑‒jp/ jQuery Mobileに関するノウハウの共有・情報交換