Evento de cambio de tamaño del cuadro de diálogo jQuery UI

El evento de cambio de tamaño de jQuery UI se activa cuando se cambia el tamaño del cuadro de diálogo.

Obtenga más información sobre los selectores y eventos de jQuery aquí .

Sintaxis:

$(".selector").dialog (
   resize: function( event, ui ) {
       console.log('resized')
   },

Acercarse:

  • Primero, agregue los scripts jQuery Mobile necesarios para su proyecto.

<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css»
rel = «hoja de estilo»>
<script src = «https://code. jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Ejemplo 1:

HTML

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <link href = 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
        </script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
         </script>
        
  
      <script type = "text/javascript">
         $(function() {
            $( "#gfg2" ).dialog({
          autoOpen: false, 
               resize: function( event, ui ) {
                  console.log('resized')
               },
            });
            $( "#gfg" ).click(function() {
               $( "#gfg2" ).dialog( "open" );
            });
         });
      </script>
   </head>
     
   <body>
      <div id = "gfg2" title="GeeksforGeeks">
         <textarea>jQuery UI | resize(event, ui) Event</textarea>
      </div>
      <button id = "gfg">Open Dialog</button>
   </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *