3

我在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>

见小提琴。

具体来说，我想：

  • 复选框与里面的rememberMe文本一样宽，info按钮与复选框内联。
  • 包含前一个复选框和按钮的“组”要向右对齐。
  • submit按钮也在右边。

请举例说明如何实现这些目标......

编辑：我想要这样的东西：

所需的布局

4

3 回答 3

3

这可以使用ui-grid类来实现。

工作演示

标记

<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; }
于 2013-04-17T10:56:43.127 回答
3

您需要的定制不是来自 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;
}
于 2013-04-17T10:35:04.933 回答
0

布局不应该主要由 Javascript 代码负责，因此您不应该为此责怪 jQuery Mobile。

应该使用CSS 媒体查询来自定义不同的屏幕尺寸，单击链接获取比您需要的更多示例。

于 2013-04-17T10:38:21.180 回答