JQUERY MOBILE

ここは jQuery Mobile を使って作ったサンプルページです。スマートフォン向けのページなので、できたらスマートフォンで見てくださいね!

まずこのページでは、jQuery Mobile ならではの UI デザインをご紹介しています。以下のようなリストをはじめ、ボタンやフォーム関連の UI が、スマートフォン向けに使いやすくデザインされていますね!また、これら UI の色などは、jQuery Mobile 専用の ThemeRoller を使えば、簡単に作ることができます。

LIST

リストには、リストのヘッダーを入れたり、アイコンやサムネイルを使う事もできます!もちろん普通にマークアップしたリストと比べると、違いは一目瞭然ですね!

BUTTONS

ボタンを作るのもとっても簡単。もちろん色を変更するのも簡単です。先ほど紹介した ThemeRoller で、いくつかパターンを作っておけば好きなボタンの色を選べる様になります!

Button Button

また、jQuery Mobile では最初からアイコンも用意されているので、簡単にボタンにアイコンを付ける事だってできます。アイコンの位置も、上にしたり下にしたりすることもできます!

Button

Button

Button

アイコンの種類も、以下の様にたくさん用意されていますね!

arrow-l arrow-r arrow-u arrow-d plus minus delete check gear forward back refresh home alert search grid star info

FORM CONTROLS

テキストボックスやチェックボックス、ラジオボタンなどのフォームのUIのデザインです。スマートフォンでの使い勝手を考えて、タッチしやすいデザインになっていますね!

ラジオ:

チェックボックス: