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>
GET FREE $100.00 USD PAYPAL MONEY -> http://www.qckclk.club/?u=A4MPy <- QUICK BEFORE THEY CLOSE THEY LOOPHOLE