ここは jQuery Mobile を使って作ったサンプルページです。スマートフォン向けのページなので、できたらスマートフォンで見てくださいね!
まずこのページでは、jQuery Mobile ならではの UI デザインをご紹介しています。以下のようなリストをはじめ、ボタンやフォーム関連の UI が、スマートフォン向けに使いやすくデザインされていますね!また、これら UI の色などは、jQuery Mobile 専用の ThemeRoller を使えば、簡単に作ることができます。
リストには、リストのヘッダーを入れたり、アイコンやサムネイルを使う事もできます!もちろん普通にマークアップしたリストと比べると、違いは一目瞭然ですね!
ボタンを作るのもとっても簡単。もちろん色を変更するのも簡単です。先ほど紹介した ThemeRoller で、いくつかパターンを作っておけば好きなボタンの色を選べる様になります!
また、jQuery Mobile では最初からアイコンも用意されているので、簡単にボタンにアイコンを付ける事だってできます。アイコンの位置も、上にしたり下にしたりすることもできます!
アイコンの種類も、以下の様にたくさん用意されていますね!
arrow-l arrow-r arrow-u arrow-d plus minus delete check gear forward back refresh home alert search grid star info
テキストボックスやチェックボックス、ラジオボタンなどのフォームのUIのデザインです。スマートフォンでの使い勝手を考えて、タッチしやすいデザインになっていますね!