Hace rato que estoy usando Windows 7 como sistema operativo principal, y debo decir que APESTA tanto o más que Windows Vista, pero dejando de lado eso, en esta oportunidad les traigo un efecto bastante atractivo inspirándome en la nueva “super barra de tareas” de Windows 7.

El efecto consiste en “una luz que sigue al mouse” mientras lo movemos sobre el botón, algo que no se puede apreciar en la siguiente imagen, pero que si lo podemos hacer con la demo.

6, 7, 8

3.0, 3.5

3

4

Creando la maqueta

La idea es la siguiente:

<span class="win7">
  <div></div>
  <a href="#">Button</a>
</span>

Pero para no ensuciar tanto el código HTML que tenemos que crear cada vez que queremos un botón, vamos a crear ese div por medio del javascript, de manera que nuestro código html real será el siguiente:

<span class="win7"><a href="#">Button</a></span>

CSS Code

.win7
{
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:12px;

  position:relative;
  float:left;
  height:29px;
  width:100%;
  background:url('../images/nav-bg.png') repeat-x top left;
}

.win7 div
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:29px;
  background:url('../images/active1.png') no-repeat center;
  z-index:0;
}

.win7 a
{
  line-height:29px;
  text-align:center;
  display:block;
  position:relative;
  padding:0 25px;
  z-index:2;
}

Ahora vamos a darle bordes redondeados:

span.win7
{
  width:auto;
  overflow:hidden;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  border:2px solid #deded2;
}

MooTools code

Iniciamos siempre despues de cargar el dom:

window.addEvent('domready', function() {

    if (Browser.Engine.trident4) {
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
    }

Ahora vamos a recorrer el DOM en busca de todos los enlaces con la clase “win7″, y a cada enlace le agregamos el “div” y le asignamos el evento “mousemove” ajustando la posición del background relativo al mouse:

    $$('.win7 a').each(function(el) {

      el.win7BG = new Element('div', {'styles':{'opacity':0}}).injectBefore(el);
      el.win7BG.set('morph', {'duration':300});

      el.addEvent('mousemove', function (ev) {
        el.win7BG.setStyle('background-position', - ((600/2) - (ev.event.layerX||ev.event.offsetX||0))+'px top');
      });

Lo siguiente es para agregarle el efecto “fade”, aunque no es el objetivo principal de este artículo, queda muy bonito:

      el.addEvent('mouseenter', function (ev) {
        el.win7BG.morph({'opacity': 1});
      });

      el.addEvent('mouseout', function (ev) {
        el.win7BG.morph({'opacity': 0});
      });

    }); // end each

}); // end domready

Lo instalamos en nuestra página, agregando el siguiente código en el HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

jQuery code

Hacemos lo mismo que en mootools, sólo que con código de jQuery:

$(document).ready(function(){

  if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie ) {
    // stupid jquery ie6 detection
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
  }

  $('.win7 a').each(function() {
    var el = $(this);

    el.win7BG = $(document.createElement('div')).css({'opacity': 0});
    el.win7BG.insertBefore(el);

    el.mousemove(function(ev) {
      el.win7BG.css({'background-position' : -((600/2) - (ev.originalEvent.layerX||ev.originalEvent.offsetX||0))+'px top'});
    });

    el.hover(
      function() {
        el.win7BG.stop().animate({'opacity':1},300);
      },
      function() {
        el.win7BG.stop().animate({'opacity':0},300);
      }
    );

  });
});

Lo instalamos en el HEAD de nuestra página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

Creando los Botones y el Menu

Para crear un menu:

<ul class="win7">
  <li><a href="#">Home</a></li>
</ul>

Para crear un botón:

<span class="win7"><a href="#">Button</a></span>

He agregado más clases con diferentes colores que puedes ver en la demo, pero la técnica sigue siendo la misma.

Demo

Puedes ver la demo en mootools como la demo en jQuery.

Sexy Tooltips te permite crear tooltips realmente sexys. Reemplaza esos feos, aburridos y amarillos tooltips del navegador, por unos con toda la onda!

• Estilo: Puedes elegir entre varios estilos.
• Posición: Método de posicionamiento inteligente.
• Compatibilidad: Trabaja en todos los navegadores modernos.

6, 7, 8

3.0, 3.5

1.5, 2.0

3

9.64, 10

4

Demo

Puedes ver una demo de Sexy Tooltips clickeando en la siguiente imagen:

Instalación

En el caso de MooTools:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/sexy-tooltips.v1.1.mootools.js"></script>
<link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>

o en jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<script type="text/javascript" src="js/sexy-tooltips.v1.1.jquery.js"></script>
<link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>

Donde… :
coda.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:

