Question

我开始使用Jquery mobile，但遇到一个问题，在常规HTML代码中，解决它很容易。

问题：我尝试像下面的图片一样拆分页面-

Picture- The way I want the page would looklike

在左侧页面中，我想添加下拉列表（这不是问题），并且在屏幕的右侧，我想在同一行中添加“年龄”和两个文本框！但这不能让我在同一行中添加所有内容

我的问题是，有没有简单的方法，例如引导程序？在Jquery mobile中内联功能组合的最佳方法是什么？

谢谢。

Answer 1

在线工作，请看一下JQM表单库：http://demos.jquerymobile.com/1.4.5/forms/

除此之外，您问得对，因为JQM有其自己的生活方式。您可以尝试grids文档here。

默认网格单元均匀分布，但是您可以轻松覆盖默认宽度。而且，通过使用ui-responsive类，网格将通过以窄宽度堆叠网格块来做出响应。

这是一个游乐场：

.ui-grid-a > .ui-block-b {
  text-align: right;
}

.ui-grid-solo > .ui-block-a {
  white-space: nowrap;
}

.ui-mobile .ui-grid-solo label {
  display: inline;
}

.ui-grid-solo .ui-input-text {
  width: 30%;
  display: inline-block;
  margin-right: 5px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a ui-responsive">
        <div class="ui-block-a">
          <select data-native-menu="false">
            <option value="1">The 1st Option</option>
            <option value="2">The 2nd Option</option>
            <option value="3">The 3rd Option</option>
            <option value="4">The 4th Option</option>
          </select>
        </div>
        <div class="ui-block-b">
          <div class="ui-grid-solo">
            <div class="ui-block-a">
              <label for="textinput-3">Range:</label>
              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">
              <label for="textinput-4">-</label>
              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">
            </div>
          </div>
        </div>
      </div>
      <hr>
    </div>
  </div>
</body>

</html>

jQuery移动嵌入式文本输入和按钮

1 个答案: