Question

我的jQuery <html> <head> <link rel="stylesheet" href="test.css"> <link rel="stylesheet" href="httpS://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#main").resizable("enable"); }); </script> </head> <body> <div class="main" id="main"> <div class="header"></div> <div class="innerMain"> <div class="content"></div> </div> </div> </body> </html>无效它给出了错误：

TypeError：$（...）。resizable不是函数;

我的代码是：

    static int[][] rotateClockwise(int[][] matrix){
    int rowNum = matrix.length;
    int colNum = matrix[0].length;

    int[][] temp = new int[rowNum][colNum];
    for(int i =0; i<rowNum; i++){
        for(int j=0; j<colNum; j++){

            temp[i][j] = matrix[rowNum-j-1][i];
        }
    }
    return temp;
}

Answer 1

此代码段正在运行寻找这里使用的CDN ......并查找加载它们的顺序。

＆＃13;

$("#main").resizable();

＆＃13;

#main{
  border:1px solid black;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="main" id="main">
  <div class="header"></div>
  <div class="innerMain">
    <div class="content">
      You can resize me!
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可能缺少jquery ui css和js：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Answer 3

添加jquery-ui.js库并从resizable函数中删除enable

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#main" ).resizable();
  } );
</script>

Answer 4

<html>
    <head>
        <meta charset="utf-8">
        <title>resizable</title>
        <!--div is used to style block element,span are used to group inline elements-->
    <style>
        .bluebox{
            background-color:#415E9B;
            font-size: 20px;
            color: white;
            height: auto;
             }
        .blackbox{
            background-color: #0C0C0C;
            font-size: 20px;
            color: white;
            height: 100px;
             }
             .greybox{
            background-color:rgb(161, 54, 165);
            font-size: 20px;
            color: white;
            height: 100px;
             }
        .great{
            background-color: yellowgreen;
            color: teal;
        }
        .news{
            background-color:palevioletred ;
            columns: auto 1px;;
            height: auto;

        }
        .org{
            background-color: peru;
            color:red;
            height: auto;
        }
        #fb{
            border:1px solid black;
        }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


    </head>
    <body>
        <div class="bluebox" id="fb">
        <p>facebook is <span class="great">great</span></p></div> 

        <div class="blackbox">
        <p>BBC is a <span class="news">> newschannel</span></p></div>

        <div class="greybox">
        <p>UEFA is a football<span class="org">organization</span></p></div>
        <script>
            $(function(){
                $("#fb").resizable({
                    maxheight : 200,
                    maxwidth : 300,
                    minheight: 50,
                    minwidth:50
                });

            });


        </script>
    </body>      
</html>

Answer 5

我们必须检查CDN的顺序：正确的顺序：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

我正在相反地将jquery-ui放在jquery.min之上... 问题已解决

JQuery .resizable无法正常工作

5 个答案: