デザインカスタマイズ｜1日でマスターjQuery Mobile初心者の記 (5)

デザインカスタマイズは2点の方法があります。

• 気合いでCSSを変更する
• 公式ツールであるthemeroller

themeroller でのカスタマイズはhttp://jquerymobile.com/themeroller/より、デザインをカスタマイズができます。

A~Eまではすでに用意されているデザインをカスタマイズする方法で使用します。新たにオリジナルデザインを作成したい場合はFにオリジナルデザインを作成した後、ダウンロードしてそれを読込み、 data-theme="f"　とする事で反映されます。 サイト上にはテンプレートには様々な種類が出ていますので、あったものを利用するもいいと思います。

themeroller でできる事はthemeroller 上で変更して、そのあと細かいデザイン変更はそれを上書きする方法がいいようです。 ただ、その際のjQuery Mobileの構造をきっちりと知っておく事が必要です。

ページは上から以下の構成になっています。

• ui-header
• ui-content
• ui-footer

ボタンは外側から以下のようになっています。

• ui-button
• ui-btn-inner
• ui-btn-text

また、状態の変化は.ui-button-up-c、.ui-button-hover-c、.ui-button-down-cなどありますので、それぞれの状態に指定するときはそれらが必要となります。

リストにいたっては構造が複雑な入れ子になっていますので、今回いただいた資料の中にあるこの図が大変参考になります。

定義済みクラスの使い方がデザインカスタマイズの第一歩のようです。

以下はちょっと私のような初心者には難しいかもしれませんが、 オリジナルにデザインやライブラリなど、jQuery Mobileからの装飾や動作の領域を外したい場合は

$(document).on('mobileinit', function(){

$.mobile.ignoreContentEnabled = true;
});

のように、jsで設定を有効化して

 <div data-enhance="false" data-ajax="false" >
<!-- jQm free-->
</div>

のように　ata-enhance　data-ajax　をfalseに設定します。

また、jQuery Mobileのイベント

• pageinit (ページの表示)
• pageshow (ページの初期化)

こちらもカスタマイズに不可欠な要素として記憶にとどめておく必要がありそうです。

【まとめ】

できるところはthemeroller でカスタマイズ。その後細かい部分は定義済みクラスをきちんと把握してカスタマイズするのが効率的かも。