Question

尽管我有正确的jqueryui库，但我的可调整大小的函数不起作用。这是我的代码：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Default functionality</title>
  <script type="text/javascript" src="jquery.min.js"></script>

<script src="jquery-ui/jquery-ui.js"></script>

<link href="jqueryi-ui/jquery-ui.css" rel="stylesheet">



   <style type="text/css">
  #resizable { 
   width: 150px; 
   height: 150px; 
   background-color:green;
   padding: 0.5em; }

  </style>
  <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

在Codepen

上试用您的代码

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Resizable - Default functionality</title>
 <!--   
<script type="text/javascript" src="jquery.min.js"></script>

<script src="jquery-ui/jquery-ui.js"></script>

<link href="jqueryi-ui/jquery-ui.css" rel="stylesheet"> 
-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style type="text/css">
        #resizable { 
         width: 150px; 
         height: 150px; 
         background-color:green;
         padding: 0.5em; }
    </style>
    <script>
        $(function() {
          $( "#resizable" ).resizable();
        });
    </script>
</head>
<body>
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
    </div>
</body>
</html>

WORKED，只替换你的jquery.js / jquery-ui.js / jquery-ui.css引用。因此，您可以检查您的jquery / jquery-ui lib版本和路径引用。

或者查看此帖：jquery-ui Resizable。

jquery中的Resizable函数无法正常工作

1 个答案: