jquery mobile Lineup-Steuerelemente in einer Zeile

Question

Wie gruppiere ich Formularsteuerelemente wie Auswahlfelder und andere in einer Zeile in jquery vs vertikal angezeigt werden?

<label for="select-choice-0" class="select">Shipping method:</label> 
<select name="select-choice-0" id="select-choice-1"> 
    <option value="standard">Standard: 7 day</option> 
    <option value="rush">Rush: 3 days</option> 
    <option value="express">Express: next day</option> 
    <option value="overnight">Overnight</option> 
</select> 
<label for="select-choice-2" class="select">Shipping method:</label> 
<select name="select-choice-2" id="select-choice-2"> 
    <option value="standard">Standard: 7 day</option> 
    <option value="rush">Rush: 3 days</option> 
    <option value="express">Express: next day</option> 
    <option value="overnight">Overnight</option> 
</select> 

Ich möchte sie nicht in der gleichen fieldset mit Datentyp = "horizontal". Danke

Answer 1

Alternative Beispiel mit CSS und Daten-inline = "true" Tag

• http://jsfiddle.net/CFXxt/

CSS

#inline-select-container { 
    overflow:auto; 
} 
#inline-select-left { 
    float:left; 
} 

#inline-select-right { 
    float:right; 
} 
​ 

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <div id="inline-select-container"> 

      <div id="inline-select-left">  
       <select name="select-choice-0" id="select-choice-1" data-inline="true"> 
        <option >Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div> 

      <div id="inline-select-right"> 
       <select name="select-choice-2" id="select-choice-2" data-inline="true"> 
        <option >Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div>  

     </div> 

     <br /> 
     <br /> 

     <div id="inline-select-container"> 

      <div id="inline-select-left">  
       <label for="select-choice-0" class="select">Shipping method:</label> 
       <select name="select-choice-0" id="select-choice-1" data-inline="true"> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div> 

      <div id="inline-select-right"> 
       <label for="select-choice-2" class="select">Shipping method:</label> 
       <select name="select-choice-2" id="select-choice-2" data-inline="true"> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div>  

     </div>   
    </div> 
</div>​ 

Answer 2

Würde ein Rasterlayout für Sie arbeiten? Hier ist ein Beispiel:

• http://jsfiddle.net/RM5eq/

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

     <div class="ui-grid-a"> 
      <div class="ui-block-a"> 
       <select name="select-choice-0" id="select-choice-1"> 
        <option>Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div> 
      <div class="ui-block-b"> 
       <select name="select-choice-2" id="select-choice-2"> 
        <option>Shipping method</option> 
        <option value="standard">Standard: 7 day</option> 
        <option value="rush">Rush: 3 days</option> 
        <option value="express">Express: next day</option> 
        <option value="overnight">Overnight</option> 
       </select> 
      </div>  
     </div> 

    </div> 
</div>​ 

Docs für die Grid-Layout-Optionen

• http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Answer 3

I jquery-mobile-960 gefallen.

jquery-mobile-960 ist ein port von 960 grid zu jquery mobile. Es vereint die Flexibilität von 960.gs und die Leichtigkeit von Jquery Mobile. Ziel ist es, das jquery-mobile Layout flexibler zu gestalten und damit die Nutzung auf Tablets zu erleichtern.