jQuery Mobile的佈局定製

Question

我以我的第一個步驟中jQuery Mobile的，我變得有點失望，缺乏定製它提供的...

舉個例子，我有一個簡單的表格我想定製表單組件的佈局。

這是我的代碼：

<form id="loginForm" action="#" method="post"> 
    <input id="rememberMe" name="rememberMe" type="checkbox"/> 
    <label for="rememberMe">Remember me in this computer</label> 

    <a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a> 

    <input id="submit" type="submit" value="log in" data-inline="true"/> 
</form> 

見fiddle。

具體我想：

• 的rememberMe複選框，寬是因爲裏面的文字和info按鈕是內嵌在複選框。
• 包含上一個複選框和按鈕的「組」包含右對齊。
• submit按鈕也是正確的。

請提供的東西怎麼這麼就可以實現一個例子...

編輯：我想是這樣的：

Answer 1

定製您需要將不來自jQM，但來自自定義CSS。

通常這可以很容易地與jQuery Mobile網格完成，但它們不那麼靈活。所以你需要一個定製解決方案。

圍繞每個元素都需要一個div，因爲jQM以新樣式重新創建每個元素，除非我們有父級div，否則一切都會下地獄。

工作例如：http://jsfiddle.net/Gajotres/8NB22/

HTML：

<form id="loginForm" action="..." method="post"> 
    <div class="row"> 
     <div class="inline-mid"> 
      <a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a> 
     </div>  
     <div class="inline-left"> 
      <input id="rememberMe" name="rememberMe" type="checkbox"/> 
      <label for="rememberMe">Remember me in this computer</label>   
     </div> 
    </div> 
    <div class="row"> 
     <div class="inline-left">   
      <input id="submit" type="submit" value="log in" data-inline="true"/>   
     </div>  
    </div>  
</form> 

CSS：

.row { 
    min-width: 400px; 
    width: 400px; 
} 

.inline-left, .inline-mid , .row { 
    position: relative; 
    float: right; 
} 

.inline-mid { 
    margin-left: 10px; 
    padding-top: 5px; 
} 

Answer 2

佈局不應該的Javascript代碼主要責任，因此你不該」譴責jQuery Mobile爲此。

不同屏幕尺寸的自定義應該使用CSS Media Queries來完成，而不是您所需的更多示例。

Answer 3

這可以使用ui-grid類來實現。

Working Demo

標記

<form id="loginForm" action="..." method="post"> 
<div class=ui-grid-a> 
    <div class=ui-block-a> 
    <input id="rememberMe" name="rememberMe" type="checkbox"/> 
    <label for="rememberMe" data-inline="true">Remember me in this computer</label> 
    </div> 
    <div class=ui-block-b> 
    <a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a> 
    </div> 
</div> 
<div class=ui-grid-solo> 
    <input id="submit" type="submit" value="log in" data-inline="true"/> 
</div> 
</form> 

覆蓋CSS

.ui-block-a { width: 95% !important; text-align: right !important; } 
.ui-block-b { width: 5% !important; padding-top: 5px !important; } 
.ui-grid-solo { text-align: right !important; }