Contenu connexe Similaire à jQuery Mobile 最新情報 & Tips (20) jQuery Mobile 最新情報 & Tips2. Who?
吉川 徹/Toru Yoshikawa
html5j.org/HTML5とか勉強会スタッフ
Google API Expert ( Chrome API )
Chrome API Developers JP
allWebクリエイター塾/jQuery Mobile担当講師
Twitter: @yoshikawa_t
Blog: http://d.hatena.ne.jp/pikotea/
10. 新たなページアニメーションの追加
Turn
ページの左端を基準にして、回転するように現在ページ
がめくれ、次のページも回転しながら表示される
Flow
いったんページが縮小され、その後に左に移動して消え
る。縮小された次のページが右から笑われて拡大される
<a data-transition="turn">turn</a>
<a data-transition="flow">flow</a>
23. オンラインオーサリングツール
その他
Application Craft
Proto.io
Tiggzi
NS Basic/App Studio
MobDis
Mobjectify
24. Third Party Plugin
Pagination
http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/
28. Third Party Plugin
Actionsheet
https://github.com/hiroprotagonist/jquery.mobile.actionsheet
29. Third Party Plugin
960 Grid on JQuery Mobile
http://jeromeetienne.github.com/jquery-mobile-960/index.html
30. Third Party Plugin
その他
jquery-ui-map … jQueryとjQuery Mobile用の
Google Maps Plugin
Bartender … iOS風のタブバー
Camera slideshow … リッチなスライドショー
mobiscroll … ドラムロール式のDate Picker
Multiview … レスポンシブな2カラムビュー
Splitview … レスポンシブな2カラムビュー
33. PhoneGap
HTML/CSS/JavaScriptのWebア
プリケーションをネイティブアプリ
に変換可能
iOS、Android、Windows Phone
など様々なプラットフォームに対応
カメラなどのネイティブの機能を利
用可能
http://phonegap.com/
38. 2カラムレイアウト
@media all and ( min-width: 650px ){
.content-primary {
width: 45%;
float: right;
}
.content-secondary {
width: 45%;
float: left;
}
}
42. Performance
Page Animation:
link -> data-transition="none"
data-ajax="false" is bad knowhow.
Page Cache:
page -> data-dom-cache="true"
Page Prefetch:
link -> prefetch
$.mobile.loadPage();
Don't use too many custom select menu.
Don't use too many nested list.
43. latest build
<link rel="stylesheet" href="http://code.jquery.com/mobile/
latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></
script>
<script src="http://code.jquery.com/mobile/latest/
jquery.mobile.min.js"></script>
45. jQuery Mobile Tutorial:
Creating a Restaurant Picker
http://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a-
restaurant-picker-web-app.html
51. Roadmap
今月中に1.1の正式版をリリース予定
Download Builder Toolを提供予定
ThemeRoller update?
春には1.2をリリース予定
popup component ( like Simple Dialog )
fetch links
ajax navigation system ( data-target )
auto enhancement ( data-fragment )
54. Auto Ajax mechanism
初回アクセス
ページ1 ページ2 ページ3
<html> <html> <html>
<head> <head> <head>
<!-- link, head --> <!-- link, head --> <!-- link, head -->
</head> </head> </head>
<body> <body> <body>
<div data-role="page"> <div data-role="page"> <div data-role="page">
... ... ...
</div> </div> </div>
</body> </body> </body>
</html> </html> </html>
ajax ajax
55. Auto Ajax mechanism
初回アクセス
ページ1 ページ2 ページ3
<html> <html> <html>
<head> <head> <head>
<!-- link, head --> <!-- link, head --> <!-- link, head -->
</head> </head> </head>
<body> <body> <body>
<div data-role="page"> <div data-role="page"> <div data-role="page">
... ... ...
</div> </div> </div>
</body> </body> </body>
</html> </html> </html>
ajax ajax
56. Question 2
Mobile Bookmark Bubbleを使いたいが、JQM
のajaxのせいでうまく動かない
iPhoneでWebアプリのホーム画面登録を促す
「Mobile Bookmark Bubble」をjQuery
Mobileと併用してみた
http://d.hatena.ne.jp/a_kimura/
20110507/1304801259
62. Question 8
jQuery Mobile 1.0.1から1.1へアップ
デートする際の注意点など
基本的に動作はしますが、アニメーション
のデフォルトがfadeになったことと固定
ツールバーが変わっているのでそこだけ注
意です
64. pageshow event and Google Analytics
各ページの表示時にトラッキング
$(document).on('mobileinit', function(){
$(':jqmData(role="page")').live('pageshow', function () {
_gaq.push(['_trackPageview',
$.mobile.activePage.jqmData('url')]);
});
}