Question

我想通过使用jquery库https://jqueryui.com/resizable/中的以下方法来创建可调整大小的div容器

我的代码是：

<!doctype html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Resizable - Default functionality</title>
      <style>
      #resizable { width: 150px; height: 150px; padding: 0.5em; }
      #resizable h3 { text-align: center; margin: 0; }
      .ui-widget-content {
        border: 1px solid #dddddd;
        background: #ffffff;
        color: #333333;
    }
      </style>
      <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();
      } );
      </script>
    </head>
    <body>
        <div id="resizable" class="ui-widget-content">
            <h3 class="ui-widget-header">Resizable</h3>
        </div>
    </body>
</html>

它不起作用。

控制台日志中没有任何错误，但是我无法拖动边框并更改其大小。

我看不出为什么有问题。

Answer 1

为了使jquery-ui能够按预期工作，您需要包含以下css文件：

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css

这是其中包含css文件的代码：

$( function() {
  $( "#resizable" ).resizable();
} );

#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.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>
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

可调整大小的html元素

1 个答案: