1

メディア クエリを使用してレスポンシブ Web デザインを作成しています。モバイル版では、jquery mobile を使用してドロップダウン メニューを使用します。

jquery-mobile.css を含む CDN への必要なリンクを含めました。問題は、この CSS が Web サイト全体のすべてのタグに自動的に適用されることです。

メニュー バーはマスター ページにあるため、.js および .css ソース ファイルのリンクもそのページにあります。

jquery mobile css をウェブサイト全体ではなくメニューバーのみに適用したい

これについて多くの調査を行いましたが、うまくいきませんでした。私は過去 3 日間ここで立ち往生しています。誰か助けてくれませんか？

編集：

    <head id="Head1" runat="server">


          <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script type="text/javascript">
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input, a, div, p";
    });    
</script>
<script src="../Scripts/jquery.mobile-1.2.0.js"></script>
        <link rel="stylesheet" href="../Styles/WebStyles.css" type="text/css" />

        <title>Management Software, Space Rental process for Antique Malls, POS Software</title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
</head>

ガジョトレさんの提案によるheadタグ内の内容です。

4

2 に答える 2

1

防弾ソリューションが見つからないため、これは問題になる可能性があります。

  1. 選択した要素にスタイルを適用しないようにjQueryMobileに指示します。

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

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

    注：mobileinitは、次のように、jQueryMobileライブラリを初期化する前にHEADで初期化する必要があります。

    <title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input";
    });    
</script>    
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

  2. もう1つの解決策は、ネイティブのままにしておきたいすべての要素にdata-role="none"属性を使用することです。このソリューションの詳細については、http： //jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.htmlをご覧ください。

  3. 3番目の解決策もありますが、私はそれを機能させることができませんでした。jQuery Mobileフレームワークをカスタマイズし、使用するウィジェットのみを使用します：http: //jquerymobile.com/download-builder/。必要なものを選択するだけです。

したがって、最善の解決策は、ポイント1と2の組み合わせを使用することです。ドロップダウン以外のすべての要素でスタイル設定を防ぎ、ネイティブに見えるドロップダウン要素でdata-role="none"を使用します。

于 2013-01-23T13:50:22.053 に答える
0

私の状況では、かなりの量の調査の結果、私の問題に対する最善の解決策は、firebug を使用してどのスタイルがどの要素に影響を与えているかを調べ、jQuery-mobile.css ファイルでそれを削除することであることがわかりました (ダウンロードする必要があります)。ホストされているファイルにアクセスする代わりに)。これを行うにはしばらく時間がかかりました。

また IMHP では、競合の原因を見つけるのは非常に時間がかかり、面倒なので、多数の jQuery 作業を実行するのではなく、単一のフレームワークを使用してすべての派手な jQuery 作業を実行することをお勧めします。

すべての jquery プラグインを jQuery モバイルで動作するように変換していますが、これまでのところ順調です。これには時間がかかりますが、jQuery モバイルは素晴らしく、変換する価値があると感じています。UI は、私が現在開発している Web サイトに非常によく合っています。

最後に、教訓が得られました。事前に計画してください。

于 2013-01-23T19:51:17.830 に答える