• blue.css
• coda.css
• vista.css
• rosita.css
• hulk.css
• msn.css

Usando Sexy ToolTips

En MooTools:

<script type="text/javascript">
  document.addEvent('domready', function() {
    $('a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
      width: 200,
      style: 'alert',
      sticky: 1,
      hook: 1
    });
  });
</script>

En jQuery:

<script type="text/javascript">
  $(document).ready(function(){
    $('#a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
      width: 200,
      style: 'alert',
      sticky: 1,
      hook: 1
    });
  });
</script>

Donde… $(‘a1′) es un elemento de la página. Puedes poner tooltips a cualquier elemento del DOM.

Documentación

• tooltip()

  Element.tooltip(content, options)

  Crea el tooltip para ese elemento.

  @content (string) El mensaje a mostrar.

  @options (array) Opciones del estilo del tooltip.

  Ejemplo:

  $('example').tooltip('Hello world.', { mode: 'tl', width: 140, hook: 1 });
  

• tooltip_hide()

  Element.tooltip_hide()

  Oculta el tooltip.

• options
  • width – (number: default to 250) Ancho total del tooltip. Tener en cuenta que el contenedor tiene 15px menos de cada lado.
  • mode – (string: default to ‘auto’) Posición del puntero. Este parámetro acepta un string de 2 caracteres (obligatorio) donde la primer letra puede ser ‘t’ (Top) o ‘b’ (Bottom) y la segunda letra puede ser ‘l’ (Left) o ‘r’ (Right). Si se establece este parámetro a ‘auto’ el script calculará la mejor posición para mostrar el tooltip.
  • hook – (boolean: default to false) El tooltip se mueve a medida que movemos el puntero del mouse.
  • mouse – (boolean: default to true) El tooltip se muestra al pasar el mouse por arriba del elemento.
  • click – (boolean: default to false) El tooltip se muestra al clickear el elemento. Se desactiva el parámetro ‘mouse’ al establecer este parámetro a ‘true’.
  • sticky – (boolean: default to false) Establezca este parámetro a ‘true’ si desea que el tooltip muestre un botón para cerrarse.
  • style – (string: default to ‘default’) Corresponde a la clase para el contenedor del mensaje. Útil si deseas agregar estilos propios.

Eventos

• event tooltipshow()

  Evento lanzado cuando el tooltip termina de mostrarse.

  MooTools:

  $('element').addEvent('tooltipshow', function() {
      alert('tooltip event fired');
  });
  

  jQuery:

  $('element').bind('tooltipshow', function() {
      alert('tooltip event fired');
  });
  

• event tooltiphide()

  Evento lanzado cuando el tooltip termina de cerrarse.

  MooTools:

  $('element').addEvent('tooltiphide', function() {
      alert('tooltip event fired');
  });
  

  jQuery:

  $('element').bind('tooltiphide', function() {
      alert('tooltip event fired');
  });
  

Licencia

El script es publicado bajo la licencia MIT.

¿Cuanto cuesta?

Nada. Pero puedes colaborar comprándome un café

Download

ChangeLog

Sexy ToolTips 1.1 - Octubre 16, 2009
* BugFixed: Textarea scroll bug
* BugFixed: Window scroll bug
* Creada la versión para jQuery
* Agregada Compatibilidad con IE6

Sexy ToolTips 1.0.0 - Septiembre 01, 2009
* Versión Inicial.
* Mootools 1.2.3

Les dejo un pedazo de código para ‘forzar’ el estilo de un elemento. El problema con el que me topé al crear SexyForms fue forzar los estilos mios a un elemento que ya tenía estilos puestos por el autor.

El problema

Veamos un ejemplo:

<style>
.red{
  color: red;
}
</style>
<input type="text" id="nombre" class="red"/>

Desde un script externo yo podría hacer lo siguiente:

$('nombre').erase('class');
$('nombre').addClass('blue');

De esa manera, sobrescribimos el estilo por el nuestro, mostrando el color del texto en azul. Pero el script anterior no funcionará en el siguiente caso:

<style>
input#nombre{
  color: red;
}
</style>
<input type="text" id="nombre" />

Y esto es porque input#nombre tiene mucho más peso que nuestra clase ‘blue’.

La solución

