css - 行内のjqueryモバイルラインナップコントロール

Question

選択ボックスなどのフォームコントロールをjqueryで一列に並べる方法と、縦に表示する方法を教えてください。

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>
<label for="select-choice-2" class="select">Shipping method:</label>
<select name="select-choice-2" id="select-choice-2">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

data-type="horizo​​ntal" と同じフィールドセットに入れたくありません。ありがとう

Answer 1

グリッド レイアウトはあなたに適していますか? 例を次に示します。

• http://jsfiddle.net/RM5eq/

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <select name="select-choice-0" id="select-choice-1">
                   <option>Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>
            <div class="ui-block-b">
                <select name="select-choice-2" id="select-choice-2">
                   <option>Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       
        </div>

    </div>
</div>​

グリッド レイアウト オプションのドキュメント

• http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Answer 2

私はjquery-mobile-960が好きです。

jquery-mobile-960は、960グリッドからjquerymobileへの移植です。960.gsの柔軟性とjquerymobileの使いやすさを融合しています。これは、jquery-mobileレイアウトの柔軟性を高め、タブレットでの使用を容易にすることを目的としています。

Answer 3

CSSとdata-inline="true"タグを使用した代替例

• http://jsfiddle.net/CFXxt/

CSS

#inline-select-container {
    overflow:auto;
}
#inline-select-left {
    float:left;
}

#inline-select-right {
     float:right;
}
​

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <div id="inline-select-container">

            <div id="inline-select-left">    
                <select name="select-choice-0" id="select-choice-1" data-inline="true">
                   <option >Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>

            <div id="inline-select-right">
                <select name="select-choice-2" id="select-choice-2" data-inline="true">
                   <option >Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       

        </div>  

        <br />
        <br />

        <div id="inline-select-container">

            <div id="inline-select-left">    
                <label for="select-choice-0" class="select">Shipping method:</label>
                <select name="select-choice-0" id="select-choice-1" data-inline="true">
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>

            <div id="inline-select-right">
                <label for="select-choice-2" class="select">Shipping method:</label>
                <select name="select-choice-2" id="select-choice-2" data-inline="true">
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       

        </div>          
    </div>
</div>​