Suche senden
Hochladen
jQuery Mobile 1.3 最新情報
•
30 gefällt mir
•
14,392 views
yoshikawa_t
Folgen
Android Bazaar and Conference 2013 Spring の講演資料です。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 44
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
Jqm20120210
Jqm20120210
cmtomoda
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
はじめてのVue.js
はじめてのVue.js
Kei Yagi
Empfohlen
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
Jqm20120210
Jqm20120210
cmtomoda
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
はじめてのVue.js
はじめてのVue.js
Kei Yagi
Web Component概要
Web Component概要
Shumpei Shiraishi
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
Hirokazu Nishi
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
Inside Movable Type
Inside Movable Type
純生 野田
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
純生 野田
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
Norito Agetsuma
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル
Hirokazu Nishi
はじめよう JavaFX 2.x
はじめよう JavaFX 2.x
a know
何が変わった JavaFX 2.0
何が変わった JavaFX 2.0
Yuichi Sakuraba
Pyramid入門
Pyramid入門
Atsushi Odagiri
最高のツイッタークライアントを求めて
最高のツイッタークライアントを求めて
airtoxin Ishii
Magento cafe plus #12
Magento cafe plus #12
Hirokazu Nishi
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
20120118 titanium
20120118 titanium
Hiroshi Oyamada
More Better Nested Set
More Better Nested Set
xibbar
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
Weitere ähnliche Inhalte
Was ist angesagt?
Web Component概要
Web Component概要
Shumpei Shiraishi
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
Hirokazu Nishi
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
Inside Movable Type
Inside Movable Type
純生 野田
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
純生 野田
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
Norito Agetsuma
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル
Hirokazu Nishi
はじめよう JavaFX 2.x
はじめよう JavaFX 2.x
a know
何が変わった JavaFX 2.0
何が変わった JavaFX 2.0
Yuichi Sakuraba
Pyramid入門
Pyramid入門
Atsushi Odagiri
最高のツイッタークライアントを求めて
最高のツイッタークライアントを求めて
airtoxin Ishii
Magento cafe plus #12
Magento cafe plus #12
Hirokazu Nishi
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
20120118 titanium
20120118 titanium
Hiroshi Oyamada
Was ist angesagt?
(20)
Web Component概要
Web Component概要
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
WordPressで提供するWeb API
WordPressで提供するWeb API
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
Inside Movable Type
Inside Movable Type
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
プロになるためのJavaScript入門読書会 レジュメ
プロになるためのJavaScript入門読書会 レジュメ
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
第4回Magento Cafe Plus〜Rewriteと独自テーブル
第4回Magento Cafe Plus〜Rewriteと独自テーブル
はじめよう JavaFX 2.x
はじめよう JavaFX 2.x
何が変わった JavaFX 2.0
何が変わった JavaFX 2.0
Pyramid入門
Pyramid入門
最高のツイッタークライアントを求めて
最高のツイッタークライアントを求めて
Magento cafe plus #12
Magento cafe plus #12
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
20120118 titanium
20120118 titanium
Ähnlich wie jQuery Mobile 1.3 最新情報
More Better Nested Set
More Better Nested Set
xibbar
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
Html5 Web Applications
Html5 Web Applications
totty jp
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Kazunari Hara
MySQLとPostgreSQLの基本的な実行プラン比較
MySQLとPostgreSQLの基本的な実行プラン比較
Shinya Sugiyama
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Yosuke Onoue
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
android sola
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
Oracle Cloud Developers Meetup@東京
Oracle Cloud Developers Meetup@東京
tuchimur
Ci tutorial
Ci tutorial
Kazuaki Ueda
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Naoyuki Yamada
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
[機械学習]文章のクラス分類
[機械学習]文章のクラス分類
Tetsuya Hasegawa
Sails workshop1
Sails workshop1
Tomokatsu Iguchi
Django boodoo
Django boodoo
泰 増田
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
Ähnlich wie jQuery Mobile 1.3 最新情報
(20)
More Better Nested Set
More Better Nested Set
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Html5 Web Applications
Html5 Web Applications
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
MySQLとPostgreSQLの基本的な実行プラン比較
MySQLとPostgreSQLの基本的な実行プラン比較
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Oracle Cloud Developers Meetup@東京
Oracle Cloud Developers Meetup@東京
Ci tutorial
Ci tutorial
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
[機械学習]文章のクラス分類
[機械学習]文章のクラス分類
Sails workshop1
Sails workshop1
Django boodoo
Django boodoo
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
Mehr von yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Mehr von yoshikawa_t
(20)
Ionicで作るTechfeed
Ionicで作るTechfeed
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
HTML5開発最前線
HTML5開発最前線
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome Apps 概要
Chrome Apps 概要
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
Sencha touch vs j query mobile
Sencha touch vs j query mobile
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ウィジット
8.
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モード (スクリーンサイズによって表⽰示が変化)
18.
レスポンシブテーブル (Column Toggleモード)
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>
24.
レスポンシブテーブル (Reflowモード)
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.
レスポンシブグリッド
28.
レスポンシブグリッド グリッドレイアウトがモバイルでは縦に並ぶ
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でサポートするためのオプションが追加され ました。
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.
その他の変更更点
(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に関するノウハウの共有・情報交換
44.
Thank you!! (@yoshikawa_̲t)
Jetzt herunterladen