2

私はこれを正しく機能させるのに苦労してきました。このページのモバイルサイトで、水平方向にグループ化された選択入力を機能させようとしています。

http://jquerymobile.com/demos/1.0/docs/forms/selects/

現在、私の選択ボックスは次のようになっています。

ここに画像の説明を入力してください

しかし、例を見ると、次のようになります。

ここに画像の説明を入力してください

私のHTMLは次のようになります。

   <fieldset data-role="controlgroup" data-type="horizontal"> 
    <select name="select-choice-month" id="select-choice-month">
        <option>M</option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>
    <select name="select-choice-day" id="select-choice-day">
        <option>D</option>
        <?php while($c < 32) {
            echo '<option value="'.$c.'">'.$c.'</option>';
            $c++;
        } ?>
    </select>
    <select name="select-choice-year" id="select-choice-year">
        <option>Y</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
    </select>
</fieldset>

そして、私のインクルードスクリプトは次のようになります。

<link rel="stylesheet"  href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

例を正確にコピーして貼り付けてみましたが、水平ではなく垂直になっていますが、ここで何が間違っているのでしょうか。

4

1 に答える 1

3

Ok。それで、もう少しそれをいじって、私はあなたがそれを望むように働く選択オプションを得ました。これらは私が持っていた変更でした：

<meta name="viewport" content="width=device-width, initial-scale=0.9">

ページとデザインの幅に応じてinitial-scale値が変わることに注意してください。

次に、選択オプションを次のように変更しました。

<div data-role="fieldcontain">
    <div data-role="controlgroup" data-type="horizontal">
        <select name="select-choice-month" id="select-choice-month" data-mini="true">
        <option>Month</option>
        <option value="jan">January</option>
        <!-- etc. -->
        </select>

        <select name="select-choice-day" id="select-choice-day" data-mini="true">
        <option>Day</option>
        <option value="1">1</option>
        <!-- etc. -->
        </select>

        <select name="select-choice-year" id="select-choice-year" data-mini="true">
        <option>Year</option>
        <option value="2011">2011</option>
        <!-- etc. -->
        </select>
    </div>
</div>

奇妙な理由legendで、ラッパー内にタグを追加するとcontrolgroup、デザインが壊れます。これがバグかどうかわからない。ドロップダウンのタイトルが必要な場合は、次のようにすることができます。

<div data-role="controlgroup" data-type="horizontal">
    <div style="font-weight: bold;">Date of Birth</div>

これらの変更は、私のiPhone4、HTC One、およびiPadで機能しました（iPadにははるかに多くの領域があるため、常に機能していましたが、とにかくそこでテストしました）。

于 2012-10-06T03:00:51.163 に答える