如何在jQuery Mobile中创建确认对话框？
在jQuery Mobile中创建确认对话框可以通过使用data-rel="popup"属性和data-transition="pop"属性来实现。下面是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>Confirmation Dialog</title>
<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.1.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">
<h1>Confirmation Dialog</h1>
</div>
<div data-role="content">
<a href="#confirmationPopup" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">显示确认对话框</a>
<div data-role="popup" id="confirmationPopup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>确认</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">你确定要执行此操作吗？</h3>
<p>这是一个确认对话框示例。</p>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">取消</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">确认</a>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>在上面的示例中，我们使用了jQuery Mobile的库和样式表。确认对话框是通过一个弹出窗口实现的，当点击"显示确认对话框"按钮时，弹出窗口会显示出来。用户可以选择"取消"或"确认"来关闭对话框。
这个示例中的确认对话框具有以下特点：
- 使用
data-rel="popup"属性将按钮与弹出窗口关联起来。 - 使用
data-transition="pop"属性定义弹出窗口的过渡效果。 - 弹出窗口的内容位于
<div data-role="popup">元素中。 - 弹出窗口的标题位于
<div data-role="header">元素中。 - 弹出窗口的主要内容位于
<div role="main">元素中。 - 弹出窗口的按钮使用
<a>元素表示，通过data-rel="back"属性来关闭对话框。
这是一个简单的确认对话框示例，你可以根据自己的需求进行定制和扩展。如果你想了解更多关于jQuery Mobile的内容，可以访问官方文档。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
