jQueryUI |对话(1) - 芒果文档

📌 相关文章

📜 jQueryUI |对话(1)

📅 最后修改于: 2023-12-03 15:32:14.909000 🧑 作者: Mango

jQueryUI对话框介绍

简介

jQueryUI对话框是一个可高度定制的弹出式对话框，完全由jQuery编写，具有许多预先定义的特性，例如：标题栏，关闭按钮和从页面中心显示等等。

特性

jQueryUI对话框具有以下特性：

漂亮的外观和感觉
可拖动和调整大小
支持不同类型的内容，如文本，图像和嵌入的HTML
多种不同的打开和关闭效果
自定义按钮
在页面中心打开
可以以模式窗口的方式打开，防止用户与相同页面的其他部分交互

安装

引入jQuery和jQueryUI的样式和脚本：

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

使用

基础使用

<div id="my-dialog" title="对话框标题">
  <p>这是一些内容</p>
</div>

<script>
  $( "#my-dialog" ).dialog();
</script>

自定义按钮

<div id="my-dialog" title="对话框标题">
  <p>这是一些内容</p>
</div>

<script>
  $( "#my-dialog" ).dialog({
    buttons: {
      "确定": function() {
        $( this ).dialog( "close" );
      },
      "取消": function() {
        $( this ).dialog( "close" );
      }
    }
  });
</script>

模式窗口

<div id="my-dialog" title="对话框标题">
  <p>这是一些内容</p>
</div>

<script>
  $( "#my-dialog" ).dialog({
    modal: true
  });
</script>

打开和关闭效果

<div id="my-dialog" title="对话框标题">
  <p>这是一些内容</p>
</div>

<script>
  $( "#my-dialog" ).dialog({
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
</script>

总结

jQueryUI对话框是一个极其实用的插件，可以帮助开发人员快速地创建可高度定制的弹出式对话框。其功能很容易使用，还有很多配置选项。