jQuery UI Dialog替代Confirm实例分析

在前端开发中，我们经常需要弹出提示框来询问用户是否确认某个操作。而最常用的方式无疑是使用JavaScript自带的confirm函数。但是，confirm函数样式非常简陋，不够美观，在UI设计上无法给用户更好的体验。此时，jQuery UI库提供了更为美观、灵活的Dialog组件，可以完美代替confirm函数。本文将详细介绍如何使用jQuery UI Dialog替代confirm函数，并提供两个示例说明。

使用jQuery UI Dialog替代confirm函数

使用jQuery UI Dialog替代confirm函数的步骤如下：

引入jQuery和jQuery UI的库文件。

<head>
  <title>jQuery UI Dialog Test</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>

创建一个dialog对话框，并设置标题、内容和按钮。最后，设置对话框为不可关闭。

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "OK": function() {
        $(this).dialog("close");
        // 执行确认操作代码
      },
      Cancel: function() {
        $(this).dialog("close");
        // 执行取消操作代码
      }
    },
    closeOnEscape: false,
    open: function(event, ui) {
      $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    }
  });
});

绑定一个点击事件，当点击事件触发时，打开我们创建的dialog对话框。

$("#btn-confirm").on("click", function() {
  $("#dialog-confirm").dialog("open");
});

示例说明

示例一：询问用户是否删除

在一个管理系统中，我们需要对某个数据进行删除操作，删除前需要询问用户是否确认删除。下面是一个使用jQuery UI Dialog替代confirm函数的代码示例。

<!DOCTYPE html>
<html>

<head>
  <title>jQuery UI Dialog Test</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>

<body>
  <button id="btn-delete">Delete</button>
  <div id="dialog-confirm" title="Delete Confirm">
    <p>Are you sure you want to delete?</p>
  </div>
  <script>
    $(function() {
      $("#dialog-confirm").dialog({
        resizable: false,
        height: "auto",
        width: 400,
        modal: true,
        buttons: {
          "Delete": function() {
            $(this).dialog("close");
            // 执行删除操作代码
          },
          Cancel: function() {
            $(this).dialog("close");
          }
        },
        closeOnEscape: false,
        open: function(event, ui) {
          $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
        }
      });

      $("#btn-delete").on("click", function() {
        $("#dialog-confirm").dialog("open");
      });
    });
  </script>
</body>

</html>

示例二：询问用户是否保存

在一个编辑器中，我们需要在用户离开页面前对用户进行保存提示。下面是一个使用jQuery UI Dialog替代confirm函数的代码示例。

<!DOCTYPE html>
<html>

<head>
  <title>jQuery UI Dialog Test</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>

<body>
  <button id="btn-save">Save</button>
  <div id="dialog-confirm" title="Save Confirm">
    <p>Do you want to save?</p>
  </div>
  <script>
    $(function() {
      $("#dialog-confirm").dialog({
        resizable: false,
        height: "auto",
        width: 400,
        modal: true,
        buttons: {
          "Save": function() {
            $(this).dialog("close");
            // 执行保存操作代码
          },
          Cancel: function() {
            $(this).dialog("close");
          }
        },
        closeOnEscape: false,
        open: function(event, ui) {
          $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
        }
      });

      $("#btn-save").on("click", function() {
        $("#dialog-confirm").dialog("open");
      });
    });
  </script>
</body>

</html>

以上就是使用jQuery UI Dialog替代confirm的详细攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ui dialog替代confirm实例分析 - Python技术站

jquery ui dialog替代confirm实例分析

jQuery UI Dialog替代Confirm实例分析

使用jQuery UI Dialog替代confirm函数

示例说明

示例一：询问用户是否删除

示例二：询问用户是否保存

相关文章