如何在字段容器中放置按鈕控件組？

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

他們不站在同一條線上，因爲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> 

注意

你可以調整ui-block-*元素，你需要通過改變width屬性在HTML標籤的任何尺寸的寬度。

一個綜合演示

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

Answer 3

這裏沒有定製的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>