クラスを指定することで、どのようなアニメーションになるか/どの位置に表示されるかを理解しておこう。まずはアニメーションからだ。jQTouchでは、ソースから推するに3つのアニメーション用セレクタが用意されている。

  • flipSelector - フリップ表示用
  • slideInSelector - 横スライド表示用
  • slideUpSelector - 縦スライド表示用、hello_jqtouch.htmlで使用

さきほどのhello_jqtouch.htmlで、slideupクラスをflipやslideinに変更しどのようなアニメーションになるかを確認する。

動画
classにflipを指定。タッチするとフリップアニメーションがおこなわれる
$.jQTouch()時にslideInSelector: '.slidein'としてclassに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アプリでもおなじみの表示だ