0

raio ボタンを含む 2 つのグリッドを含むフォームがあり、ヘッダーやその他の要素の幅に合わせようとしています。また、jquery mobile を使用したスタイリングについて学ぶことができる良い情報源があれば感謝します。jquery 1.9.1 および jquery mobile 1.3.1 の使用

私のコード: http://jsfiddle.net/Nk4bz/

<div data-role='page' id='bookingPage'>
        <div data-role='header' id='hBooking' class='hBooking'
            data-nobackbtn=true>
            <h1>Booking</h1>
        </div>
        <div data-role='content' id='bookingContent' class='bookingContent'>

            <form id="bookingForm">


                <div id="select">
                    <select name="selectOrder" id="selectOrder"
                        data-native-menu="false">
                        <option value='choose'>Auftrag auswählen</option>
                    </select>                   
                </div>

                <div id='timeRadios' class='timeRadios'>
                    <fieldset id="hours" class="ui-grid-b" data-type="horizontal"
                        data-role="controlgroup">
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-1"
                                value="1" /> <label for="radio-choice-1">1</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-2"
                                value="2" /> <label for="radio-choice-2">2</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-3"
                                value="3" /> <label for="radio-choice-3">3</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-4"
                                value="4" /> <label for="radio-choice-4">4</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-5"
                                value="5" /> <label for="radio-choice-5">5</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-6"
                                value="6" /> <label for="radio-choice-6">6</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-b" id="radio-choice-7"
                                value="7" /> <label for="radio-choice-7">7</label>
                                </div>
                                <div class="ui-block-b">
                                 <input
                                type="radio" name="radio-choice-b" id="radio-choice-8" value="8" />
                            <label for="radio-choice-8">8</label>
                            </div>
                            <div class="ui-block-b">
                             <input type="radio"
                                name="radio-choice-b" id="radio-choice-9" value="9" /> <label
                                for="radio-choice-9">9</label>
                        </div>
                    </fieldset>

                    <fieldset id="minutes" class="ui-grid-b" data-type="horizontal"
                        data-role="controlgroup">
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-d" id="radio-choice-15"
                                value="15"> <label for="radio-choice-15">15</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-d" id="radio-choice-30"
                                value="30"> <label for="radio-choice-30">30</label>
                        </div>
                        <div class="ui-block-b">
                            <input type="radio" name="radio-choice-d" id="radio-choice-45"
                                value="45"> <label for="radio-choice-45">45</label>

                        </div>
                    </fieldset>
                </div>
                <div>
                    <input id="bookingSubmit" type="submit" value="Buchen" />
                </div>
            </form>

        </div>
        <div data-role='footer' id='fBooking' class='fBooking'></div>
    </div>

そしてCSS：

.ui-controlgroup-controls
{
    width:100%;
}
.ui-radio {
    width:100%;
}

編集data-role="controlgroup" を fieldset 要素から削除すると、すべて問題ありません。しかし、ラジオボタンは data-type="horizo​​ntal" を取得しません。

EDIT2それを解決する方法を見つけました。fieldset 要素から class="ui-grid-b" を削除し、グリッドをラップするフィールドセット内にこのクラスを含む div を追加しました。Hierは実際の例です。http://jsfiddle.net/Nk4bz/1/

4

1 に答える 1

1

解決策は、class="ui-grid-b" を fieldset 要素から削除し、グリッドをラップする fieldset 内にこのクラスを含む div を追加することです。このような：

<fieldset id="minutes" data-type="horizontal" data-role="controlgroup">
<div class="ui-grid-b">

Hierは実際の例です。

http://jsfiddle.net/Nk4bz/1/

于 2013-06-04T13:44:24.427 に答える