2011-02-03 7 views
21

誰もがjqueryのモバイル用デフォルトデータ・テーマを設定する方法を知っていますか?jQueryのモバイル・デフォルト・データ・テーマ

すべてのコンポーネントのデータテーマを設定する必要があるようです。あなたはそれがロードされたリストや他のコンポーネントから尊敬されていないページデータの役割のためにデータ・テーマを設定しても

マニュアルの一部が欠けていますか?

答えて

1

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

+0

naugtur は、i'veは、いくつかのケースでは、ネストされたリストのように、テーマの設定が尊重されていないことが、試してみました。 –

+0

JQM alpha3を試してみてください - それは今日リリースされました – naugtur

+0

私は同じ問題を抱えています。折りたたみ可能な要素にはすべて、データテーマ "d"を持つ閉じる/開くアイコンがあり、ページのために定義していません... – cssmaniac

7

テーマ、B、カスタムテーマは、あなたが、F-Zを使用してコピーし、あなたのテーマの手紙にそれを変更することができますしたい場合、C、DおよびEが、すべてのCSSファイルです。あなたが青にネストされたヘッダのテーマを設定しているデフォルトのオプションを上書きする必要があるヘッダーのテーマを制御するために、あなたの要素のネストされたリストビューの

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

にデータ・テーマ=「Z」を追加します。あなたは、単にjQueryの読み込みとjquery.mobile.jsロードの間、次の中に追加します。これを行うに

例:あなたはjQueryのモバイルがロードされる前に、イベントハンドラをバインドする必要があります

、mobileinitイベントはすぐに実行時にトリガされますので。 はこのように、我々は次の順序で JavaScriptファイルへのリンクをお勧めします:

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

だから、 "カスタム・scripting.js" に次のように置く...

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

「A "はネストされたヘッダーに適用するテーマです。

jqueryモバイルソースでオーバーライドするだけで、" headerTheme "を検索すると、5020

30

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

ジョエルのサンプルコードを取る:

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

カスタム-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 
0123:また、のような他のオプションも

あなたはここでより多くの設定を見つけることができるかもしれない:http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js

+0

ねえ、上記のような入れ子リストビューのヘッダーにカスタムボタンを追加する方法はありますか?戻るボタン... ??? –

+0

@ umair.ali私が知っている「組み込み」の方法はありません。 - スクリプトを使ってhtml構造体を拡張し、対応するマークアップを作成するためにjQuery Mobileを起動することができます。 - たぶんstackoverflowで独自の質問を作成する方が良いです。あなたが一般的なナビゲーション要素を探しているなら、パネルのようなJQMの新機能 - http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-swipe-openを見てください。 html – Smamatti

関連する問題