• buttonサンプル
• addサンプル
• backサンプル
• cancelサンプル

• whiteButtonサンプル
• grayButtonサンプル

• backサンプル
• cubeサンプル
• fadeサンプル
• dissolveサンプル
• flipサンプル
• popサンプル
• slideサンプル
• slideupサンプル
• swapサンプル

• blueButtonサンプル
• whiteButtonサンプル
• grayButtonサンプル
• arrowサンプル
• forwardサンプル
• individualサンプル
• edgetoedgeサンプル
• sepサンプル

• smallサンプル
• emサンプル

• plasticサンプル
• metalサンプル
• edgetoedgeサンプル

• infoサンプル
• toolbarサンプル

---

• jQTouchの本家サンプル

Back ホームヘ

• 形状：角丸四角
• 表示場所：画面右上
• サンプル：画面右上参照。
• コード：
  • <a class="button goback" href="#home">ホームヘ</a>
• 文字数制限：特に無し
  （全角5文字以内が妥当?）
• 注意点：画面遷移する場合は、アニメーション指定をする必要があるかもしれません。
  (iPadで戻らない現象を確認しています)

ホームへ戻る

Back +

• 形状：角丸四角
• 表示場所：画面右上
• サンプル：画面右上参照。
• コード：
  • <a class="add" href="#" onclick="alert('+が押されました')">+</a>
• 文字数制限：特に無し
  （「+」と書くのが通例）
• 補足：これ、そのものに何か機能があるわけではないので、JavaScriptでonclickイベントで処理するなどで利用する。
  もちろん、 + クリックで画面遷移してもいい。

ホームへ戻る

Back

• 形状：左矢印四角
• 表示場所：画面左上
• サンプル：画面左上参照。
• コード：
  • <a class="back" href="#">Back</a>
• 文字数制限：全角3文字以内
  （それ以上与えると…で切られる）
• 注意点：hrefに何を入れててもhistory.backのような動きをする。

ホームへ戻る

Cancel

• 形状：角丸四角
• 表示場所：画面左上
• サンプル：画面左上参照。
• コード：
  • <a class="cancel" href="#">Cancel</a>
• 文字数制限：特に無し
  （全角5文字以内が妥当?）
• 注意点：挙動はbackと変わらない。形状と文字数制限の違いだけっぽい。

ホームへ戻る

Back

• 形状：角丸四角-白
• サンプル：

home

• コード：
  • <a class="whiteButton" href="#home">home</a>
• 文字数制限：特に無し長ければ2段になる
  （全角10文字以内が妥当?）

ホームへ戻る

Back

• 形状：角丸四角-黒
• サンプル：

home

• コード：
  • <a class="grayButton" href="#home">home</a>
• 文字数制限：特に無し長ければ2段になる
  （全角10文字以内が妥当?）

ホームへ戻る

Back

• 動き：1つ前の画面に来た時と同じアニメーションで戻る
• サンプル：このページの一番下の「ホームへ」ボタンを実行した時の挙動
• コード：
  • <a class="button goback" href="#home">ホームヘ</a>
• 指定できるclassは、デフォルトで「.back, .cancel, .goback」の3つが割り当てられている

ホームへ戻る

Back

• 動き：4角形の2面に今と次の画面を描画してあり、サイコロのように回転するアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="cube" href="#anim-cube">cubeサンプル</a>
• 指定できるclassは、デフォルトで「.cube」が割り当てられている
• 補足：ディスプレイが小さい場合は、回転というよりslideと同じように見えるかもしれない…

ホームへ戻る

Back

• 動き：次の画面がフェードインするアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="fade" href="#anim-fade">fadeサンプル</a>
• 指定できるclassは、デフォルトで「.fade」が割り当てられている

ホームへ戻る

Back

• 動き：今の画面が消えつつ次の画面が出てくるクロスフェードアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="dissolve" href="#anim-dissolve">dissolveサンプル</a>
• 指定できるclassは、デフォルトで「.dissolve」が割り当てられている

ホームへ戻る

Back

• 動き：トランプのカードを裏返すようなアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="flip" href="#anim-flip">flipサンプル</a>
• 指定できるclassは、デフォルトで「.flip」が割り当てられている

ホームへ戻る

Back

• 動き：新しい画面が奥からフェードインしてくるようなアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="pop" href="#anim-pop">popサンプル</a>
• 指定できるclassは、デフォルトで「.pop」が割り当てられている

ホームへ戻る

Back

• 動き：新しい画面が右から左にスライドするアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <ul> <li> <a href="#anim-slide">slideサンプル</a> </li> </ul>
• 「body > * > ul li a」とあるので、ul li a の場合のデフォルトの挙動

ホームへ戻る

Back

• 動き：新しい画面が下から上にスライドするアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="slideup" href="#anim-slideup">slideupサンプル</a>
• 指定できるclassは、デフォルトで「.slideup」が割り当てられている

ホームへ戻る

Back

• 動き：2枚のトランプのカードをシャッフルする感じで入れ替えるようなアニメーション
• サンプル：このページへ遷移してきた時の挙動
• コード：
  • <a class="swap" href="#anim-swap">swapサンプル</a>
