31

アニメーション機能と動的ページのサポートのために、他のフレームワークよりも jQuery Mobile を選びました。

ただ、スタイリングで悩んでいます。ページ遷移を行うために、基本的なページ スタイルを維持したいと考えています。しかし、ヘッダー、リストビュー、ボタン、検索ボックスのルック アンド フィールも完全にカスタマイズする必要があります。色だけを扱うだけでは十分ではありません。寸法、位置、マージン、パディングなどを処理する必要があります。

そのため、CSS でオーバーライドするために jQuery Mobile によって追加された余分な div とクラスに苦労しています。しかし、それは非常に時間がかかり、cssを最初から書き直した方がはるかに高速です...

最小限の jQuery Mobile css ファイルをロードする方法はありますか?

それとも、他のモバイル フレームワークに目を向けるべきですか? ページ遷移、ajax 呼び出し、Cordova との互換性、そしてもちろん完全にカスタマイズ可能な html/css を処理する必要があります...

4

5 に答える 5

35

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

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

  • 方法 1:

    この属性を追加することでそれを行うことができます:

    data-enhance="false"

    ヘッダー、コンテンツ、フッター コンテナーに。

    これは、アプリの読み込みフェーズでも有効にする必要があります。

    $(document).on("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.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
      //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
 });

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

    jquery-mobile.js が初期化される前に再度初期化します (以下の例を参照)。

詳細については、私の他のチュートリアルを参照してください: jQuery Mobile: Markup Enhancement of dynamic added content

于 2013-04-14T08:30:56.680 に答える
11

...または、jQuery Mobile のすべての機能を維持しながら、カスタム テーマのデザインを可能にするために特別に構築された、公式のテーマのないバージョンの CSS を使用するだけです。

常にハックやオーバーライドと戦う必要はなく、軽い CSS が得られます。

ウィンウィン。

編集：ここでも回答

于 2014-10-27T14:37:21.080 に答える
1

正直なところ、jQuery モバイルが比較的スタイルのないスターティング キットを提供してくれなかったことにはかなりがっかりしています。

生成された css クラスをオーバーライドすることは絶対的な狂気ですが、私はいくつかのスカンク作業を行い、遷移、1 ページ表示などの css の重要な側面を維持しながら、圧縮されていない css ファイルのサイズを 233kb からわずか 27kb に減らすことができました。など。この方法では、空の css ファイルから開始するのとほとんど同じように開始できます。

需要があれば、Github にファイルをアップロードするかもしれません。重要なものを何も残さなかったことを確認するために、さらにテストを行いたいと思います。

于 2015-03-21T21:51:02.793 に答える