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

这可以使用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; }

Answer 3

布局永远不应该是 Javascript 代码的主要责任，因此您不应该为此责怪 jQuery Mobile。

应该使用CSS Media Queries 来自定义不同的屏幕尺寸，点击链接获取比您需要的更多示例。