マスター ページで bootstrap.css を使用して、ヘッダー コンテンツを生成しました。次に、そのマスター ページを使用して Web ページを作成しました (bootstrap.css ファイルを使用するのと同じヘッダー コンテンツを使用する必要があります)。同じページ内に別のコンテンツ(本文コンテンツ)を作成したいのですが、このコンテンツは jquery-mobile.css ファイルを使用します。しかし、同じページでこの css ファイルを使用すると、ヘッダーの内容が jquery-mobile.css スタイルに従って変更されます (変更したくない)。jquery-mobile.css ファイルを特定のブロックに適用する方法はありますか?
2 に答える
同様の問題について回答を書きました。
これで問題が解決すると思います。
CSS ファイルが応答ヘッダーで常に「Access-Control-Allow-Origin」を返すことを確認してください。
幸運を!
詳細については、私の他の記事/回答を参照してください: jQuery Mobile: Markup Enhancement of dynamic added content
ソリューション
これはいくつかの方法で実行できますが、場合によってはそれらを組み合わせて目的の結果を得る必要があります。
方法 1:
この属性を追加することでそれを行うことができます:
data-enhance="false"
ヘッダー、コンテンツ、フッター コンテナーに。
これは、アプリの読み込みフェーズでも有効にする必要があります。
$(document).one("mobileinit", function () { $.mobile.ignoreContentEnabled=true; });
jquery-mobile.js が初期化される前に初期化します (以下の例を参照)。
詳細については、次を参照してください。
http://jquerymobile.com/test/docs/pages/page-scripting.html
例: http://jsfiddle.net/Gajotres/UZwpj/
ページを再作成するには、次を使用します。
$('#index').live('pagebeforeshow', function (event) { $.mobile.ignoreContentEnabled = false; $(this).attr('data-enhance','true'); $(this).trigger("pagecreate") });
方法 2:
2番目のオプションは、次の行で手動で行うことです:
data-role="none"
方法 3:
特定の HTML 要素は、マークアップ拡張から除外できます。
$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input"; });
例: http://jsfiddle.net/Gajotres/gAGtS/
jquery-mobile.js が初期化される前に再度初期化します (以下の例を参照)。
結論
あなたの場合、解決策 1 を使用してください。jQuery Mobile がヘッダーを拡張するのを防ぎます。