jQuery Mobileのコトハジメ
Yuuです。
VPSであーだこーだしていて、PHPから書きだされたファイルがApache権限ではてさて、SuPHP?パフォーマンス?fastcgi?って感じの初心者っぷりでgoogle先生をを頼り中な今日この頃。
さて、本題。 スマートフォンサイト作るとき、jQuery Mobileにお世話になってます。
- スマートフォンサイトのUIをカッコ良くさせたい。
- さっくり実装させたい。
こんなときに便利でお手軽なjQuery Mobile。 とりあえず、コトハジメ的に備忘録です。
はじめに
- 使用Ver:1.0.1
わからないことは、jQuery MobileのDEMOを見る。 英語がわからない時は、日本語リファレンス見る。
デモサイト見ればレイアウト実装のサンプルが豊富なので、たいていのことはカバーできます。
初期テンプレート
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
公式を参考にすると上記のような感じになります。
jQuery Mobile 初期設定
エラーメッセージなどが英語だったりするので設定を変更するために下記のJSを読み込みます。
1
|
|
1 2 3 4 5 6 7 8 |
|
ポイントは、上記スクリプトをjQuery MobileのJS読み込み前に読み込むこと。
参考: グローバル設定
jQuery Mobile CSS初期設定
文字数が要素内で一定値をオーバーすると、文字が省略されてしまうので、それをCSSで解除してあげる。
1 2 3 4 5 6 7 8 9 |
|
デザインを変更する
デフォルトのデザインをそのまま使う場合はあまりないので、それぞれのデザインをオリジナルなものに変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
data-theme=“f"をそれぞれの要素に追加しました。
data-themeによって、スタイルの切り替えが可能。 jQuery Mobileでは、aからeまでのスタイルがセットされているので、何もスタイルがセットされていないf~zなど任意のスタイルを指定してあげれば、当然スタイルがセットされてないのでデザインが解除されます。
あとはそれぞれいつも通りにCSSでデザイン作るだけです。
jQuery Mobileのデフォルトスタイルをカスタマイズ
テーマが折角あるようなのでテーマcssを作りたい。
JavaScriptで適用されているCSSスタイルが何なのかを見るときは、ブラウザの要素検証だったり、firebugだったりで適用CSSを確認しますよね。 それをすべて追って、上書きするのは大変です。
そんなときは、jQuery MobileのTheme Rollerを使います。 このウェブツールを使うと、jQuery Mobileのテーマをちょちょいと作ることができます。
カラーコード指定で迷った場合は、Adobe Kulerからも選択できます。 ちなみにKulerをどう反映すればいいか最初はわからなかったんですが、カラーアイコン(?)をドラック&ドロップで反映できます。 そのデザイン反映したやつを左上のDownload Themeでダウンロードする。
あとはそれを組み込んで随時改修していきましょう。