如何使用jQuery Mobile创建一个基本的弹出按钮

使用jQuery Mobile创建一个基本的弹出按钮可以通过以下步骤完成：

步骤一：引入必要的代码文件

首先需要从jQuery Mobile官方网站下载压缩包，并引入必要的代码文件。推荐使用CDN的方式，这有利于提高网站的速度和性能。

在HTML文件头部引入如下代码：

<!-- 引入 jQuery 核心文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 jQuery Mobile 核心文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

<!-- 引入 jQuery Mobile 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css">

步骤二：创建弹出对话框

在HTML文件中，可以利用jQuery Mobile提供的弹出框（Popup Dialog）组件，创建一个基本的弹出对话框。下面是弹出框的HTML代码：

<div data-role="popup" id="popupBasic" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>提示</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">弹出对话框的内容</h3>
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">确定</a>
    </div>
</div>

在上面的代码中，我们创建了一个ID为“popupBasic”的对话框，其中包含有标题和内容。在内容底部的部分，我们添加了一个按钮，并在按钮的“href”属性中设置了“data-rel="back"”，这表示点击该按钮后，会关闭当前的弹出对话框。

接下来，我们需要创建一个能够触发弹出对话框的按钮。

步骤三：创建弹出按钮

创建弹出按钮可以通过如下代码实现：

<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-a">点击弹出</a>

该代码中，我们创建了一个链接元素，使用了以下属性：

href="#popupBasic"：这表示当用户点击该按钮时，它会弹出一个ID为“popupBasic”的对话框。
data-rel="popup"：该属性声明这是一个弹出框。
class="ui-btn ..."：添加按钮样式，方便和其他元素的区分。

示例说明一

下面来看一个完整的示例。（在线Demo）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>弹出按钮示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>弹出按钮示例</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-a">点击弹出</a>
            <div data-role="popup" id="popupBasic" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                    <h1>提示</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                    <h3 class="ui-title">这是弹出对话框的内容</h3>
                    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">确定</a>
                </div>
            </div>
        </div>
        <div data-role="footer">
            <h1>页脚</h1>
        </div>
    </div>
</body>
</html>

示例说明二

下面再来看一个稍微复杂点的示例，它演示了如何关闭弹出框时执行一些动作。（在线Demo）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>弹出按钮示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
    <div data-role="page" id="page">
        <div data-role="header">
            <h1>弹出按钮示例</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-a">点击弹出</a>
            <div data-role="popup" id="popupBasic" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                    <h1>提示</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                    <h3 class="ui-title">这是弹出对话框的内容</h3>
                    <p>你可以在关闭对话框时执行一些自定义的操作，代码如下：</p>
                    <a href="#" id="closeBtn" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">确定</a>
                </div>
            </div>
        </div>
        <div data-role="footer">
            <h1>页脚</h1>
        </div>
    </div>
    <script>
    // 关闭弹出框时执行一些操作
    $(document).on("popupafterclose", "#popupBasic", function () {
        alert("对话框关闭了！");
    });
    </script>
</body>
</html>

在这个示例中，我们定义了一个ID为“closeBtn”的按钮，并添加了一个事件处理程序，在关闭弹出框时执行一些操作。在这个示例中，我们使用了jQuery Mobile定义的事件，它们仅在jQuery Mobile加载时才会生效。该事件的对象为当前关闭的弹出框。

上述便是使用jQuery Mobile创建一个基本的弹出按钮的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个基本的弹出按钮 - Python技术站