Redimensionar elementos con JQuery UI

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

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

Tutorial de JQuery

Resizable