1

jQuery モバイル 1.3 を使用していますが、ポップアップ ダイアログのスタイルに問題があります。ダイアログを以下に示します。

ここに画像の説明を入力

html コードは次のように表示されます。

<div data-role="popup" id="AddingDialog" data-overlay-theme="a" data-theme="c" style="max-width:500px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Modify Item</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Adding new item</h3>
            <div data-role="fieldcontain"  >
            <input type="text" name="name" id="addItemInput" placeholder="label of new item" maxlength="100" value=""  />
        </div>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back"
            data-theme="b" data-transition="flow" id="doAddItem">Yes</a>
    </div>
</div>

ダイアログがもっと広く、入力フィールドがダイアログの全幅に拡張され、ボタンが右に配置されていることを望みました。

Firefox 開発者ツール (Examiner) を使って調べると、どこか 78% の幅が定義されていることがわかります。しかし、この制限を解除する方法がわかりません。また、入力フィールドがクリックされたときにこの青い影が表示され、選択を解除してもそこに残ることにあまり興奮していません。

私は、jQuery モバイルを使用した CSS プログラミングの専門家ではありません。

4

1 に答える 1

2

アップデート

テキストボックスの影を削除するには、JQM CSS をオーバーライドする必要がありますui-focus。

JQM スタイルシートの後に以下のスタイルを追加してオーバーライドします。

.ui-input-text.ui-focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

popupの最終的な外観は次のとおりです。

Jquery モバイルにはグリッド システムが組み込まれており、ページのコンテンツの配置と配置が容易になります。JQM ドキュメントへのリンクは次のとおりです: http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html

于 2013-03-13T23:26:25.723 に答える