Как заставить информационную кнопку появляться и делать ее функциональной в jquery mobile или javascript - PullRequest
Новая
       11

Как заставить информационную кнопку появляться и делать ее функциональной в jquery mobile или javascript

0 голосов
/ 27 апреля 2018

в приложении вы увидите фотографию приложения, которое является конвертером единиц. На рисунке он имеет небольшие информационные кнопки, которые можно нажимать, и при нажатии информация, относящаяся к следующему разделу ввода, отображается в виде предупреждения в приложении и передает информацию об этом разделе. Мне интересно, как это можно сделать и можно ли это сделать с помощью мобильного jQuery и / или JavaScript. example photo I am referring to

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Поскольку ваш вопрос помечен как jQuery Mobile, вот возможное решение с использованием JQM. Обратите внимание, вам даже не нужна кнопка «ОК». Всплывающее окно JQM закроется, просто нажав снаружи или нажав клавишу «Esc». 

.ui-info.ui-controlgroup-horizontal .ui-controlgroup-controls {
  display: block;
}
.ui-info.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-input-text {
  margin-top: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui-info .ui-icon-info {
 float: right;
 padding: 0;
 height: 22px;
}

.ui-info .ui-icon-info:after {
  position: relative;
  top: 0;
  margin-top: -22px;
}

.ui-popup {
  max-width: 420px;
}
<!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.min.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>
</head>

<body>
  <div data-role="page">
    <div data-role="header" data-position="fixed">
      <h2>Header</h2></div>
    <div role="main" class="ui-content">
      <div data-role="controlgroup" data-type="horizontal" class="ui-info">
        <legend>Legend<a href="#info" data-rel="popup" data-transition="pop" class="ui-icon-info ui-btn-icon-notext" title="Info">Info</a></legend>
        <input name="text-basic" id="text-basic" value="" type="text">
      </div>
    </div>
    <div data-role="footer" data-position="fixed">
      <h2>Footer</h2></div>
    <div data-role="popup" data-position-to="window" id="info">
      <div data-role="header" data-theme="a">
        <h1>Title</h1>
      </div>
      <div role="main" class="ui-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 27 апреля 2018

Использование jQuery 

$("#id_of_button").click(function(){
 alert("Named after the " + input_value1.value + " who invented " + input_value2.value + " etc..."); // Insert the values from your form inputs into this alert function
  });
...