时间戳

首页 > 解决方案 > jQuery Mobile 内联文本输入和按钮

html - jQuery Mobile 内联文本输入和按钮

问题描述

我已经开始使用 jQuery Mobile，并且遇到了一个问题，在常规 HTML 代码中它很容易解决。

问题：我正在尝试如下图所示拆分页面-

图片-我想要的页面看起来像

在左侧页面上，我想添加一个下拉列表（这不是问题），在屏幕右侧我想在同一行中添加“年龄”和两个文本框，但它不允许我添加所有内容在同一行。

我的问题是，有没有简单的方法，例如 Bootstrap？在 jQuery Mobile 中内联功能的最佳方式是什么？

谢谢。

标签： htmljquery-mobile

解决方案

内联作品，看一下JQM表单库：http ://demos.jquerymobile.com/1.4.5/forms/

除此之外，你问得对，因为JQM有自己的生活方式。您可以尝试在此处grids记录。

默认网格单元均匀分布，但您可以轻松覆盖默认宽度。此外，通过使用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>

推荐阅读