Как я могу создать фиксированную плавающую кнопку плюс? - PullRequest
Новая
       13

Как я могу создать фиксированную плавающую кнопку плюс?

0 голосов
/ 18 сентября 2018

Я ищу, чтобы создать плавающую кнопку действия для моего мобильного приложения.Подобно тем, которые используются в мобильных приложениях Gmail и WhatsApp (см. Красную кнопку на изображении) .

Я создаю небольшое приложение с помощью jQuery Mobile, и мне бы хотелось, чтобы кнопка переместила пользователя на другую страницу.Я исследовал довольно долгое время со смешанными результатами, но главная проблема, кажется, состоит в том, что кнопка не находится над всем остальным содержимым на странице и не остается фиксированной в позиции, когда пользователь прокручиваетстраница.

Есть ли у кого-нибудь ресурсы или знания, которые могли бы помочь?Спасибо

enter image description here

Ответы [ 5 ]

0 голосов
/ 19 сентября 2018

JQM footer уже имеет позиционирование fixed и правильный z-index, который прекрасно сочетается с другими виджетами JQM, такими как панели и так далее.Почему бы не использовать это?

Классы ui-btn-left и ui-btn-right плохо себя ведут в footer, поэтому я использую сетку с прозрачным фоном.Преимущество этого подхода в том, что вы можете быстро добавить больше кнопок, если вам это понадобится позже. 

.ui-footer {
  border-width: 0 !important;
  background: transparent !important; 
}

.ui-grid-d  {
  overflow: visible !important;
  background: transparent !important;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
  text-align: center !important;
  background: transparent !important;
  padding-top: .3em;
  padding-bottom: .9em;
}

.ui-icon-big {
  height: 40px !important;
  width: 40px !important;
  margin-top: -18px !important;
  border-radius: 20px !important;
}
.ui-icon-big:after {
  width: 32px !important;
  height: 32px !important;
  background-size: 22px !important;
  background-color: #F4123D !important;
  background-color: rgba(244, 18, 61, 0.8) !important;
  margin-top: -16px !important;
  margin-left: -16px !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="style.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.min.js"></script>
  <script src="script.js">
  </script>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="content">
      <h3>Page content</h3>
      <hr>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
      <div class="ui-grid-d">
        <div class="ui-block-a"></div>
        <div class="ui-block-b"></div>
        <div class="ui-block-c"></div>
        <div class="ui-block-d"></div>
        <div class="ui-block-e">
          <a href="#" class="ui-btn ui-corner-all ui-icon-plus ui-icon-big ui-btn-icon-notext"></a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Более того, вы можете решить использовать data-tap-toggle="false" для not (по умолчанию true), чтобы позволить вашим пользователям показывать кнопки нижнего колонтитула по требованию, когда страницасодержимое больше высоты экрана.

0 голосов
/ 18 сентября 2018
0 голосов
/ 18 сентября 2018

Я думаю, эта ручка поможет вам.Он имеет ссылку на учебник.

Чтобы убедиться, что ваша кнопка находится над всеми другими элементами, добавьте z-index: 999 к вашей кнопке в css.

Вы можете думать о z-index как о слоях.Поэтому элемент z-index: 2 будет выше элемента z-index:1.

Для получения дополнительной информации о свойстве z-index css перейдите здесь и здесь .

0 голосов
/ 18 сентября 2018

Пытались ли вы использовать «фиксированные» или «липкие» значения свойств в CSS для удержания изображения в относительной позиции относительно окна браузера или позиции прокрутки пользователя?

Надеюсь, это поможет, это первая идея, чтоприходит на ум.

https://www.w3schools.com/cssref/pr_class_position.asp

0 голосов
/ 18 сентября 2018

это скорее вопрос CSS, чем вопрос JS, хотя вы можете использовать любой из них для его решения. В CSS этот элемент кнопки или любой элемент, содержащий его, должен иметь атрибуты; положение: абсолютное; и z-индекс: х; (z-индекс, который выше, чем любой другой элемент в DOM). Если вы попытаетесь решить эту проблему с помощью JS, вам все равно нужно иметь свойство z-index, и оно будет работать только тогда, когда элемент имеет атрибут фиксированной, абсолютной или относительной позиции ... так что вы также можете просто использовать CSS. Вы можете использовать js для определения высоты окна (высота устройства на мобильном устройстве, поскольку браузеры не могут изменять размер, как на рабочем столе), а затем установить атрибут top: Xpx, чтобы кнопка to находилась в одном и том же положении независимо от устройства.

...