jQueryMobileのデザイン変更
デフォルトでも使えるけど見た目を変えたいのならデザイン変更が必要
HTMLのサイトならCSSで変えるけど
jQueryMobileなら
テーマフレームワークを使えば簡単にデザイン変更できる
このテーマフレームワークは
a~zまであり
a~eがjQueryMobileから提供されていて
f~zはユーザーが独自定義できる
テーマを指定するには
data-theme=””
で a~z を指定する
例えば、ボタンにテーマaを適用するには
<a href="#" data-role="button" data-theme="a">テーマを変えたボタン</a>
となる
ノーマルのほうも一緒に出すとわかりやすいかも
<a href="#" data-role="button" data-theme="a">テーマを変えたボタン</a> <a href="#" data-role="button">テーマなしのボタン</a>
テーマは、ボタン以外にも使える
テキストフィールド
チェックボックス
などにも使える
また、1つずつでは面倒くさいので
まとめて設定したいのなら
data-role=”header”
data-role=”content”
へ指定すれば一括変換も可能
ただし、面倒くさいからといって
data-role=”page”
へ設定しても
data-role=”content”
data-role=”navbar”には適用されるけど
data-role=”header”
data-role=”footer”
には適用されない
このため、全部同じテーマにするには
data-role=”page”
data-role=”header”
data-role=”footer”
へテーマを指定することになる
ソースにすると
<div data-role="page" id="top" data-theme="e"> <div data-role="header" data-theme="e"> <h1>テーマ</h1> </div> <div data-role="content"> <a href="#" data-role="button">ボタン</div> </div> <div data-role="footer" data-theme="e"> </div> </div>
となる
カスタムデータ属性ではなく、Javascriptでもできる
同じテーマにするには
やり方は
$(document).on("mobileinit",function(e){
$.mobile.page.prototype.options.theme="e";
$.mobile.page.prototype.options.headerTheme="e";
$.mobile.page.prototype.options.footerTheme="e";
});
このJavascriptを共通ファイルへ書いておけば各HTMLファイルへ書く必要がないし
テーマを忘れることもなくなる