Question

附上你会看到一个应用程序的照片，它是一个单位转换器。在图片中，它具有可点击的小信息按钮，当点击时，与输入部分相关的信息将显示为应用程序中的警报并转发有关该部分的信息。我想知道如何实现这一点，以及是否可以使用jQuery mobile和/或JavaScript完成。

Answer 1

使用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
  });

Answer 2

正如您的问题被标记为jQuery Mobile，这是使用JQM的可能解决方案。请注意，您甚至不需要“确定”按钮。只需点击外部或按“Esc”键即可关闭JQM弹出窗口。

.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>

如何在jquery mobile或javascript中显示信息按钮并使其正常运行

2 个答案: