javascript - jquerymobile、ヘッダーにコントロールを配置

Question

ヘッダーにいくつかのコントロールを配置しようとしています。ただし、ドロップダウンリストとグループ化されたチェックボックスは、それぞれ独自の行に分類され続けます。

これが私がこれまでに持っているもののjsfiddleです：

http://jsfiddle.net/BxxC2/1/

Answer 1

You may be able to use "Four-column" Layout grids.　Layout grids are used for "content" part but still works in a "header" part.

Documents are here: http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html

 <div class="ui-grid-c">
     <div class="ui-block-a">Block A</div>
     <div class="ui-block-b">Block B</div>
     <div class="ui-block-c">Block C</div>
     <div class="ui-block-d">Block D</div>
 </div><!-- /grid-c -->

By default, this grid creates 25%/25%/25%/25% widths, so you would add CSS styles to adjust widths like below:

 <div class="ui-grid-c">
     <div class="ui-block-a" style="width:15%;">Block A</div>
     <div class="ui-block-b" style="width:50%;">Block B</div>
     <div class="ui-block-c" style="width:20%;">Block C</div>
     <div class="ui-block-d" style="width:15%;">Block D</div>
 </div><!-- /grid-c -->

Your code may goes like this:

<!-- Home -->
<div id="page1" data-role="page">
  <div data-role="header" data-theme="a" data-position="fixed">

    <div class="ui-grid-c">
        <div class="ui-block-a" style="width:15%;">
            <a class="ui-btn-left" 
            href="#page1" 
            data-iconsize="26" 
            data-role="button"
            data-theme="b" 
            data-transition="fade"
            data-inline="true"
            data-iconpos="left"
            data-icon="ios-pack-color-left-arrow">Button</a>
        </div>
        <div class="ui-block-b" style="width:260px;">

            <fieldset data-role="controlgroup" data-type="horizontal">

            <input id="checkbox1" name="checkbox1" type="checkbox">
            <label for="checkbox1">
                Checkbox
            </label>
            <input id="checkbox2" name="checkbox2" type="checkbox">
            <label for="checkbox2">
                Checkbox
            </label>
            <input id="checkbox3" name="checkbox3" type="checkbox">
            <label for="checkbox3">
                Checkbox
            </label>
            </fieldset>

        </div>
        <div class="ui-block-c" style="width:150px;padding-top:5px;">

            <select id="selectmenu1" name="selectmenu1" data-mini="true">
                <option value="option1">
                    Dropdown Box
                </option>
            </select>
        </div>
        <div class="ui-block-d" style="width:20%;text-align:right;">
            <a href="#page1" data-iconsize="26" 
            data-role="button" data-theme="b"
            data-transition="fade" data-iconpos="left" 
            data-icon="ios-pack-color-star">Button</a>
        </div>
    </div><!-- /grid-b -->

  </div>
  <div style="padding: 15px;" data-role="content">
  </div>
</div>​ 

Thank you.