web-dev-qa-db-ja.com

JQueryMobileのデフォルトのデータテーマ

Jquery-mobileのデフォルトデータテーマを設定する方法を知っている人はいますか？

すべてのコンポーネントにデータテーマを設定する必要があるようです。

ページデータロールのデータテーマを設定しても、ロードされたリストやその他のコンポーネントによって尊重されません。

マニュアルの一部のページがありませんか？

javascriptmobilethemesjquery-mobile
21
Renato Aquino

Joelが言ったように、デフォルト値を上書きする必要があります。現時点では、他に方法はないようです。

Joelのサンプルコードを見てください。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Custom-scripting.jsをカスタマイズします

これは、構成可能ないくつかのオプションを含むサンプルコードです。

$(document).bind("mobileinit", function () {

    // Navigation
    $.mobile.page.prototype.options.backBtnText = "Go back";
    $.mobile.page.prototype.options.addBackBtn      = true;
    $.mobile.page.prototype.options.backBtnTheme    = "d";

    // Page
    $.mobile.page.prototype.options.headerTheme = "a";  // Page header only
    $.mobile.page.prototype.options.contentTheme    = "c";
    $.mobile.page.prototype.options.footerTheme = "a";

    // Listviews
    $.mobile.listview.prototype.options.headerTheme = "a";  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = "c";  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = "d";  // List divider

    $.mobile.listview.prototype.options.splitTheme   = "c";
    $.mobile.listview.prototype.options.countTheme   = "c";
    $.mobile.listview.prototype.options.filterTheme = "c";
    $.mobile.listview.prototype.options.filterPlaceholder = "Filter data...";
});

次のような他のオプションもあるはずです。

$.mobile.dialog.prototype.options.theme
$.mobile.selectmenu.prototype.options.menuPageTheme
$.mobile.selectmenu.prototype.options.overlayTheme

ここでより多くの設定を見つけることができるかもしれません： http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js

30
Smamatti

ネストされたリストビューの場合、ヘッダーテーマを制御するには、ネストされたヘッダーテーマを青に設定しているデフォルトのオプションをオーバーライドする必要があります。

これを行うには、jqueryの読み込みとjquery.mobile.jsの読み込みの間に以下を追加するだけです。

例：

Mobileinitイベントは実行直後にトリガーされるため、jQueryMobileをロードする前にイベントハンドラーをバインドする必要があります。したがって、JavaScriptファイルに次の順序でリンクすることをお勧めします。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

したがって、「custom-scripting.js」に次のように入力します...

$(document).bind("mobileinit", function () {
   $.mobile.listview.prototype.options.headerTheme = "a";
});

ここで、「a」はネストされたヘッダーに適用するテーマです。

または、jqueryモバイルソースでオーバーライドして、「headerTheme」を検索すると、5020行目あたりになります。

9
jBeas

テーマa、b、c、d、eはすべてcssファイルにあります。カスタムテーマが必要な場合は、f-zを使用して、aをコピーし、テーマ文字に変更できます。 data-theme = "z"を要素に追加します

<body> 
<div data-role="page" id="apply" data-theme="z">
...
</div>
</body>
7
Phill Pafford

私が見た限りでは、ページdivのテーマを設定する必要があり、それは内部で継承されます。

1
naugtur