Redimensionar los campos de una tabla con jQuery UI

Gracias a jQuery UI podemos realizar acciones o efectos Javascript que normalmente nos costarían muchas líneas de código con un par de simples líneas. En este caso vamos a ver un sencillo ejemplo de cómo poder redimensionar los campos de una tabla.

Para este ejemplo he creado una página simple y he incluido jQuery y jQuery UI enlazándolos en el código desde su página principal (no olvidemos que lo deseable es descargarlos y linkarlos desde nuestra misma página):

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Lo siguiente es crear una tabla HTML, tan básica o llena de estilos como se desee, para posteriormente añadir en la cabecera de la página el siguiente código javascript:

$(document).ready(function(){
    $(".head_1").resizable();
    $(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_3").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_4").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
});

Tras el salto seguiremos explicando qué hace cada cosa.

La línea:

$(document).ready(function(){...});

ejecutará el código Javascript situado entre las llaves nada más terminar de cargar la página. Veamos qué código ejecuta. La primera línea es como sigue:

$(".head_1").resizable();

Esta línea aplica la posibilidad de redimensionar un elemento a todas aquellas etiquetas que tengan la clase «head_1» (en el código, class=»head_1″). Pero claro, aplica la redimensión tanto horizontal como verticalmente, y en el caso de las cabeceras de la tabla nos interesa que sólo se pueda redimensionar horizontalmente, como en las líneas siguientes, de las cuales analizaremos la primera:

$(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});

que  simplemente se encarga de que, al efectuarse el resize, mantenga la altura de la fila original (antes del resize), y además que sólo se pueda redimensionar por el Este (con el » handles: ‘e’ «).

Finalmente, veamos cómo queda todo el código de la página:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 <script language="javascript">
  $(document).ready(function(){
   $(".head_1").resizable();
   $(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
   $(".head_3").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
   $(".head_4").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
  });
 </script>

 </head>

 <body>
  <br><br>
  <table align="center" style="border:1px solid #DDD;background-color:#AAA;" cellpadding="2" cellspacing="1">
   <thead style="background-color:#DDD;" class="thead">
    <tr>
     <th class="head_1" style="text-align:left;">Título 1</th>
     <th class="head_2" style="text-align:left;">Título 2</th>
     <th class="head_3" style="text-align:left;">Título 3</th>
     <th class="head_4" style="text-align:left;">Título 4</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td style="background-color:white;">Campo 1</td>
     <td style="background-color:white;">Campo 2</td>
     <td style="background-color:white;">Campo 3</td>
     <td style="background-color:white;">Campo 4</td>
    </tr>
    <tr>
     <td style="background-color:white;">Campo 1</td>
     <td style="background-color:white;">Campo 2</td>
     <td style="background-color:white;">Campo 3</td>
     <td style="background-color:white;">Campo 4</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Únete a la conversación

1 comentario

Dejar un comentario

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

A %d blogueros les gusta esto: