Mój jQuery .resizable nie działa.
Daje błąd:

TypeError: $ (...). Resizal nie jest funkcją;

Mój kod to:

<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>
1
Aviral Garg 27 czerwiec 2017, 08:45

5 odpowiedzi

Najlepsza odpowiedź

Ten fragment pracuje.
Poszukaj tutaj CDNS ... i szukaj zamówienia, aby je załadować.

$("#main").resizable();
#main{
  border:1px solid black;
}
<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> 
6
Louys Patrice Bessette 27 czerwiec 2017, 06:09

Dodaj bibliotekę jQuery-ui.js i usuń włączenie z funkcji rezygnacyjnej

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#main" ).resizable();
  } );
</script>
0
Prashant Tapase 27 czerwiec 2017, 05:51

Możesz zaginąć jQuery ui css i 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>
0
Vigneshwaran Markandan 27 czerwiec 2017, 05:48
<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>
0
Kamran9266 24 marzec 2020, 11:56

Musimy sprawdzić sekwencję naszych CDN: poprawna sekwencja:

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

Robiłem odwrotną rolę jquery-ui nad jQuery.min ... problem jest teraz rozwiązany

-3
Martijn Pieters 24 marzec 2020, 16:58