jQTouchの使い方とclass指定による挙動のまとめ http://www.ark-web.jp/sandbox/wiki/6142.html

[edit]

目次

[edit]

概要

[edit]

使い方

上記のサンプル画像

[edit]

動作確認

[edit]

メモ: chromeでユーザーエージェントを変更する方法

[edit]

チートシート的なモノ

以降、動作確認できるものを↓こちらに置いてあります。
(Optionsの動作確認できるものは作ってません)

以降、各種classを指定した場合にどのように変化するかをまとめたものです。
実際の挙動については上記チートページから確認できます。

チートページのイメージ

[edit]

Options

オプション名オプション値デフォルト値サンプル備考
iconアイコン用画像ファイルのパスnullicon: 'js/demos/main/jqtouch.png'jpg,gif,pngかな?
addGlossToIcontrue:iconで指定した画像を使う / false:iPhone側が設定するtrueaddGlossToIcon: falseiconがセットされていないとこれもセットされない
fixedViewporttrue:viewportを指定する / false:何も指定しないtruefixedViewport: trueviewportは画面サイズを指定するmetaタグ。trueで右のタグが吐かれる。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
fullScreentrue:フルスクリーンを指定する / false:何も指定しないtruefullScreen: truetrueで右のタグが吐かれる。<meta name="apple-mobile-web-app-capable" content="yes" />
fullScreenClassフルスクリーン時のclassfullscreenfullScreenClass: 'my-fullscreen'
startupScreenアプリ起動時に表示する画像ファイルパスnullstartupScreen: 'js/demos/main/jqt_startup.png'jpg,gif,pngかな?
statusBarblack or black-translucent (黒半透明)defaultstatusBar: 'black-translucent'ステータスバーの表示色の設定。<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
preloadImagesプレロードする画像ファイルパスnullpreloadImages: ['js/themes/jqt/img/back_button.png', ... , 'js/themes/jqt/img/loading.gif']画像ファイルパスの順序は問わない
useAnimationstrue:アニメーション有り / false:無しtrueuseAnimations: true
useFastTouchtrue:trueuseFastTouch: true
[edit]

class - 画面の上につくボタン

class形状表示場所サンプル文字数制限備考
button角丸四角画面右上<a class="button" href="#hoge">hoge</a>特に無し(全角5文字以内が妥当?)画面遷移する場合は、アニメーション指定をする必要があるかもしれません。
add角丸四角画面右上<a class="add" href="#">+</a>特に無し「+」と書くのが通例らしいこれ、そのものに何か機能があるわけではないので、JavaScriptでonclickイベントで処理するなどで利用する。もちろん、 + クリックで画面遷移してもいい。
back左矢印四角画面左上<a class="back" href="#">Back</a>全角3文字以内(それ以上与えると…で切られる)hrefに何を入れててもhistory.backのような動きをする
cancel角丸四角画面左上<a class="cancel" href="#">やめる</a>特に無し(全角5文字以内が妥当?)挙動はbackと変わらない。形状と文字数制限の違いだけっぽい
[edit]

class - メインに表示するボタン

class形状サンプル文字数制限備考
whiteButton角丸四角-白<a class="whiteButton" href="#hoge">hoge</a>特に無し長ければ2段になる(全角10文字以内が妥当?)
grayButton角丸四角-黒<a class="grayButton" href="#hoge">hoge</a>特に無し長ければ2段になる(全角10文字以内が妥当?)
[edit]

class - アニメーション

