・JavaScript framework の jQuery のプラグインとして動作
・スクリプトを書かずにマークアップだけで画面遷移などが書ける
・Query Mobileの本体サイズは圧縮状態で < 20 KB
・Download から j-query-mobile-**.js と j-query-mobile-**.css をダウンロード
参考サイト
・「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey -
・吉川徹さんのプレゼンテーション「jQuery Mobile ［基礎編］」
・サンプル集
■ 設定項目
画面構成
data-role : [page | header | content | footer | navbar | button |
slider | controlgroup | coolapsible | collapsible-set |
fieldcontain | listview | list-divider]
class : [ui-bar | ui-grid-[a-d] | ui-block-* | ui-btn-left | ui-btn-right]
data-inline : [true | false] // 部品を1行にまとめる]
data-type : [horizontal | vertical]
画面をフルスクリーンにする
data-fullscreen : [true | false]
戻るボタンを自動生成するかどうか
data-backbtn : [true | false]
自動生成される戻るボタンのテキスト設定
data-back-btn-text : string
位置 (ヘッダーを固定するなど）
data-position : [fixed]
画面遷移のエフェクト
data-transition : [slide | slideup | slidedown | pop | fade | flip]
画面遷移のエフェクト方向
data-direction : [reverse]
ダイアログ/戻るボタン
data-rel : [dialog | back]
アイコン
data-icon : [arrow-l | arrow-r | arrow-u | arrow-d | delete |
plus | minus | check | gear | refresh | forward |
back | grid | star | alert | info | search | home | false]
data-split-icon : data-icon と同じ
アイコンの位置
data-iconpos : [top | bottom | right | left | notext ]
装飾
data-theme : [a | b | c | d | e]
入力ボックス関係
placeholder : string // テキストボックスに出るヒント
Expander
data-collapsed : [true | false]
リスト関係
data-inset : [true | false]
data-filter : [true | false] // 検索ボックスを表示するかどうか
data-theme : [a-e]
data-dividertheme : [a-e]
data-counttheme : [a-e]
data-splittheme : [a-e]
data-spliticon : [a-e]
部品の永続化（フッターを共有するなど）
data-id : [persistent]
■ ちょいと遊んでみた
yanzm's site
html ソース
<!DOCTYPE html>
<head>
<title>yanzm's site</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<!-- メインページ -->
<div data-role="page" id="foo">
<!-- メインページのヘッダ -->
<div data-role="header" data-backbtn="false">
<h1>yanzm's site</h1>
</div><!-- /header -->
<!-- メインページの内容。サブページへのボタン -->
<div data-role="content">
<p><img src="../images/yanzm.jpg"></p>
<p>Yuki Anzai</p>
<p>Blog : <a href="http://y-anz-m.blogspot.com">Y.A.M の雑記帳</a></p>
<p>twitter : <a href="http://twitter.com/yanzm">@yanzm</a></p>
<p>Android Applications</p>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h1>Libraroid - 図書館予約 -</h1>
<a href="https://market.android.com/details?id=yanzm.products.libraroid">Libraroid at Android Market</a>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>BooXpress</h1>
<a href="https://market.android.com/details?id=yanzm.products.expfa">BooXpress at Android Market</a>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>Wolfraroid</h1>
<a href="https://market.android.com/details?id=yanzm.products.wolfraroid">Wolfraroid at Android Market</a>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>SkyMemo</h1>
<a href="https://market.android.com/details?id=layout.example.section8_3">SkyMemo at Android Market</a>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>Suica Reader</h1>
<a href="https://market.android.com/details?id=yanzm.products.suicareader">Suica Reader at Android Market</a>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>FeliCaLiteBridge</h1>
<a href="https://market.android.com/details?id=yanzm.products.felicalitebridge">FeliCaLiteBridge at Android Market</a>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>FeliCaWriter</h1>
<a href="https://market.android.com/details?id=yanzm.products.felicawriter">FeliCaWriter at Android Market</a>
</div>
</div>
</div><!-- /content -->
<!-- メインページのフッター -->
<!--
<div data-role="footer" data-position="fixed" data-id="persistent">
</div>
-->
</div><!-- /page -->
</body>
# 画面遷移するとちらつきが気になったので入れませんでした。
0 件のコメント:
コメントを投稿