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 ソース
view plainprint?
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>yanzm's site</title>  
  4. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />  
  5. <script src="http://code.jquery.com/jquery-1.5.min.js"></script>  
  6. <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>  
  7. </head>  
  8. <body>  
  9.   
  10. <!-- メインページ -->  
  11. <div data-role="page" id="foo">  
  12.   
  13. <!-- メインページのヘッダ -->  
  14.     <div data-role="header" data-backbtn="false">  
  15.         <h1>yanzm's site</h1>  
  16.     </div><!-- /header -->  
  17.   
  18. <!-- メインページの内容。サブページへのボタン -->  
  19.     <div data-role="content">  
  20.         <p><img src="../images/yanzm.jpg"></p>  
  21.         <p>Yuki Anzai</p>  
  22.         <p>Blog : <a href="http://y-anz-m.blogspot.com">Y.A.M の雑記帳</a></p>  
  23.         <p>twitter : <a href="http://twitter.com/yanzm">@yanzm</a></p>  
  24.   
  25.         <p>Android Applications</p>  
  26.         <div data-role="collapsible-set">   
  27.         <div data-role="collapsible" data-collapsed="true">   
  28.           <h1>Libraroid - 図書館予約 -</h1>  
  29.           <a href="https://market.android.com/details?id=yanzm.products.libraroid">Libraroid at Android Market</a>  
  30.         </div>   
  31.         <div data-role="collapsible" data-collapsed="true">   
  32.           <h1>BooXpress</h1>   
  33.           <a href="https://market.android.com/details?id=yanzm.products.expfa">BooXpress at Android Market</a>  
  34.         </div>   
  35.         <div data-role="collapsible" data-collapsed="true">   
  36.           <h1>Wolfraroid</h1>   
  37.           <a href="https://market.android.com/details?id=yanzm.products.wolfraroid">Wolfraroid at Android Market</a>  
  38.         </div>   
  39.         <div data-role="collapsible" data-collapsed="true">   
  40.           <h1>SkyMemo</h1>   
  41.           <a href="https://market.android.com/details?id=layout.example.section8_3">SkyMemo at Android Market</a>  
  42.         </div>   
  43.         <div data-role="collapsible" data-collapsed="true">   
  44.           <h1>Suica Reader</h1>   
  45.           <a href="https://market.android.com/details?id=yanzm.products.suicareader">Suica Reader at Android Market</a>  
  46.         </div>   
  47.         <div data-role="collapsible" data-collapsed="true">   
  48.           <h1>FeliCaLiteBridge</h1>   
  49.           <a href="https://market.android.com/details?id=yanzm.products.felicalitebridge">FeliCaLiteBridge at Android Market</a>  
  50.         </div>   
  51.         <div data-role="collapsible" data-collapsed="true">   
  52.           <h1>FeliCaWriter</h1>   
  53.           <a href="https://market.android.com/details?id=yanzm.products.felicawriter">FeliCaWriter at Android Market</a>  
  54.         </div>   
  55.         </div>   
  56.     </div><!-- /content -->  
  57.   
  58. <!-- メインページのフッター -->  
  59. <!--  
  60.     <div data-role="footer" data-position="fixed" data-id="persistent">  
  61.     </div>  
  62. -->  
  63. </div><!-- /page -->  
  64. </body>  

# 画面遷移するとちらつきが気になったので入れませんでした。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)