jquery-ui - jQuery UI 可调整大小的最小示例

Question

为什么这行不通？

取自 https://jqueryui.com/resizable/ 的最小示例

// Links to jsfiddle must be accompanied by code

https://jsfiddle.net/e0sdfuLb/

Answer 1

你的 fiddle 不工作，因为你还没有导入 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>