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

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移动css文件中使用。CSS的其余部分是标签修复/内容修复。

Answer 2

这里有一个没有自定义字段容器的例子..。

<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;
}

Note

我使用的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>

Note

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

综合演示

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