2

非常によくデザインされたサンプルページがあります。ここで、ページの一部のみ jquery mobile を使用する必要があります。問題は、jquery mobile を追加すると、すべての UI が台無しになることです。ページの一部だけに jquery mobile を適用する方法はありますか?

4

1 に答える 1

5

これを達成するにはいくつかの方法があり、他のARTICLEまたはHEREでそれらを見つけることができます。マークアップ強化防止の方法という章を検索してください。

そして、ここに例を含む簡単な説明があります。いくつかの解決策があり、正しいものを選択する必要があります。

マークアップ拡張防止の方法:

これはいくつかの方法で実行できますが、場合によってはそれらを組み合わせて目的の結果を得る必要があります。

  • 方法 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"

    例: http://jsfiddle.net/Gajotres/LqDke/

  • 方法 3 :

    特定の HTML 要素は、マークアップ拡張から除外できます。

     $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });

    例: http://jsfiddle.net/Gajotres/jjETe/

于 2013-03-28T09:47:35.010 に答える