informaticaPC

Tutorial de JQuery

Redimensionar elementos con Resizable

Resizable

Permite redimensionar cualquier elemento del DOM.

En el siguiente ejemplo, tras pulsar en el botón aparecerá un pequeño triángulo en la parte inferior derecha del 'DIV': haz clic en él y arrastra para redimensionarlo a lo alto y ancho.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Redimensionar elementos con JQuery UI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #div1 { height:150px;width:300px;background-color:lightgreen; }
    </style>

    <!-- Observa que agregamos también la librería JQuery UI -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>

    <!-- Agregamos también el archivo CSS del theme que usemos -->
    <link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />

    <script type="text/javascript">

        $(document).ready(function()
        {
            $("#boton1").click(function() {
                $("#div1").resizable();
            });
        });

    </script>
  </head>

  <body>

      <div id="div1">
          <input type="button" id="boton1" value="Haz clic y luego redimensiona el DIV" />
      </div>

  </body>

</html>

Ejemplo

Más información

Vea también: [ Resizable ] - [ Resizable (doc) ] - [ resizable() ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso