如何在按字段容器中放置按钮控件组？

Question

我有一组控件按钮，如下所示：

<div data-role="fieldcontain">
  <label>Ahead</label>
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button">Hour</a>
    <a href="#" data-role="button">Day</a>
    <a href="#" data-role="button">Week</a>
    <a href="#" data-role="button">Month</a>
  </div>
</div>

我希望标签看起来像我表单中的其他标签。如您所见，标签与控件组不一致，与其他控件一样：

如何将控件组包装在字段容器中并使标签显示为内联？可能吗？我在jqmobile网站上没有看到任何这方面的例子。

表单的整个标记是：

<div data-role="content">
  <div data-role="fieldcontain">
    <label for="select-native-1">Metric</label>
    <select name="select-native-1" id="select-native-1">
      <asp:Repeater ID="ui_metrics" ClientIDMode="Static" runat="server">
        <ItemTemplate>
          <option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
        </ItemTemplate>
      </asp:Repeater>
    </select>

    <div data-role="fieldcontain">
      <label for="select-native-1">Interval</label>
      <select name="select-native-1" id="select1">
        <asp:Repeater ID="ui_interval" ClientIDMode="Static" runat="server">
          <ItemTemplate>
            <option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
          </ItemTemplate>
        </asp:Repeater>
      </select>
    </div>

    <div data-role="fieldcontain">
      <label for="datetime-4">Start Date</label>
      <input type="datetime-local" name="datetime-4" id="datetime-4" value="" />
    </div>

    <div data-role="fieldcontain">
      <label>Ahead</label>
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button">Hour</a>
        <a href="#" data-role="button">Day</a>
        <a href="#" data-role="button">Week</a>
        <a href="#" data-role="button">Month</a>
      </div>
    </div>

    <div data-role="fieldcontain">
      <div data-role="rangeslider">
        <label for="range-7a">Index:</label>
        <input type="range" name="range-7a" id="range-7a" min="0" max="100" value="0" />
        <label for="range-7b">Index:</label>
        <input type="range" name="range-7b" id="range-7b" min="0" max="100" value="100" />
      </div>
    </div>

  </div>
</div>

Answer 1

解决方案

工作示例：http://jsfiddle.net/Gajotres/PMrDn/64/

HTML：

<div data-role="fieldcontain" id="custom-fieldcontain">
    <label>Ahead</label>
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button">Hour</a>
        <a href="#" data-role="button">Day</a>
        <a href="#" data-role="button">Week</a>
        <a href="#" data-role="button">Month</a>
    </div>
</div>

CSS：

@media all and (min-width: 28em){
    #custom-fieldcontain label {
        width: 22% !important;    
        display: inline-block;    
    }

    #custom-fieldcontain [data-role=controlgroup] {
        width: 78% !important;
        display: inline-block;
    }

    #custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls {
        width: 100% !important;        
    }    

    #custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls a {
        width: 24.5% !important;
    }    
}

信息

使用您的HTML制作工作示例。媒体查询直接从jQuery Mobile css文件中使用。其余的CSS是标签修复/内容修复。

Answer 2

这里是一个没有自定义fieldcontainer的例子......

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Ahead</legend>
        <input type="radio" name="radio1" id="hour" checked="checked">
        <label for="hour">Hour</label> 
        <input type="radio" name="radio1" id="day"> 
        <label for="day">Day</label> 
        <input type="radio" name="radio1" id="week"> 
        <label for="week">Week</label>
        <input type="radio" name="radio1" id="month"> 
        <label for="month">Month</label>
    </fieldset>
</div>

Answer 3

他们不站在同一行，因为div controlgroup是一个块元素。您可以使用我之前使用过的两种解决方案之一：

解决方案1：使用CSS实现内联外观

的解决方案

只需向控制组添加display: inline属性，就可以了。

[data-role=controlgroup] {
    padding-left : 2em;
    display: inline;
}

注意

我使用的CSS选择器只是一个指标。尝试将ID用于要更改的控制组。此外，请确保在jQM样式之后加载要添加的自定义样式。 要调整标签和按钮之间的分隔，请将padding-left更改为您的内容。

解决方案2：使用网格设置布局

网格提供了一种在jQM中排列元素的好方法。典型的网格布局将如下所示：

<div class="ui-grid-a">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->

这是一个典型的2列布局，我们也在这里使用。所以这里的布局必须如下：

<div data-role="fieldcontain">
    <div class="ui-grid-a">
        <div class="ui-block-a" style="width:20%">
            <label>Ahead</label>
        </div>
        <div class="ui-block-b" style="width:70%">
            <div data-role="controlgroup" data-type="horizontal"> 
                <a href="#" data-role="button">Hour</a>
                <a href="#" data-role="button">Day</a>
                <a href="#" data-role="button">Week</a>
                <a href="#" data-role="button">Month</a>
            </div>
        </div>
    </div>
</div>

注意

您可以通过更改HTML标记中的宽度属性，将ui-block-*元素的宽度调整为您需要的任何大小。

合并演示

http://jsfiddle.net/bGjZ8/2/