「jQuery mobile」の記事一覧

jQuery mobileをベースに組んであるウェブサイトで デフォルトのテーマとは全く違うデザインにする場合の方法 jQuery mobile には、初期設定でA～Eの5種類のテーマが入っています。 一般的に、このテーマの色やグラデーションなどの装飾を取り外したいところには 装飾を無効にする data-role=”none” や 特定のテーマを部分指定する data-theme="[a-z]" で、 初期設定では存在しないｆ以降を指定する方法がしられています。 ただ、この方法でも 角丸やドロップシャドウなど全テーマ共通のスタイルが残っており これらをリセットするスタイルを被せてから任意のスタイルを設定する事もあります。 そこで、もう根本的にオリジナルのデザインにする場合のもう一つの方法を紹介します。 デフォルトテーマなしの jquery.mobile.structure-x.x.x.css を選ぶ jQuery mobileの基本構造で組み込むcssには A～Eの初期テーマありのものと、装飾ぬきでレイアウトのみ再現してくれるもの2種類があります。 「with Default theme」がついているものが、デフォルトテーマ込のCSSで 「without a theme」のほうが、テーマ抜きのCSSです。 テーマの設定項目を把握しやすいようオリジナルテーマを作成 装飾を設定できるclassをかんたんに把握するため jQuery mobile のテーマをカスタマイズできる公式サービスThemeRollerを使って任意のスタイルに近いテーマをつくります。 これで、jQuery mobile のjavascriptでどんなclassが割り付けられているのかひと通り把握できます。 作成できたらダウンロードし jquery.mobile.structure-x.x.x.css の次に読み込むようにします。 ThemeRollerでは設定しきれなかった部分 例えば、枠線の設定を上下左右で別々にできないなどの細かい設定を任意のものに書き換えるか別のCSSで上書き指定すれば かなり自由にjQuery mobileのデザインをカスタマイズすることができます。

webdev

「jQuery mobile」の記事一覧

jQuery mobileでfixedを使ってもヘッダやフッタが隠れないようにする

jQuery mobileのテーマを初期化してデザインをカスタマイズ