0

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

<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>
4

3 回答 3

4

解决方案

工作示例：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 的其余部分是标签修复/内容修复。

于 2013-07-29T20:07:38.127 回答
1

这是一个没有自定义字段容器的示例...

<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>
于 2013-12-09T13:34:53.990 回答
0

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

解决方案 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>

笔记

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

综合演示

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

于 2013-07-29T19:13:37.407 回答