• 指定できるclassは、デフォルトで「.swap」が割り当てられている

ホームへ戻る

Back

• 形状/変化：角丸四角-青 のボタンになる
• サンプル：↓下記参照
• home
• コード：
  • <ul> <li> <a class="blueButton" href="#home">home</a> </li> </ul>

ホームへ戻る

Back

• 形状/変化：角丸四角-白 のボタンになる
• サンプル：↓下記参照
• home
• コード：
  • <ul> <li> <a class="whiteButton" href="#home">home</a> </li> </ul>

ホームへ戻る

Back

• 形状/変化：角丸四角-黒 のボタンになる
• サンプル：↓下記参照
• home
• コード：
  • <ul> <li> <a class="grayButton" href="#home">home</a> </li> </ul>

ホームへ戻る

Back

• 形状/変化：リストの右に「＞」と表示される
• サンプル：↓下記参照
• Go home
• コード：
  • <ul> <li class="arrow"> <a href="#home">Go home</a> </li> </ul>

ホームへ戻る

Back

• 形状/変化：リストの右に「(＞)」と表示される
• サンプル：↓下記参照
• Go home
• コード：
  • <ul> <li class="forward"> <a href="#home">Go home</a> </li> </ul>

ホームへ戻る

Back

• 形状/変化：リストを左右に分割して表示する
• サンプル：↓下記参照

• hoge1
• fuga1
• hoge2
• fuga2

• コード：
  • <ul class="individual"> <li>hoge1</li> <li>fuga1</li> <li>hoge2</li> <li>fuga2</li> </ul>
• 補足：「hoge1」「fuga1」のように 2つになる。3つ以上に分けたい場合は、theme.cssをカスタマイズする
• 注意点：デフォルトのCSSは、なぜか2行目以降のインデントがズレる…

ホームへ戻る

Back

• 形状/変化：角丸ではない四角いリストで表示する
• サンプル：↓下記参照

• hoge
• fuga

• コード：
  • <ul class="edgetoedge"> <li>hoge</li> <li>fuga</li> </ul>

ホームへ戻る

Back

• 形状/変化：余白を削って細いリストで表示する
• サンプル：↓下記参照

• f
• fuga

• コード：
  • <ul class="edgetoedge"> <li class="sep">f</li> <li>fuga</li> </ul>
• 注意点：「ul.edgetoedge」でのみ使用できる。

ホームへ戻る

Back

• 用途：リストの右に「(xxx)」と表示される
• サンプル：↓下記参照

• home1

• コード：
  • <ul> <li> <a href="#home">home</a> <small class="counter">1</small> </li> </ul>
• 注意点： aタグ部分をただのテキストにすると、small部分の表示位置がズレる

ホームへ戻る

Back

• 用途：文字の太さが通常(細め)で表示される
• サンプル：↓下記参照

• emなhoge
• emじゃないhoge

• コード：
  • <ul class="edgetoedge"> <li><em>emなhoge</em></li> <li>emじゃないhoge</li> </ul>
• 注意点：「ul.edgetoedge」でのみ使用できる。

ホームへ戻る

Back

• 用途：背景がリスト毎に濃淡で表示される
• サンプル：↓下記参照

• hoge1
• fuga1
• hoge220
• fuga2

• コード：
  • <ul class="plastic"> <li class="arrow">hoge1</li> <li class="forward">fuga1</li> <li><a href="#">hoge2</a><small class="counter">20</small></li> <li>fuga2</li> </ul>
• 注意点：CSS3の「ul.plastic li:nth-child(odd)」が動いてないのか表示されないかも?

ホームへ戻る

Back

• 用途：リストの縦が長めで表示される
• サンプル：↓下記参照

• hoge1
• fuga1
• hoge220
• fuga2

• コード：
  • <ul class="metal"> <li class="arrow">hoge1</li> <li class="forward">fuga1</li> <li><a href="#">hoge2</a><small class="counter">20</small></li> <li>fuga2</li> </ul>
• 注意点：metalでは class="forward" は利用できない

ホームへ戻る

Back

• 用途：角丸でない四角いリストで表示される
• サンプル：↓下記参照

• hoge1
• fuga1
• hoge220
• fuga2

• コード：
  • <ul class="edgetoedge"> <li class="arrow">hoge1</li> <li class="forward">fuga1</li> <li><a href="#">hoge2</a><small class="counter">20</small></li> <li>fuga2</li> </ul>
• 注意点：edgetoedgeでは class="forward" は利用できない

ホームへ戻る

Back

• 形状/変化：該当要素に背景が付き読みやすくなる
• サンプル：↓下記参照

• コード：
  • <div class="info"> hoge </div>
• 文字数制限：特に無し

ホームへ戻る

Back

• 形状/変化：画面上部にページタイトルのように表示する
• サンプル：画面上部参照
• コード：
  • <div class="toolbar"> <h1> toolbarサンプル </h1> </div>
• 文字数制限：全角6文字以内
  （それ以上与えると…で切られる）

ホームへ戻る