JQuery мобильный ввод текста и кнопка - PullRequest
Новая
       4

JQuery мобильный ввод текста и кнопка

0 голосов
/ 12 ноября 2018

Я начинаю работать с Jquery mobile и столкнулся с проблемой, заключающейся в том, что в обычном HTML-коде ее легко решить.

Проблема: Я пытаюсь разделить страницу, как на картинке ниже -

Изображение - как я хочу, чтобы страница выглядела

На левой странице я хочу добавить выпадающий список (это не проблема), а в правой левой части экрана я хочу добавить «Возраст» и два текстовых поля в одной строке! но это не позволяет мне добавить все в одной строке

Мой вопрос, есть ли простой способ, например, как начальная загрузка? Каков наилучший способ объединить встроенные функции в Jquery Mobile?

Спасибо.

1 Ответ

0 голосов
/ 13 ноября 2018

Встроенные работы, взгляните на галерею форм 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...