2

私は Pyramid (python) Web アプリケーションに取り組んでおり、デスクトップ サイズのブラウザーとモバイル ブラウザーを適切に切り替える応答性の高いデザインを作成しようとしています。デスクトップ UI には Twitter Bootstrap を、モバイル UI には jquery mobile を使用したいと考えています。

私のCSSは次のようなものです：

@charset "utf-8";

@import url("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css") (max-width: 480px);
@import url("css/bootstrap.min.css") (min-width: 481px);

これは実際には、ウィンドウのサイズが変更されたときにその場でスタイルを切り替えるのにうまく機能しているようです。ウィンドウが大きい場合はデスクトップ UI スタイルが表示され、「モバイル」のしきい値に達すると jquery モバイル UI が表示されます。甘い。

ただし、私の問題は HTML/mako テンプレートにあるようです。ページの下部に .js インクルードを配置しました。重要なスニペットは次のとおりです。

[...snip..]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>

次のように、デスクトップ UI にラベルが付いたラジオ ボタンがあります。

<label>
                    <input type="radio" name="answer" id="1" value="1"> 1</label>
                <label><input type="radio" name="answer" id="2" value="2"> 2</label>
                <label><input type="radio" name="answer" id="3" value="3"> 3</label>
                <label>
                    <input type="radio" name="answer" id="foo" value="foo">foo
                </label>

すべての .js インクルードがアクティブな場合、実際のラジオ入力コントロールはラベル テキストとインラインではありません。代わりに、ブロック要素として設定されているように見え、画面上のラベルの後の独自の行に表示されます。ラジオ入力スタイルをオーバーライドするように CSS を微調整しようとしましたが、これまでのところ、ラジオ タイプをインラインに設定するのが最善ですが、ラベルの前ではなく、ラベルの後にまだ表示されています。

しかし、jquery mobile .js をコメントアウトすると、次のものが含まれます。

[...snip...]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>

デスクトップ UI は正しく表示されます。もちろん、その時点で jquery モバイル UI を失いました。

だから何が起こっているように見えるのは、jquery mobile javascript の何かがスタイルインクルードをオーバーライドしていることですが、何が、なぜなのかわかりません。より大きな解像度でjqueryモバイルのものを実行しないようにする方法はありますか? ヘルプやヒントはありますか？

4

1 に答える 1

3

次の入力フィールドでは jquery mobile を無効にする必要がある場合があります。

http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.htmlから:

特定のフォーム コントロールを jQuery Mobile に触れさせたくない場合は、その要素に属性 data-role="none" を指定します。例えば：

<label for="foo">
<select name="foo" id="foo"  data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
于 2012-11-02T21:10:15.937 に答える