Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Ejemplos y trucos útiles con CSS's

(Alguno de los ejemplos sólo funcionan en Internet Explorer)

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

Contenido:
  1. Botones
  2. Äreas de trabajo
  3. Variaciones en los textos
    1. 3.1 Simulación de sombras
    2. 3.2 Resaltados
    3. 3.3 Cambios de enfoque
    4. 3.4 Enmarcados
  4. Menús de navegación
    1. 4.1 Barra de Opciones con Rollover
    2. 4.2 Barra de Opciones con Rollover y Opción Seleccionada
    3. 4.3 Menú Dinámico Multinivel
  5. Barras de Herramientas
    1. 5.1 Barra de Iconos con Rollover
    2. 5.2 Barra de Iconos con Opciones Subordinadas
    3. 5.3 Barra de Iconos con Rollover y Opción Seleccionada
  6. Posicionamiento de objetos
    1. 6.1 Posicionamiento flotante
    2. 6.2 Contenedor contenido
    3. 6.3 Superposición de capas
  7. Ocultar objetos
    1. 7.1 Ayuda de contexto
    2. 7.2 Simulación de ventanas Pop-up

  1. Botones
  2. Äreas de trabajo
  3. Variaciones en los textos
  4. Menús de navegación
  5. Barras de Herramientas
  6. Posicionamiento de objetos

  7. Ocultar objetos

    1. 7.1 Ayudas de contexto:

      Manejando las propiedades de CSS's visibility y display pueden obetenerse funcionalidades muy interesantes con poco esfuerzo.

      En el siguiente ejemplo hemos implementado un útil sistema de ayudas de contexto para dar información al usuario de que son exactamente los campos a cumplimentar y el tipo de datos que contienen.

        Alta de usuario:
      Código:
      Nombre y apellidos:
      Alias (Nick name):
      Fecha nacimiento:      
      Fecha alta:      
      Tipo de usuario:
      Tipo de perfil:
      Tipo de preferencias:
      Otros datos:
      Tipo de plataforma: Windows Macintosh Linux
      Rango de edad: Menos de 13 Entre 14 y 24
      Entre 25 y 45 Más de 46
      Descripción del campo CÓDIGO
      Descripción del campo NOMBRE Y APELLIDOS
      Descripción del campo ALIAS / NICK NAME
      Descripción de la FECHA DE NACIMIENTO
      Descripción de la FECHA DE ALTA en el sistema
      Descripción del campo TIPO DE USUARIO
      Descripción del campo TIPO DE PERFIL
      Descripción del campo TIPO DE PREFERENCIAS
      Descripción del campo OTROS DATOS
      Descripción del campo TIPO DE PLATAFORMA
      Descripción del campo RANGO DE EDAD



      Una vez definida la tabla del formulario mediante las clases:

      .ejTable8 {background: #F8DF90;border: 1px solid #000000;}

      .ejHeaderTable8 {background: #000000;color: #F8DF90;font-weight:bold;font-size: 11px;letter-spacing: 0.4em;font-family: verdana,arial,helvetica,sans-serif;}

      .ejLabelTable8 {background: #C6B685;color: #000000;text-align: right;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}

      .ejFieldTable8 {background: #F1BB10;color: #000000;font-weight:normal;font-size: 10px;border: 2px inset #F0E3B8;font-family: verdana,arial,helvetica,sans-serif;}

      .ejValueTable8 {color: #000000;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}

      Como vamos a utilizar posicionamiento relativo necesitamos poner la tabla del formulario dentro de una capa cuya clase es:

      .helpContextTable8 {position: relative; left: 10px;top: -5px;z-index:1;}

      Y definimos las clases de las capas que van a alojar los mensajes de ayuda contextual:

      .helpContext1a11 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a12 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a13 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a14 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a15 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a16 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a17 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a18 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a19 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a20 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      .helpContext1a21 {position: relative; left: 480px;top: -345px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}

      La activación de las ayudas de contexto la realizamos mediante una sencilla función Javascript que cambie la propiedad visibility de las mismas:

      function DisplayLayer(Div)
      {
      Div.style.display="block";
      }
      function HideLayer(Div)
      {
      Div.style.display="none";
      }

      Y el rollover sobre los campos del formulario lo codificamos en HTML:

      <td> <input type="text" class="ejFieldTable8" name="Nombreyapellidos" size="30" maxlength="50" value="" onMouseOver="DisplayLayer(helpField1a12)" onMouseOut="HideLayer(helpField1a12)"> </td>

      Finalmente definimos cada clase de las cajas de mensaje para posicionarlas correctamente:

      ...
      .helpContext1a13 {position: relative; left: 480px;top: -290px;background: #FFFFE0;border: 1px solid #F1BB10;font-size: 12px;font-weight: normal;display:none;width:135;padding: 5px;font-family: verdana,arial,helvetica,sans-serif;z-index:2;}
      ...

      Y escribimos dichas cajas en HTML a continuación del formulario:

      ...
      <div id="helpField1a13" class="helpContext1a13"> Descripción del campo ALIAS / NICK NAME</div>
      ...


      2. Inicio de página


    2. 7.2 Simulación de ventanas Pop-up::

      De forma similar al caso anterior, 7.1. Ayudas de contexto, y usando las mismas propiedades visibility, display y float y un poquito de codificación Javascript, montamos este ejemplo en el que simulamos ventanas Pop-up mediante layers.

      El "Date Picker" utilizado es cortesía de http://www.gemstad.com, donde se ofrecen algunos interesantes scripts.

      Pulsando en el icono del calendario se muestra una capa con una utilidad que permite capturar la fecha deseada, la cual es situada en el correspondiente campo "Fecha actualización".

      De otra parte, pulsando en el botón "?" se muestra una capa que simula un Pop-up, por ejemplo de Ayuda o "Detalles Adicionales", para completar el campo correspondiente. Podríamos lanzar tantos pseudo-Pop-ups como desearamos.

        Alta de usuario:
      Código:
      Fecha de alta:
      Fecha actualización: Seleccionar fecha
      Ayuda - FECHA DE ALTA EN EL SISTEMA

      Länsstyrelserna har ansvaret för fördelning och uppföljning av regionala mål och delmål. Flera av länsstyrelserna har redan beslutat om sina regionala mål - du når dem via sidan Regionala miljömål.

      Länsstyrelserna samarbetar i RUS-projektet för att ta fram ett uppföljningssystem med gemensamma indikatorer. Regionala presentationer av indikatorer finns under respektive nationell presentation.

      Cerrar ventana
      Descripción del campo CÓDIGO
      Descripción del campo NOMBRE Y APELLIDOS

      Las clases para formatear el formulario son las mismas que en el caso anterior, 7.1. Ayudas de contexto. El código HTML puede verse mediante la correspondiente opción del browser.

      En algunos de los campos del formulario se ha mantenido la Ayuda de Contexto activada "OnMouseOver" / "OnMouseOut", que veíamos en el ejemplo anterior y que no repetiremos ahora.

      Posicionamos la tabla-formulario mediante un contenedor con la clase:

      .helpContextTable8 {position: relative; left: 10px;top: 20px;z-index:1;}

      El pseudo-Pop-up lo lanzamos mediante el código HTML:

      <input type="text" class="ejFieldTable8" name="newDate" size="12" maxlength="12" value="" onMouseOver="visualizeLayer('helpField1b12',1)" onMouseOut="visualizeLayer('helpField1b12',0)"> <input type=button class="ejButtonTable8" value="?" onClick="layerHelp('popup1b15',1)" onBlur="layerHelp('popup1b15',0)">

      Donde la función Javascript utilizada es:

      var ck=0;
      function layerHelp(id,ck)
      {
      if (click==0)
      {
      document.getElementById(id).style.display='none';
      }
      if (ck==1)
      {
      document.getElementById(id).style.display='block';
      }
      }

      El Calendario es un script tipo "date-picker" de uso libre de Tigra que permite seleccionar una fecha de una ventana auxiliar y capturarla para volcarla en un <INPUT type="text">. Tiene las siguientes peculiaridades:

      • Permite formatos de fecha europeos (dd/mm/yyyy)
      • Abre la ventana "date-picker" en modo pop-up con lo que se evitan los problemas de prioridad de visualización de las "layers" cuando se solapan con campos de formulario, en especial con los <SELECT>.

      El Calendario lo lanzamos mediante el siguiente código HTML:

      <input type="Text" class="ejFieldTable8" name="input1" size="12" maxlength="12" value="">
      <a href="javascript:cal1.popup();"><img src="images/iconPicDate.gif" border="0" width="16" height="15" alt="Seleccionar fecha" /></a>

      Dónde el <input type="Text"> será el campo del formulario receptor de la fecha capturada en el pop-up Calendario.

      A continuación se creará el objeto Calendario:

      <script language="JavaScript">
      var cal1 = new calendar1(document.forms['tstest'].elements['input1']);
      cal1.year_scroll = true;
      cal1.time_comp = false;
      </script>

      Y en el área <head> </head> se habrá hecho una llamada a un fichero externo javascript que contiene el código que implementa el "date-picker":

      <script language="JavaScript" src="js/calendar.js"></script>

      Los formatos de diseño del pop-up "date-picker" van codificados directamente en HTML en el fichero del pop-up y no merecen especial comentario. (Puede verse mediante el visualizador de código del browser).


Inicio de página


Capítulos:
Capítulo anterior Botones Äreas de trabajo Textos Menús Barras de Herramientas Posicionamiento de objetos Ocultar objetos

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

  
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable