|
(Alguno de los ejemplos sólo funcionan en Internet Explorer)
- Introducción
- Modificaciones de la propiedad STYLE
- 2.1 De color de fondo
- 2.2 Del color del Texto
- 2.3 Del tipo, tamaño y peso de la fuente del texto
- 2.4 De otras propiedades del Texto
- 2.5 De los bordes
- 2.6 Del relleno
- 2.7 Mostrar / ocultar contenidos
- 2.8 Redimensionamientos
- 2.9 Movimientos
- Modificaciones de Reglas: estilos dinámicos
- Introducción
- Modificaciones de la propiedad Style
- Modificaciones de Reglas: estilos dinámicos
- 3.1 Deshabilitar hiperenlaces:
- 3.2 Hacer no-editables campos de formularios: Esta funcionalidad puede ser útil cuando queremos que el usuario realice ciertos pasos obligatoriamente antes de poder cumplimentar datos en campos de formularios. (Por ejemplo, no le permitimos introducir datos personales si antes no ha escrito su código de identificación en el sistema).
Evidentemente, es una mejora en la calidad del interfaz de usuario si esta validación / activación de campos se realiza en cliente en vez de tener que enviar el formulario al servidor, validarlo, cargar el formulario-de-paso-siguiente, devolverselo al cliente y "renderizar" de nuevo la página en el nuevo estado.
En el formulario de ejemplo que mostramos a continuación, vamos a hacer editables o no ciertos campos del formulario y el evento que lo contralará será un "click" sobre un botón, pero en una aplicación podría ser cualquier tipo de evento:
Habilitar / Deshabilitar Campos
Hemos utilizado las siguientes reglas para formatear el formulario, sus etiquetas y campos:
.tableForm {table-layout: fixed;background: #D2DFD7;color: #000000;border-collapse: separate;border: outset 10px #DAF2FE;border-spacing: 15px;padding: 10px;font-weight:normal;font-size: 10px;text-align: left;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}
td.Form {background: #EAEFEF;color:#003366;border: solid 1px #B2B3B3;font-weight:bold;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}Y utilizaremos dos clases distintas para los campos <INPUT>, dependiendo de si están activos y son editables, o si no están activos
.inputActive {background: white;color:black;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.inputInactive {background: #C2C3C3;color:darkgrey;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}Definimos el hiperenlace que va a manejar el evento de activar / desactivar los campos <INPUT>. Utilizamos una función que nos permita realizar ambas operaciones con un único botón:
<a href="javascript:void(null)" onClick="FChangeRuleInput('form1')" class="buttonAction"> Habilitar / Deshabilitar Campos</a>
Y la función Javascript que habilitará o desabilitará los campos <INPUT> será como sigue:
var click=1;
function FChangeRuleInput(id)
{
if (click==1)
{
var inputField = document.form1.getElementsByTagName('INPUT');
for(i=2;i<inputField.length;i++)
{
eval("inputField.item(i)"+".disabled=false");
inputField.item(i).className='inputActive';
}
click=0;
}
else
{
var inputField = document.form1.getElementsByTagName('INPUT');
for(i=2;i<inputField.length;i++)
{
eval("inputField.item(i)"+".disabled=true");
inputField.item(i).className='inputInactive';
}
click=1;
}
} - 3.3 Ocultar Filas en tablas: Con alguna frecuencia en el manejo de datos tabulados puede ser de gran utilidad ocultar alguna de las filas de la tabla condicionado a ciertos eventos. Por ejemplo para filas de agregación o de totales.
En el siguiente ejemplo, vamos a mostrar o ocultar la fila de Totales. En nuestro caso el evento que lo contralará será un "click" sobre un botón, pero en una aplicación podría ser cualquier tipo de evento:
Prioridades del mes Descripción Línea Unidades Sofás Salón 11 Librerías Salón 5 Mesas de TV Salón 12 Mesas de centro Salón 14 Mesas de comedor Salón 10 Fregaderos Muebles cocina 15 Armarios de cocina Muebles cocina 9 Cómodas Dormitorio 6 Mesillas de noche Dormitorio 18 Roperos Dormitorio 6 Armarios de baño Baño 13 Espejos Baño 9 Vitrinas Baño 8 Total 136 En primer lugar, utilizamos las siguientes reglas para formatear la tabla, sus filas y celdas:
.backgroundTableBg {background: #C6B685;color: #000000;font-weight:normal;border: 3px double #000000;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableTitle {background: #C6B685;color: #000000;text-align: center;font-weight:bold;font-size: 11px;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableHeader {background: #000000;color: #F8DF90;border-right: 1px solid #F8DF90;font-weight:bold;font-size: 11px;text-align: center;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableHeaderNoB {background: #000000;color: #F8DF90;font-weight:bold;font-size: 11px;text-align: center;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableOddRow {background:#F7F7F7;color: #000000;height:14px;font-size:11px;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}
.dataTablePairRow {background:#FFFFFF;color: #000000;height:14px;font-size:11px;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}
.dataTableTotalRow {background:#F8DF90;color: #000000;height:14px;border-top: 3px double #000000;font-size:11px;font-weight:bold;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}En la fila del Total que es la que debe aparecer oculta por defecto, definimos un estilo "in-line" que nos permita ocultarla inicialmente mediante visibility:hidden, y asignamos un ID para dicha fila:
<tr id="total" class="dataTableTotalRow" style="visibility:hidden">
Definimos el hiperenlace que va a manejar el evento de mostrar / ocultar la fila de Total. Utilizamos una función que nos permita realizar ambas operaciones con un único botón:
<a href="javascript:FHideRow('total')" class="buttonAction"> Mostrar / Ocultar Total</a>
Y finalmente, escribimos la función Javascript que mostrará u ocultará la fila de Total en función del estado anterior:
var click=1;
function FHideRow(id)
{
if (click==1)
{
document.getElementById(id).style.visibility='visible';
click=0;
}
else
{
document.getElementById(id).style.visibility='hidden';
click=1;
}
} - 3.4 Ocultar Columnas en Tablas Esta utilidad puede ser muy necesaria para el caso de talblas con un gran número de columnas que obliguen a utilizar scroll horizontal para su vuisualización.
Es elegante plantear la vuisualización por defecto de sólo las columnas más importantes, manteniendo el resto ocultas, de manera que no sea necesario el scroll. Pulsando un botón, pueden visualizarse u ocultarse el resto de columnas, pero sólo temporalmente por decisión del usuario.
Prioridades del mes Descripción Línea Unidades Sofás Salón 11 Librerías Salón 5 Mesas de TV Salón 12 Mesas de centro Salón 14 Mesas de comedor Salón 10 Fregaderos Muebles cocina 15 Armarios de cocina Muebles cocina 9 Cómodas Dormitorio 6 Mesillas de noche Dormitorio 18 Roperos Dormitorio 6 Armarios de baño Baño 13 Espejos Baño 9 Vitrinas Baño 8 Total 136 Al igual que antes, utilizamos las siguientes reglas para formatear la tabla y sus filas y celdas:
.backgroundTableBg {background: #C6B685;color: #000000;font-weight:normal;border: 3px double #000000;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableTitle {background: #C6B685;color: #000000;text-align: center;font-weight:bold;font-size: 11px;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableHeader {background: #000000;color: #F8DF90;border-right: 1px solid #F8DF90;font-weight:bold;font-size: 11px;text-align: center;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableHeaderNoB {background: #000000;color: #F8DF90;font-weight:bold;font-size: 11px;text-align: center;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableOddRow {background:#F7F7F7;color: #000000;height:14px;font-size:11px;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}
.dataTablePairRow {background:#FFFFFF;color: #000000;height:14px;font-size:11px;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}
.dataTableTotalRow {background:#F8DF90;color: #000000;height:14px;border-top: 3px double #000000;font-size:11px;font-weight:bold;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}En la columna que debe aparecer oculta por defecto definimos un estilo "in-line" para cada una de sus celdas que nos permita ocultarlas mediante display:none, y asignamos un ID diferente para todas las celdas de dicha columna:
<td class="dataTableHeaderNoB" id="oculta1" style="display:none"> Stock</td>
...
<td class="dataTableTotalRow" id="oculta15" style="display:none"> Disponible</td>Definimos el hiperenlace que va a manejar el evento de mostrar / ocultar la columna de Stock. Utilizamos una función que nos permita realizar ambas operaciones con un único botón:
<a href="javascript:FHideCol('oculta')" class="buttonAction"> Mostrar / Ocultar Total</a>
Y finalmente, escribimos la función Javascript que mostrará u ocultará la columna de Stock en función del estado anterior:
var click=1;
function FHideCol(id)
{
if (click==1)
{
for(i=0;i<15;i++)
{
document.getElementById(id).style.visibility='visible';
}
click=0;
}
else
{
for(i=0;i<15;i++)
{
document.getElementById(id).style.visibility='hidden';
}
click=1;
}
} - 3.5 Ocultar Celdas en tablas: Después de ocultar y mostrar tanto filas como columnas, vamos a ver a continuación qué fácil es ocultar celdas de tablas utilizando la características de referenciar reglas de CSS's con Javascript:
Para complicarlo un poco más, en el ejemplo, además, cambiaremos también el aspecto de las celdas restantes, todo controlado por el mismo manejador de eventos:
Prioridades del mes Descripción Línea Unidades Sofás Salón 11 Librerías Salón 5 Mesas de TV Salón 12 Mesas de centro Salón 14 Mesas de comedor Salón 10 Fregaderos Muebles cocina 15 Armarios de cocina Muebles cocina 9 Cómodas Dormitorio 6 Mesillas de noche Dormitorio 18 Roperos Dormitorio 6 Armarios de baño Baño 13 Espejos Baño 9 Vitrinas Baño 8 Como siempre utilizamos las siguientes reglas para formatear la tabla:
.backgroundTableBg {background: #C6B685;color: #000000;font-weight:normal;border: 3px double #000000;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableTitle {background: #C6B685;color: #000000;text-align: center;font-weight:bold;font-size: 11px;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableHeader {background: #000000;color: #F8DF90;border-right: 1px solid #F8DF90;font-weight:bold;font-size: 11px;text-align: center;font-family: verdana,arial,helvetica,sans-serif;}
.dataTableHeaderNoB {background: #000000;color: #F8DF90;font-weight:bold;font-size: 11px;text-align: center;font-family: verdana,arial,helvetica,sans-serif;}Y ahora utilizaremos 2 reglas distintas: una para las celdas que se van a ocultar, dataTableCell2, y otra para las que van a modificar sus características, dataTableCell1.
.dataTableCell1 {background:#FFFFFF;color: #000000;border: 1px solid #EEEEEE;height:14px;font-size:11px;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}
.dataTableCell2 {background:#FFFFFF;color: #000000;border: 1px solid #EEEEEE;height:14px;font-size:11px;text-indent: 4px;font-family:Arial,Helvetica,sans-serif;}Definimos el hiperenlace que va a manejar el evento de mostrar y modificar celdas. Utilizamos una función que nos permita realizar ambas operaciones con un único botón:
<a href="javascript:FChangeRuleTable('b3')" class="buttonAction"> Ocultar y modificar celdas</a>
Y a continuación, la función Javascript que ocultará, modificará y mostrará las celdas en función del estado anterior:
function FChangeRuleTable(id)
{
if (click==1)
{
document.styleSheets[3].rules[15].style.visibility= 'hidden';
document.styleSheets[3].rules[14].style.background= 'navy';
document.styleSheets[3].rules[14].style.height= '16';
document.styleSheets[3].rules[14].style.fontFamily= 'Courier';
document.styleSheets[3].rules[14].style.fontSize= '13';
document.styleSheets[3].rules[14].style.color= 'white';
document.styleSheets[3].rules[14].style.borderWidth= '2';
document.styleSheets[3].rules[14].style.borderColor= '#B9D6DB';
document.styleSheets[3].rules[14].style.borderStyle= 'outset';
click=0;
}
else
{
document.styleSheets[3].rules[15].style.visibility= 'visible';
document.styleSheets[3].rules[14].style.background= 'white';
document.styleSheets[3].rules[14].style.height= '14';
document.styleSheets[3].rules[14].style.fontFamily= 'Verdana';
document.styleSheets[3].rules[14].style.fontSize= '10';
document.styleSheets[3].rules[14].style.color= 'black';
document.styleSheets[3].rules[14].style.borderWidth= '0';
document.styleSheets[3].rules[14].style.borderColor= '';
document.styleSheets[3].rules[14].style.borderStile= '';
click=1;
}
} - 3.6 Priorizar contenidos. Panel de Carpetas: [Sólo Internet Explorer] Una utilidad inmediata de esta posibilidad de mostrar u ocultar dinámicamente áreas de contenidos es la implementación de una carpeta de secciones.
Cada una de las secciones será una capa, todas estarán superpuestas y existirán unos selectores para elegir cual deseamos visualizar.
Pero en este caso vamos a variar dinámicamente con código javascript simple el parámetro z-index asociado a cada una de nuestras secciones (layers). Este parámetro indica la prioridad de visualización que utilizará el browser para mostrar capas que se solapen.
Para implementar los selectores de capas utilizaremos el sistema de botones presentado en la seccion 4.2 Barra de Opciones con Rollover y Opción Seleccionada del artículo Ejemplos y trucos útiles con CSS's
Plantillas Scripts CSS's
Carpeta
de
Plantillas
HTML
Carpeta
de
Scripts
Carpeta
de
CSS's
En primer lugar definiremos las reglas para formatear los selectores:
.folderButtonOff {background:#D4D0C8;color:#000000;cursor:hand;border: 2px outset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 2px 4px;font-family: arial,helvetica,sans-serif;}
.folderButtonOn {background:#D4D0C8;color:#000000;cursor:hand;border: 2px inset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 2px 4px;font-family: arial,helvetica,sans-serif;}
.folderButtonOver {background:#F4F0E8;color:#000000;border: 2px inset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 2px 4px;font-family: arial,helvetica,sans-serif;}Y a continuación las clases que formatean las distintas carpetas. Normalmente utilizarían los mismos parámetros de estilo, diferenciándose en el posicionamiento y en el parámetro z-index, aunque en este caso distinguiremos también su "background", a efectos de resaltarlas:
.folderButtonOff {background:#D4D0C8;color:#000000;cursor:hand;border: 2px outset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 2px 4px;font-family: arial,helvetica,sans-serif;}
.folderButtonOn {background:#D4D0C8;color:#000000;cursor:hand;border: 2px inset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 2px 4px;font-family: arial,helvetica,sans-serif;}
.folderButtonOver {background:#F4F0E8;color:#000000;border: 2px inset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 2px 4px;font-family: arial,helvetica,sans-serif;}Cuanto mayor sea el z-index de una capa mayor será su prevalencia. De manera que por defecto se va a mostrar "Carpeta1". La siguiente función se encargará se implementar el rollover de los botones de selección, la selección del botón activo y, simultáneamente, asignar mayor "z-index" a la capa seleccionada, con lo cual tendrá prioridad de visualización:
Y a continuación, la función Javascript que ocultará, modificará y mostrará las celdas en función del estado anterior:
var pulsada=new Array();
var Carpeta="Carpeta";
var zIndex=1;
var pointer=0;
function rolloverPrior(id,classe,ev)
{
if (ev==0)
{
if(pulsada[0]!=id) document.getElementById(id).className=classe;
}
else if(ev==1)
{
if(pulsada[0]!=id) document.getElementById(id).className=classe;
}
else
{
if(pulsada[0]!=id&&pulsada!='') document.getElementById(pulsada[0]).className=pulsada[1];
pulsada[0]=id;
pulsada[1]='folderButtonOff';
document.getElementById(id).className=classe;
pointer = id;
var i=0
for(i=0;i<3;i++)
{
eval("document.getElementById('Carpeta"+(i+1)+"').style.zIndex= 1");
}
id = 'Carpeta' + pointer;
document.getElementById(id).style.zIndex = zIndex + 1;
}
}
Los botones de selección quedarán implementados entonces de la siguiente manera:
<td class="folderButtonOff" id="1" title="Teoría y artículos sobre Usabilidad" width="40" align="center" onMouseOver="rolloverPrior(1,'folderButtonOn',1)" onMouseOut="rolloverPrior(1,'folderButtonOff',0)" onClick="rolloverPrior(1,'folderButtonOver',2);Launch('')"> Plantillas</td>
<td class="folderButtonOff" id="2" title="Directorios y catálogos de sites relacionadosc con la Usabilidad" width="40" align="center" onMouseOver="rolloverPrior(2,'folderButtonOn',1)" onMouseOut="rolloverPrior(2,'folderButtonOff',0)" onClick="rolloverPrior(2,'folderButtonOver',2);Launch('')"> Scripts</td>
<td class="folderButtonOff" id="3" title="Hojas de Estilo" width="40" align="center" onMouseOver="rolloverPrior(3,'folderButtonOn',1)" onMouseOut="rolloverPrior(3,'folderButtonOff',0)" onClick="rolloverPrior(3,'folderButtonOver',2);Launch('')"> CSS's</td>Y los paneles de las carpetas vendrán definidos por las clases:
.Folder1 {background-color:#D4D0C8;position: relative;left: -84px;top: 0px;z-index: 2;display: inline;padding: 0px;margin: 0px;width: 270px;height: 250px;border: 1px #949088 solid;}
.Folder2 {background-color:#E4E0D8;position: relative;left: -85px;top: -250px;z-index: 1;display: inline;padding: 0px;margin: 0px;width: 270px;height: 250px;border: 1px #949088 solid;}
.Folder3 {background-color:#F4F0E8;position: relative;left: -85px;top: -500px;z-index: 1;display: inline;padding: 0px;margin: 0px;width: 270px;height: 250px;border: 1px #949088 solid;}
En una página HTML, la forma de referenciar la Hoja de Estilo que queremos modificar dinámicamente con Javascript es:
document.styleSheets[0]
document.styleSheets[1]
...
Así, por ejemplo, en esta página dónde se manejan las siguientes CSS's:
<link id="cssText" rel="stylesheet" type="text/css" href="css/webTextTiny.css" />
<link rel=stylesheet href="css/webusable.css" media="screen" />
<link rel=stylesheet href="css/domA.css" media="screen" />
<link rel=stylesheet href="css/domB.css" media="screen" />
<link rel=stylesheet href="css/webusablePrint.css" media="print" />
document.styleSheets[0] hará referencia a webTextTiny.css
document.styleSheets[1] hará referencia a webusable.css
document.styleSheets[2] hará referencia a domA.css
document.styleSheets[3] hará referencia a domB.css
Por otra parte, una regla, (rule), en realidad no es más que una clase de estilo dentro de una CSS concreta. Así:
document.styleSheets[2].rule[4] hará referencia a
.block1 {position: relative;top: 20px;left: 30px;width: 200px;height: 200px;z-index: 1;display: block;background: #5F9EA0;color: #FFFFFF;border: 2px groove #FF7755;padding: 5px;font-weight:normal;font-size: 10px;text-align: left;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;} dentro de domA.css.
document.styleSheets[3].rule[5] hará referencia a
.inputActive {background: white;color:black;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;} dentro de domB.css.
Trabajar desde Javascript sobre propiedades de estilo de elementos de la página resulta entonces verdaderamente fácil usando esta característica, como veremos en alguno de los ejemplos de este capítulo.
En cierta operativa de aplicaciones puede ser interesante condicionar la activación de hiperenlaces a la realización de alguna acción por parte del usuariio.
Datos personales | Datos académicos | Datos profesionales
Desactivar enlaces Activar enlaces
|
Definimos la regla y pseudo-elementos para cuando los enlaces están activos: a.pageLink:link {color: #11118C;cursor: hand;font-size: 10px;text-align: left;text-decoration: none;font-weight:normal;font-family: verdana,arial,helvetica,sans-serif;} Y de forma análoga, los correspondientes para cuando los enlaces están inactivos: a.pageNoLink:link {color:#000000;cursor: text;text-decoration: none;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;} Definimos los botones que van a manejar los eventos de habilitar / deshabilitar los hiperenlaces: <a href="javascript:void(null)" class="buttonAction" onClick="FInactivateLink('link1');FInactivateLink('link2');FInactivateLink('link3')"> Desactivar enlaces</a> Y finalmente, escribimos las funciones Javascript que habilitan / deshabilitan los hiperenlaces: function FInactivateLink(id) |
En realidad hemos hecho una pequeña trampa, ya que en realidad los hiperenlaces como tal no se desactivan, sino que desaparece cualquier aspecto que pueda indicarle al usuario que esos textos son hipernlace, lo que nos hace suponer como bastante remoto que vaya a "clickar" sobre los mismos.
Pero por si la solución anterior no acaba de convencernos, vamos a llevarlo un poco más lejos: vamos a hacer que los enlaces sólo aparezcan cuando sean "clickables" (estén activos); en caso contrario desaparecerán, con lo que no habrá riesgo de que sean pichados por el usuario:
Datos personales Datos académicos Datos profesionales
Desactivar enlaces Activar enlaces
|
Lo que ahora hacemos es definir una regla y sus pseudo-elements para cuando los enlaces están inactivos que haga aparecer a estos como inexistentes: a.pageNoLink2:link {color:#FFFFFF;cursor: text;text-decoration: none;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;} Definimos los botones que van a manejar los eventos de habilitar / deshabilitar los hiperenlaces de manera similar al caso anterior: <a href="javascript:void(null)" class="buttonAction" onClick="FInactivateLink2('link21');FInactivateLink2('link22');FInactivateLink2('link23')"> Desactivar enlaces</a> Y, de forma similar al caso anterior, escribimos las funciones Javascript que habilitan / deshabilitan los hiperenlaces: function FInactivateLink2(id) |
 |
Modificaciones de Style | Modificaciones de Reglas |
| WebUsable.com | © Todos los derechos reservados. |
|
