29
Jun 08

Tooltips con Mootools

Guardado bajo la categoría: JavaScript, Mootools

Más de un visitante de este weblog me pregunto como fue que hice para modificar los clásicos tooltips que se muestran al situarnos sobre alguno de los enlaces, y como no tengo ningún secreto voy a develar el misterio. A decir verdad no es nada del otro mundo, existe decenas de scripts realizados con JavaScript que proporcionan este efecto, entre ellos esta: Prototip 2, jTip o QTip. Aunque lo que hice yo fue utilizar la librería Mootools y usar la función toolTip que trae por defecto.

Lo primero es incluir la librería mootools a nuestro sitio como de la siguiente manera, agregando dentro de la etiqueta <head> el código que les voy a mostrar a continuación:

  1. <script type="text/javascript" src="mootools.js"></script>

Luego el siguiente código va a reemplazar los tooltips comunes por nuestros propios tooltips:

  1. window.addEvent('domready', function(){
  2.   var tips = new Tips($$('a'), {
  3.    initialize:function(){
  4.    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  5.   },
  6.   onShow: function(toolTip) {
  7.    this.fx.start(1);
  8.    },
  9.    onHide: function(toolTip) {
  10.     this.fx.start(0);
  11.    }
  12.   });
  13.  });

El lector que se anime, puede jugar con esta línea,

  1. this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);

y modificar la duración y el efecto con el que nuestro globo de ayuda entre en acción.

Y luego agregamos los siguientes estilos a nuestra hoja de estilo:

  1. .tool-tip {
  2.  color: #fff;
  3.  width: 139px;
  4.  z-index: 13000;
  5. }
  6.  
  7. .tool-title {
  8.  font-weight: bold;
  9.  font-size: 11px;
  10.  margin: 0;
  11.  color: #9FD4FF;
  12.  padding: 8px 8px 4px;
  13.  background: url('img/bubble.png') top left;
  14. }
  15.  
  16. .tool-text {
  17.  font-size: 11px;
  18.  padding: 4px 8px 8px;
  19.  background: url('img/bubble.png') bottom right;
  20. }
  21.  
  22. .custom-tip {
  23.  color: #000;
  24.  width: 130px;
  25.  z-index: 13000;
  26. }
  27.  
  28. .custom-title {
  29.  font-weight: bold;
  30.  font-size: 11px;
  31.  margin: 0;
  32.  color: #3E4F14;
  33.  padding: 8px 8px 4px;
  34.  background: #C3DF7D;
  35.  border-bottom: 1px solid #B5CF74;
  36. }
  37.  
  38. .custom-text {
  39.  font-size: 11px;
  40.  padding: 4px 8px 8px;
  41.  background: #CFDFA7;
  42. }

Jugando con el código CSS podremos darle es aspecto que nosotros queramos, esto queda a gusto y placer de cáda uno, la única condición es respetar los nombres de las clases.

Pueden ver el efecto en funcionamiento en este mismo blog, haciendo situándose en cualquiera de los enlaces. También dejo un archivo .ZIP que incluye un ejemplo: tooltips-con-mootools.zip.

Tags: , , , , 1

25
Jun 08

Formularios con CSS

Guardado bajo la categoría: CSS

En más de una oportunidad me toco ver formularios armados con HTML usando tablas, seguramente porque su autor no tenia conocimientos sobre CSS y le resultaba difícil que todos los elementos del mismo permanezcan en su lugar.

Para todos aquellos que se sienten identificados con la descripción anterior esta pequeña guía de como armar formularios con HTML y CSS les puede ser útil.

Para ello vamos a utilizar las etiquetas <form>, <fieldset>, <legend> e <input>; aplicadas de la siguiente forma:

  1. <form name="formulario_de_ejemplo">
  2.  <fieldset>
  3.   <legend>Datos Personales</legend>
  4.   <div>
  5.    <label for="nombre">Nombre:</label>
  6.    <input type="text" name="nombre" id="nombre" />
  7.   </div>
  8.   <div>
  9.    <label for="apellido">Apellido:</label>
  10.    <input type="text" name="apellido" id="apellido" />
  11.   </div>
  12.   <div>
  13.    <label for="email">E-mail:</label>
  14.    <input type="text" name="email" id="email" />
  15.   </div>
  16.   <div>
  17.    <label for="ciudad">Ciuidad:</label>
  18.    <select name="ciudad">
  19.     <option value="Bahia Blanca">Bahia Blanca</option>
  20.     <option value="Punta Alta">Punta Alta</option>
  21.     <option value="Tres Arroyos">Tres Arroyos</option>
  22.    </select>
  23.   </div>
  24.  </fieldset>
  25.  <fieldset>
  26.   <legend>Mensaje</legend>
  27.   <div>
  28.    <label name="asunto">Asunto:</label>
  29.    <input type="text" name="asunto" id="asunto" />
  30.   </div>
  31.   <div>
  32.    <label for="comentario">Comentario:</label>
  33.    <input type="text" name="comentario" id="comentario" />
  34.   </div>
  35.  </fieldset>
  36. </form>

Luego agregamos el siguiente código CSS:

  1. form {
  2.  font-family: "Arial", sans-serif;
  3.  font-size: 12px;
  4.  color: #5c5c5c;
  5.  width: 500px;
  6.  margin: 30px auto;
  7. }
  8.  
  9. form div {
  10.  display: block;
  11.  margin: 4px 0px;
  12. }
  13.  
  14. label {
  15.  float: left;
  16.  text-align: right;
  17.  width: 100px;
  18.  padding: 0px 10px 0px 0px;
  19. }
  20.  
  21. input, select, textarea {
  22.  width: 300px;
  23. }
  24.  
  25. input#submit {
  26.  padding: 2px 0px;
  27. }

Y obtendremos un formulario igual a este:

No fué muy difícil ¿no?. Luego podemos darle un poco más de estilo y modificar el color del borde, la tipografía, agregarle una imágen de fondo al formulario o a los inputs, etc. queda a criterio e imaginación de cada uno.

Dejo el ejemplo para descargar: formularios-con-css.zip.

Tags: , , 6