2011年2月15日火曜日

jQuery Mobile でちょっと遊んでみた。

jQuery Mobile
 ・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 件のコメント:

コメントを投稿