Jquery中dialog属性小记

在Web开发中，弹出框是非常常见的UI组件之一。而Jquery中的dialog属性，是一个非常方便的弹出框组件。本文将详细介绍dialog的基本属性和用法。

dialog基本属性

autoOpen:bool
是否随着页面的加载自动弹出，默认为true。
modal:bool
是否是模态框，即弹出框弹出后，不允许页面的其他元素进行交互。默认为true。
resizable:bool
是否可以改变弹出框的大小，默认为false。
draggable:bool
是否可以拖拽弹出框，默认为false。
width:number
弹出框的默认宽度，默认为300。
height:number
弹出框的默认高度，默认为auto。
buttons:object
弹出框底部显示的按钮组，可以添加多个按钮，每个按钮包括按钮名称和回调函数。

dialog用法示例

示例1：基础用法

<html>
  <head>
    <meta charset="UTF-8">
    <title>Dialog示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.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/jqueryui/1.12.1/jquery-ui.min.js"></script>
  </head>
  <body>
    <div id="dialog" title="基础用法">
      <p>这是一个基础用法示例。</p>
    </div>
    <script>
      $(function() {
        $("#dialog").dialog({
          autoOpen: false,
          resizable: true,
          draggable: true,
          height: 300,
          width: 400,
          buttons: {
            "确认": function() {
              $(this).dialog("close");
            }
          }
        });

        $("#open").click(function() {
          $("#dialog").dialog("open");
        });
      });
   </script>

   <button id="open">打开弹出框</button>
  </body>
</html>

首先需要引入Jquery和Jquery UI的脚本和样式表。在body中定义一个div作为弹出框的容器，并赋予一个id。

在脚本中，通过$("#dialog").dialog()方法进行弹出框的初始化。其中，autoOpen属性设置为false，表示弹出框不会在页面加载时自动弹出。

点击打开按钮时，通过$("#dialog").dialog("open")方法打开弹出框。这时，弹出框出现了，并在底部显示一个“确认”按钮。这个按钮点击后，弹出框会关闭。

示例2：自定义按钮和回调函数

<html>
  <head>
    <meta charset="UTF-8">
    <title>Dialog示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.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/jqueryui/1.12.1/jquery-ui.min.js"></script>
  </head>
  <body>
    <div id="dialog" title="自定义按钮和回调函数">
      <p>这是一个自定义按钮和回调函数示例。</p>
    </div>
    <script>
      $(function() {
        $("#dialog").dialog({
          autoOpen: false,
          resizable: true,
          draggable: true,
          height: 300,
          width: 400,
          buttons: [
            {
              text: "确定",
              click: function() {
                alert("您选择了确定。");
                $(this).dialog("close");
              }
            },
            {
              text: "取消",
              click: function() {
                alert("您选择了取消。");
                $(this).dialog("close");
              }
            },
          ]
        });

        $("#open").click(function() {
          $("#dialog").dialog("open");
        });
      });
   </script>

   <button id="open">打开弹出框</button>
  </body>
</html>

基本的用法已经在示例1中介绍过，这里不再赘述。这个示例的区别在于，在底部定义了两个按钮，分别为“确定”和“取消”，并实现了点击按钮之后的回调函数。

这里需要注意，我们可以直接在buttons属性中定义一个数组，数组的每一个元素又是一个JSON对象。每个JSON对象都需要包含一个text属性来表示按钮上的文字，还需要包含一个click方法，即按钮点击之后的回调函数。

以上就是Jquery中dialog属性的基本内容和用法示例。希望本文能够帮助大家更好地掌握Jquery中的弹出框组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery中dialog属性小记 - Python技术站

Jquery中dialog属性小记