博客

jQuery UI Resizable create事件

  • Post category:jquery

jQuery UI Resizable create事件

jQuery UI Resizable create事件是在调整大小小部件创建时触发的事件。该事件在调整大小小部件创建时只触发一次。

语法

create的语法如下：

$(selector).resizable({
  create: function(event, ui) {
    // 在调整大小小部件创建时执行的代码
  }
});

其中，selector是要创建调整大小小部件的元素选择器，create是一个可选的事件处理程序，用于在调整大小小部件创建时执行代码。

示例1：在调整大小小部件创建时执行代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Resizable create事件示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $("#resizable").resizable({
        create: function(event, ui) {
          console.log("调整大小小部件已创建");
        }
      });
    });
  </script>
</head>
<body>
  <div id="resizable" style="width: 200px; height: 200px; background-color: #ccc;"></div>
</body>
</html>

在上面的示例中，我们首先引入了jQuery和jQuery UI库。然后，我们创建了一个<div>元素，并使用resizable方法将其转换为调整大小小部件。我们使用create事件处理程序，在调整大小小部件创建时输出一条消息到控制台。

示例2：在调整大小小部件创建时设置初始大小

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Resizable create事件示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $("#resizable").resizable({
        create: function(event, ui) {
          $(this).width(400);
          $(this).height(300);
        }
      });
    });
  </script>
</head>
<body>
  <div id="resizable" style="width: 200px; height: 200px; background-color: #ccc;"></div>
</body>
</html>

在上面的示例中，我们首先引入了jQuery和jQuery UI库。然后，我们创建了一个<div>元素，并使用resizable方法将其转换为调整大小小部件。我们使用create事件处理程序，在调整大小小部件创建时将其初始大小设置为400×300像素。

总结

jQuery UI Resizable create事件是在调整大小小部件创建时触发的事件。我们可以使用该事件在调整大小小部件创建时执行代码，例如输出条消息到控制台或设置初始大小。在实际开发中，我们可以根据需要使用该事件，并进行相应的操作。

Tags: