jQuery UI可调整大小的最小例子

Question

为什么这不起作用？

取自https://jqueryui.com/resizable/

的最小例子

// Links to jsfiddle must be accompanied by code

https://jsfiddle.net/e0sdfuLb/

Answer 1

你的小提琴无效，因为你还没有导入jQuery-UI CSS：

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

所以这里是jsfiddle更新（和工作）：https://jsfiddle.net/beaver71/kbu61s3a/5/

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

#resizable {
     width: 200px;
     height: 200px;
     padding: 0.5em;
     background: #ccc;
  }
  #resizable h3 { text-align: center; margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<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>