Element.implement({
  ForceClass: function(param) {
    if (!$('mooForceClass')) {
      document.body.adopt(new Element("force", { 'id' : 'mooForceClass' }));
    }
    var mooForceClass = $('mooForceClass');
    mooForceClass.erase('class');
    mooForceClass.addClass(param);
    var Styles = mooForceClass.getStyles('left', 'top', 'bottom', 'right',
    'width', 'height', 'color', 'line-height', 'margin', 'padding',
    'text-indent', 'text-transform', 'z-index', 'text-decoration',
    'vertical-align', 'position', 'display', 'visibility', 'overflow',
    'float', 'clear', 'cursor', 'background', 'list-style',
    'border-style', 'border-weight', 'border-color', 'font-family',
    'font-size', 'font-weight', 'font-style', 'border-color',
    'border-weight', 'border-style');
    mooForceClass.erase('class');
    return this.setStyles(Styles);
  }
});

Lo que hace la función ForceClass es agregar como Style, los estilos de una clase. Como todo el mundo sabe, la propiedad Style tiene más peso que el class mas específico que pueda haber.

Ahora en el mismo ejemplo, podríamos hacer lo siguiente:

input#nombre{
  color: red;
}
<input type="text" id="nombre" />

$('nombre').ForceClass('blue');

Es tan sólo una idea, que quizás como todo remedio tiene ‘efectos secundarios’

¿Que les parece?

Actualizada la versión de SexyLightbox 2.

Bugs

Se han corregido varios bugs de la versión anterior entre ellos:

• Cuando clickeabas en una imagen, y luego en un link apuntando a contenido html, el contenido/iframe permanecían con el fondo de la imagen anterior.
• El loading mostraba un fondo negro luego de ver un video.
• Internet Explorer mostraba el overlay mas grande de lo que realmente debía ser.
• AJAX 404 error no mostraba notificación de error.

Mejoras

También se han agregado algunas mejoras:

• Bordes mas suaves y nítidos.
• Agregada la función refresh() para volver a escanear el documento en busca de enlaces con rel=”sexylightbox”. Muy útil luego de haber hecho cambios en el DOM.
• Agregada la función shake() que crea un pequeño efecto de sacudida en el lightbox.
• Agregado el estilo ‘modal’ que cancela el cierre del lightbox clickeando en el overlay.

Pero sin duda la actualización mas significativa es la de poder trabajar con las nuevas versiones de los frameworks mas populares:
MooTools 1.2.2
jQuery 1.3.2

Debido a la incapacidad de jQuery para trabajar con clases, no puede haber dos instancias de SexyLightbox trabajando en la misma página (como puedes hacerlo con MooTools). Además el efecto de movimiento en jQuery está tremendamente exagerado.

Por si alguien desea el PSD para crear nuevos skins, puede descargarlo desde la página de Google Code

SexyForms es una librería javascript que se encarga de mejorar increíblemente la apariencia de los formularios XHTML. Es compatible con todos los navegadores modernos, y con Internet Explorer también. Es completamente no-intrusivo y permite crear tus propios estilos!

6, 7, 8

3.0, 3.5

3

9.64, 10

4

Demostración

Form Elements – SelectBox con Ajax

Características

Instalación

Se instala como cualquier script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>

<link type="text/css" rel="stylesheet" href="sexyforms-vista.css" media="all"/>
<script type="text/javascript" src="sexyforms.v1.3.mootools.js"></script>

Donde… :
sexyforms-vista.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:

• sexyforms-blue.css
• sexyforms-red.css
• sexyforms-green.css
• sexyforms-dark.css
• sexyforms-clean.css
• sexyforms-vista.css
• sexyforms-orange.css
• sexyforms-simple.css
• sexyforms-gamma.css

sexyforms.v1.3.mootools.js es el nombre del script. Si quieres ganar velocidad, puedes probar usando la versión comprimida: sexyforms.v1.3.mootools.min.js

Usando SexyForms

En mootools:

  $$("input", "select", "textarea").each(function(el) {
    el.DoSexy();
  });

Ejemplo: Buscar el formulario con clase ‘sexyform’ y embellecer todos sus elementos:

<script type="text/javascript">
window.addEvent('domready', function() {
  $$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
    el.DoSexy();
  });
});
</script>

Ejemplo: Embellecer un elemento individual:

<input type="text" id="name" value="" />
<script type="text/javascript">
  $('name').DoSexy();
</script>

Documentación

Funciones públicas:

• element.DoSexy()

  Convierte un elemento triste y aburrido, en uno sexy!

• element.reset()

  Convierte un elemento sexy, en uno aburrido y triste.

Licencia

El script es publicado bajo la licencia MIT.

Download

Changelog

SexyForms 1.3.1 - Octubre 30, 2009
* BugFixed: La lista del elemento Select no aparecia en el top correcto.

SexyForms 1.3.0 - Octubre 03, 2009
* Mas compatibilidad con IE6
* Nuevo SelectBox con manejo de eventos
* Bugs de posición en selectbox arreglados
* SelectBox ahora recibe el foco
* SelectBox ahora muestra iconos en IE6 & IE7
* Bug de Textarea en Opera arreglado

SexyForms 1.2.0 - Septiembre 29, 2009
* Elemento Select eliminado. Ahora se usa el nativo para evitar errores.
* Agregado InputFile
* BugFixed: Se hace mejor uso de la herencia.
* BugFixed: El textarea es del mismo tamaño en todos los navegadores.

SexyForms 1.1.0 - Junio 20, 2009
* BugFixed: Float elements compatible
* Decenas de cambios menores.

SexyForms 1.0.0 - Abril 04, 2009
* Versión Inicial.
* Mootools 1.2.2

Los que me conocen, saben que soy mootoolero. Pero no por ser fanboy de MooTools sin razón, sino porque es el framework que elegí cuando comencé con javascript y es a lo que me acostumbré.

El domingo anterior (08/feb/09), me embarqué en la travesía de convertir todo el código MooTools de SexyAlertBox a jQuery. Esta es mi breve experiencia con el framework del que todo el mundo habla maravillas.

Primeras impresiones

Tengo todo listo: notepad2 abierto, la ayuda de jQuery abierta, y Google preparado para despachar dudas.

Al comenzar a leer los ejemplos, me sentí a gusto con la sintaxis.

La función .css() reemplaza al .setStyle() de MooTools. El código se ve mas bonito con el encadenamiento de funciones. La ayuda es bastante completa, trae ejemplos funcionando y todo.

Luego de una horita de lectura, manos a la obra!

Al comenzar a codear, me dí cuenta de que faltaba algo: Las clases.
MooTools te permite crear clases, implementar métodos, y heredar ‘a la fuerza’ funciones/eventos propios.
jQuery carece totalmente de todo esto, y lo deja como algo “secundario” (el creador de jQuery John Resig publica un código ‘extra’ para crear clases que no se incluye en el framework).

Me dije a mi mismo: No importa, hay miles de plugins dando vueltas por ahí seguramente esos plugins de alguna forma lo hacen.

Esa nube obscura llamada jQuery

Crear elementos en jQuery es tan fácil como arcaico. En MooTools para crear un elemento debemos usar la función/clase new Element que nos devuelve el objeto creado. Para los que no estén acostumbrados a la POO esto puede resultar algo horrible. Para los que estamos acostumbrados, nos resulta algo común.

En jQuery usamos append para agregar html y crear el elemento. Obviamente no nos devuelve el objeto creado ni nada parecido pero nos ahorra escribir mucho código (10 lineas MooTools vs 2 jQuery).

Programo feliz en jQuery hasta completar el 90% del script… ahora viene lo difícil: los eventos.

Nadando contra la corriente

La potencia de jQuery es lamentable.

jQuery es el “Visual Basic” de los frameworks en javascript.

Como jQuery no posee la función ‘bind‘ de MooTools, que sirve para setear el contexto de la ejecución de una función, tuve que agregarla como plugin.

jQuery tampoco posee la función ‘delay‘ que sirve para retrasar la ejecución de una función. Es el setTimeout de las funciones, sólo que a diferencia de la nativa, la de MooTools hereda el contexto desde donde se está ejecutando. También tuve que agregarla como plugin.

El crimen mas grande de jQuery es la inexistencia de la clase Chain. Los jCuleros le llaman “encadenado” a esto:

$('#id').nacer().crecer().comer().reproducirse().morir();

(adoro el encadenado de jQuery)

Los MooTooleros le llaman “encadenado” a esto:

this.chain(function () { alert('cola de mensajes') });
this.callChain();

La inexistencia de esto último en jQuery fue una traba enorme para SexyAlertBox.
¿La solución? Abrir el código fuente de MooTools, buscar la clase Chain y pegarla en el código fuente de SexyAlertBox .

Mootools trae los ‘easeEffects’ (el efecto del tipo rebote). jQuery no los trae, hay que agregarlos como plugin.

Conclusión

En fin, lo que tenia que resultar algo agradable resulto ser muy molesto y tedioso, muchas trabas para funciones tan estúpidas.
Lo bueno: Me gustó como quedó el código fuente en jQuery. Se ve bonito, fácil de entender, fácil de escribir, es muy intuitivo, sin dudas el mejor framework para gente que se inicia en la programación en javascript.
Lo malo: La falta de funciones, la poca importancia que se les dio a las ‘clases’. Para los que necesitamos potencia, usar clases, herencia y tener a mano un puñado de funciones útiles, existe MooTools.

Voy a seguir programando en jQuery ahora que lo aprendí a usar, mi meta es migrar SexyLightbox 3 a jQuery asi que muy pronto tendrán noticias.

Deseenme suerte!