web-dev-qa-db-ja.com

jQuery Mobileスタイリングを削除する方法は？

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

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

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

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

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

javascriptcsshtml5css3jquery-mobile
30
Yako

マークアップ強化の防止方法：

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

  • 方法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：動的に追加されたコンテンツのマークアップ拡張

30
Gajotres

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

常にハックやオーバーライドを行う必要はなく、より軽いCSSを取得できます。

ウィンウィン。

編集：また答えました here

9
zool

正直に言うと、jQuery mobileが比較的スタイルのない開始キットを提供しなかったことにかなり失望しています。Ajax、トランジション、コードバ...

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

要求がある場合は、おそらくGithubにファイルをアップロードします。何か重要なものを残していないことを確認するために、さらにテストを行いたいと思います。

1
Shay

jQuery Mobile 1.4.0以降、data-enhancedデータ属性がほとんどのコンポーネントに追加されました。これをtrue属性として設定すると、jQuery mobileはコンポーネントのスタイル拡張を無視するため、独自に要素のスタイルを設定する必要があります。

これに関する追加情報は、jQuery Mobile 1.4.0リリースノートにあります http://jquerymobile.com/upgrade-guide/1.4/

0
Juan Carlos Alpizar Chinchilla