クラスを指定することで、どのようなアニメーションになるか/どの位置に表示されるかを理解しておこう。まずはアニメーションからだ。jQTouchでは、ソースから推するに3つのアニメーション用セレクタが用意されている。
- flipSelector - フリップ表示用
- slideInSelector - 横スライド表示用
- slideUpSelector - 縦スライド表示用、hello_jqtouch.htmlで使用
さきほどのhello_jqtouch.htmlで、slideupクラスをflipやslideinに変更しどのようなアニメーションになるかを確認する。
| 動画 | |||||
|---|---|---|---|---|---|
|
|
|
||||
|
|
||||
横スライド表示はデフォルトでは<ul><li>内にある<a>のみに対して設定される。アニメーションの統一感を出す場合は、とくにオプションを変更する必要はないだろう。
続けて見た目や表示位置に影響するクラスだ。
ボタンの見た目と表示位置について
- .button … ふつうのボタン、画面右上に表示(button.png)
- .blueButton … 青基調のボタン、画面左上に表示(blueButton.png - Appleテーマのみ)
- .whiteButton … 白基調のボタン、画面幅いっぱいに表示(whiteButton.png)
.grayButton … 灰色基調のボタン、画面幅いっぱいに表示(grayButton.png)
.back … 左矢印のボタン、画面左上に表示(back_button.png)
- .leftButton … 画面左上に表示(画像なし、ほかのクラスと併用)
- .cancel … 画面左上に表示(button.png)
- .add … 文字サイズ24px、ボールド、画面右上に表示(button.png)
実際にこれらのクラスを指定したとき、iPhoneでどのようにボタンが配置されるかを確認する。
|
|
|
buttonを指定。画面右上に表示される |
whiteButtonを指定。画面幅いっぱいに表示される |
|
|
|
grayButtonを指定。whiteButton同様、画面幅いっぱいに表示される |
backを指定。左矢印マークのボタンが画面左上に表示される |
|
|
|
cancelを指定。画面左上に表示される |
addを指定。画面右上に強調されて表示される |
「.back」「.cancel」「.goback」はデフォルトでbackSelectorとして指定されている。キャンセル処理や戻りボタンを表示したい場面で使おう。「.add」を使う場合は文字サイズを調節するか、表示文字列によくありがちな「+」を用いたほうが良いだろう。
|
|
「add」を指定し、「Test」の代わりに「+」を表示。カレンダーアプリやToDoアプリでもおなじみの表示だ |
