如何让信息按钮出现并使其在 jquery mobile 或 javascript 中起作用
Posted
技术标签:
【中文标题】如何让信息按钮出现并使其在 jquery mobile 或 javascript 中起作用【英文标题】：How to get info button to appear and make it functional in jquery mobile or javascript 【发布时间】：2018-10-07 16:56:38 【问题描述】：在附件中，您将看到一个应用程序的照片，该应用程序是一个单位转换器。在图片中，它具有可单击的小信息按钮，单击时，与旁边的输入部分相关的信息在应用程序中显示为警报，并传递有关该部分的信息。我想知道这是如何完成的，是否可以使用 jQuery mobile 和/或 javascript 来完成。
【问题讨论】：
投票结束，因为你实际上并没有表现出研究成果 【参考方案1】：由于您的问题被标记为 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>【讨论】：
【参考方案2】：使用 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
);
【讨论】：
是否涉及任何 css 或 jqmobile 样式？感谢您提供 jQuery 代码。 要在“onclick”事件后显示一个基本的警告框，您不需要添加任何额外的 CSS。 应该指定。为了获得需要点击的小信息图标，我需要css吗？ 这取决于但简短的回答是否定的，你不需要 CSS。您可以包含 Bootstrap 库并在 标记中使用其中一个字形图标，如下所示：以上是关于如何让信息按钮出现并使其在 jquery mobile 或 javascript 中起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何以编程方式从控件自己的更改事件中更改选择框选择并使其在移动浏览器中工作
如何从 python 脚本调用 pip 并使其在本地安装到该脚本？ [复制]
如何创建 ElasticSearch 类型并使其在索引中可搜索
如何将数据加载到 Hive 表并使其在 Impala 中也可访问
如何捕获 UITableView / UIScrollView 的完整内容的 UIImage 并使其在 ios 设备上工作