セレクタ名動きサンプル備考
backSelector1つ前の画面に来た時と同じアニメーションで戻る<a class="back" href="#">Back</a>デフォルト「.back, .cancel, .goback」の3つが割り当てられている
cubeSelector4角形の2面に今と次の画面を描画してあり、サイコロのように回転するアニメーション<a class="cube" href="#hoge">hoge</a>デフォルト「.cube」。ディスプレイが小さい場合は、回転というよりslideと同じように見えるかもしれない…
fadeSelector次の画面がフェードインするアニメーション<a class="fade" href="#hoge">hoge</a>デフォルト「.fade」
dissolveSelector今の画面が消えつつ次の画面が出てくるクロスフェードアニメーション<a class="dissolve" href="#hoge">hoge</a>デフォルト「.dissolve」
flipSelectorトランプのカードを裏返すようなアニメーション<a class="flip" href="#hoge">hoge</a>デフォルト「.flip」
popSelector新しい画面が奥からフェードインしてくるようなアニメーション<a class="pop" href="#hoge">hoge</a>デフォルト「.pop」
slideSelector新しい画面が右から左にスライドするアニメーション<ul><li><a href="#hoge">hoge</a></li></ul>「body > * > ul li a」とあるので、ul li a の場合のデフォルトの挙動
slideupSelector新しい画面が下から上にスライドするアニメーション<a class="slideup" href="#hoge">hoge</a>デフォルト「.slideup」
swapSelector2枚のトランプのカードをシャッフルする感じで入れ替えるようなアニメーション<a class="swap" href="#hoge">hoge</a>デフォルト「.swap」
[edit]

class - ul li

class形状/変化サンプル備考
blueButton角丸四角-青 のボタンになる<ul><li><a class="blueButton" href="#hoge">hoge</a></li></ul>
whiteButton角丸四角-白 のボタンになる<ul><li><a class="whiteButton" href="#hoge">hoge</a></li></ul>
grayButton角丸四角-黒 のボタンになる<ul><li><a class="grayButton" href="#hoge">hoge</a></li></ul>
arrowリストの右に「>」と表示される<ul><li class="arrow">hoge</li></ul>
forwardリストの右に「(>)」と表示される<ul><li class="forward">hoge</li></ul>
individualリストを左右に分割して表示する<ul class="individual"><li>hoge</li><li>fuga</li></ul>「hoge」「fuga」のように 2つになる。3つ以上に分けたい場合は、theme.cssをカスタマイズする
edgetoedge角丸ではない四角いリストで表示する<ul class="edgetoedge"><li>hoge</li></ul>
sep余白を削って細いリストで表示する<ul class="edgetoedge"><li class="sep">hoge</li></ul>「ul.edgetoedge」でのみ使用できる。
[edit]

リスト時 特殊タグ - ul li xxx

タグ用途サンプル備考
smallリストの右に「(xxx)」と表示される<ul><li><a href="#hoge">hoge</a><small class="counter">1</small></li></ul>aタグ部分をただのテキストにすると、small部分の表示位置がズレる
em文字の太さが通常(細め)で表示される<ul class="edgetoedge"><li><em>hoge</em></li></ul>「ul.edgetoedge」でのみ使用できる。
[edit]

class - ul のテーマ種類

class形状/変化サンプル備考
plastic背景がリスト毎に濃淡で表示される<ul class="plastic"><li>hoge</li><li>fuga</li></ul>CSS3の「ul.plastic li:nth-child(odd)」が動いてないのか表示されないかも?
metalリストの縦が長めで表示される<ul class="metal"><li>hoge</li><li>fuga</li></ul>
edgetoedge上述のように角丸でない四角いリスト<ul class="edgetoedge"><li>hoge</li><li>fuga</li></ul>
[edit]

class - div

class形状/変化サンプル文字数制限備考
info該当要素に背景が付き読みやすくなる<div class="info">hoge</div>特に無し
toolbar画面上部にページタイトルのように表示する<div class="toolbar"><h1>hoge</h1></div>全角6文字以内(それ以上与えると…で切られる)

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, ライブラリ?


添付ファイル: fileimg-02.jpg 1115件 [詳細] fileimg-01.jpg 1489件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-09-16 (木) 11:47:22 (2276d)

アークウェブのサービスやソリューションはこちら