Mensajes de ayuda en caja «pop-up»

By: |Published on: Ene 19, 2009|Categories: Apex|

Una de las cosas más importantes en toda aplicación, es proporcionar al usuario final, la mayor ayuda posible, de la manera más sencilla. Es por eso que en esta ocasión, les ofrezco una alternativa para mostrar al usuario mensajes de ayuda en una ventana que se levanta al pasar el puntero del mouse sobre un enlace, el cual puede ser del tipo texto, o bien, una imagen.

El presente «tip» está diseñado para utilizar en páginas que posean una forma de entrada de datos, más adelante en este artículo encontrará los enlaces a los archivos de código necesarios para realizar está tarea. Espero que les sea de utilidad. Como siempre, pueden ver esta funcionalidad en acción en mi espacio de trabajo en OTN.

He aquí el procedimiento:

    1. Descargue el archivo con el código javascript de aquí: cajatip.js
    2. Descargue la hoja de estilo en cascada para la caja: pista.css
    3. Cargue el archivo pista.css en la aplicación:
      • Ingrese a la aplicación.
      • Luego a Componentes Compartidos
      • Por último a Archivos estáticos y siga el asistente para cargar el archivo.
    4. Ahora cargue el archivo cajatip.js en la aplicación:
      • En Componentes Compartidos.
      • Haga clic en Hojas de Estilo en Cascada y siga el asistente para cargar el archivo.
    5. Si desea utilizar una imagen para levantar la caja de ayuda, utilice esta Imagen de ayuda
      • Nuevamente en Componentes Compartidos
      • Ingrese a Imágenes y complete el asistente para cargar la imagen anterior.
    6. Ahora, para cada página que contenga campos de ingreso de datos y que desee que contenga cajas de ayuda para sus campos:
      • En la definición de la página, en Encabezado HTML ingrese el siguiente código:
<script type="text/javascript" src="#WORKSPACE_IMAGES#cajatip.js">
</script>
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#pista.css">
      • En cada elemento al que desee agregarle una caja de ayuda, en el atributo «Texto posterior al Elemento» agregue el siguiente código:
<a href="#" class="enlace_pista" onMouseover="muestrapista(
'Texto de ayuda.', this, event, '150px')">[?]</a>

Si desea un enlace de texto, o bien:

<a href="#" class="enlace_pista" onMouseover="muestrapista(
'Texto de ayuda.', this, event, '150px')">
<img src="#WORKSPACE_IMAGES#help.png"></a>

Si desea utilizar la imagen para acceder a la caja de ayuda.

    • En el código anterior, en cualquiera de los dos casos, cambie el código «Texto de ayuda» por el mensaje que desea que sea mostrado para cada campo en particular.
    • También puede modificar el tamaño de la caja de ayuda, si cambia el cuarto parámetro de la función muestrapista

Y eso es todo, ahora tiene una manera bonita e interesante de presentar al usuario final ayuda de manera sencilla e interesante

Si lo desea, puede modificar el archivo pista.css para cambiar el color de fondo de la caja, el tipo y tamaño de letra o cualquier otra característica de la caja.

Solo me queda invitarlos a probar este procedimiento y a que me continúen acompañando. Los espero en la siguiente entrega, así como sus preguntas y comentarios.

Share This