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