3

Jquery モバイル ポップアップを使用しており、ポップアップにフォームを表示したいと考えています。テキストラベルとテキストボックスを同じ行に表示したい。そのため、fieldcontain を含む div を使用します。ポップアップの外側では機能しますが、内側では機能しません。

<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
    <div data-role="fieldcontain">
        <label for="input"> Fieldname </label>
        <input type="text" id="input" value="" />
    </div>
</div>

<div data-role="fieldcontain">
    <label for="input"> Fieldname   </label>                                                
    <input type="text" id="input" value="" />
</div>

この jsfiddle を参照してください: http://jsfiddle.net/B3pyG/

これはポップアップの制限なのだろうか。

4

2 に答える 2

1

質問は3年前ですが、単なる提案ですが、ポップアップ内でテーブルを使用できますか?

于 2016-04-06T05:49:44.197 に答える
0

フィールド コンテナは、ポップアップに使用されるスタイルによって妨げられているようです。Form の例を試してみました: http://jsfiddle.net/Twisty/BrsR2/

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Test PopUp</h1>
    </div>
    <div data-role="content">
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
        <div data-role="popup" id="popupBasic">
            <form>
                <div style="padding:10px 20px; width: 440px">
                    <h3>Please sign in</h3>
                    <div data-role="fieldcontain">
                        <label for="un">Username:</label>
                        <input placeholder="username" id="un" value="" name="user">
                        <label for="pw">Password:</label>
    <input id="pw" type="password" placeholder="password" value="" name="pass">
                    </div>
                    <div data-shadow="true" data-iconshadow="true" data-icon="" data-iconpos="" data-theme="b" aria-disabled="false">
                    </div>
                </div>
            </form>
        </div>
        <div data-role="fieldcontain">
             <label for="input"> Fieldname </label>
             <input type="text" id="input" value="" />
        </div>
    </div>
</div>

Popup ラッパーは、すべてを引き込み、可能な限りラップするようです。彼らはドキュメントでそれについて話します：

ポップアップは、ドキュメント全体を覆う透明または半透明の要素であるスクリーンと、ポップアップ自体であるコンテナの 2 つの要素で構成されます。元の要素に id 属性があった場合、画面とコンテナはそれぞれそれに基づいて id 属性を受け取ります。画面の ID には「-screen」、コンテナーの ID には「-popup」という接尾辞が付きます (上の例では、それぞれ id="popupBasic-screen" と id="popupBasic-popup")。

フレームワークはテキスト要素に少量の余白を追加しますが、実際には丸みを帯びた角とデザインの白紙として機能する影を備えたコンテナにすぎません (これらの機能もオプションで無効にすることができます)。

ラベル用のボックスを作成し、入力を右にフロートさせることで、これを回避できます。何かのようなもの：

<span display="width: 100%; display: block;">
    <span style="display: inline-block; width: 100px;">Label: </span>
    <input type="text" name="test" style="width: 340px; float: right;">
</span>
于 2013-01-02T23:49:50.923 に答える