jQuery UI Resizable instance() 方法(1)

📌 相关文章

📜 jQuery UI Resizable instance() 方法(1)

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

jQuery UI Resizable instance() 方法

jQuery UI Resizable 是一个可扩展的插件，可以让用户通过鼠标拖动来调整元素的大小。Resizable 插件使用 instance() 方法来创建 Resizable 实例。

方法语法

$(selector).resizable("instance");

返回值

instance() 方法返回 Resizable 实例，可以用于调用 Resizable 的其他方法。如果该元素没有被创建过 Resizable 实例，则返回 undefined。

实例

以下示例使用 instance() 方法来获取 Resizable 实例并设置 handle 参数，使得用户只能在元素的右边和下方拖动调整大小的手柄。

<!DOCTYPE html>
<html>
<head>
  <title>Resizable Demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#resizable").resizable();
      $("#resizable").resizable("instance").option("handles", "e, s");
    });
  </script>
  <style>
    #resizable {
      width: 250px;
      height: 150px;
      border: 1px solid black;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="resizable">
    <p>Resizable Demo</p>
  </div>
</body>
</html>

在此示例中，我们使用 resizable() 方法创建 Resizable 实例，然后使用 instance() 方法获取该实例，并使用 option() 方法设置 handles 参数为 "e, s"。

注意事项

instance() 方法必须应用于已经使用 resizable() 方法创建的元素。
如果想同一元素多次使用 resizable() 方法创建 Resizable 实例，需要先使用 destroy() 方法撤销之前创建的实例。否则，使用 instance() 方法时会返回最初创建的实例。