Tool Tips con Mootools 1.2

agosto 25, 2008

Actualizado… ahora con ejemplos aqui.

Hola a todos hoy vamos a tratar el tema de los ToolTips que han tenido algunos cambios en mootools 1.2

Básicamente un tooltip es una pequeña ayuda que le presentamos al usuario en la que le informamos de alguna acción o información adicional en un objeto.

Para usar ToolTips necesitamos la librería Core de mootools 1.2 y la librería more con el plugin TIPS. que podemos descargar aqui.

image

Ahora incluiremos estas librerías en nuestra página dentro de la etiqueta <HEAD>. Recuerde que el orden es importante ya more depende de core.

<!– mootools 1.2 –>
<script type=”text/javascript” src=”js/mootools12core.js”></script>

<script type=”text/javascript” src=”js/mootools12more.js”></script>
<!– Fin mootools 1.2 –>

Ahora dentro del evento domready debemos inicializar el objeto Tips de mootools.

window.addEvent(‘domready’,function()
{
var Tips1 = new Tips(‘.Tips1’,{
showDelay: 400,
hideDelay: 400,
fixed:true
});
Tips1.addEvent(‘onShow’, function(tip){
tip.fade(‘in’);
});
Tips1.addEvent(‘onHide’, function(tip){
tip.fade(‘out’);
});

$(‘lnk’).store(‘tip:title’, ‘Titulo del ToolTip’);
$(‘lnk’).store(‘tip:text’, ‘Texto del ToolTip’);

});

La definición se compone básicamente en:

var Tips1 = new Tips(‘<nombre de la clase css>’,{<opciones separadas por comas>});

En el caso del ejemplo he puesto como clase css ‘.Tips1’ y como opciones:

showDelay:400 <- muestra el tooltip despues de 400ms de que el mouse este sobre el.

hideDelay:400 <- oculta el tooltipo 400ms despues de que el mouse no este sobte el.

fixed:true <- indica si el tooltip se mueve con el puntero del mouse o es estatico en donde aparece. Por defecto el valor es False.

Los dos metodos siguentes adicionan eventos al objeto ToolTip. estos eventos son:

onShow : Hace un fade in cuando se inicia el tooltip.

onHide : hace un fade out cuando se cierra el tooltip

.Luego las lineas

$(‘lnk’).store(‘tip:title’, ‘Titulo del ToolTip’);
$(‘lnk’).store(‘tip:text’, ‘Texto del ToolTip’);

definen lo que debe mostrarse en el tooltip, es decir el Titulo y el Texto. el Objeto al que le asignamos la propiedad es el objeto en el que debe aparecer el tooltip. En este caso he creado un link

<a href=”#” id=”lnk” class=”Tips1″>mostrar</a>

El link debe tener como clase css la que definimos al momento de crear el objeto Tips de mootools.

Otra forma de mostrar contenido en el tooltipo es usando el atributo title del link. en este caso sobraría la definición que hacemos arriba con el metodo store(). y quedaria algo asi:

<a href=”#” id=”lnk” title=”link de prueba” class=”Tips1″>mostrar</a>

Definición de Estilos para el ToolTip

La estructura que crea mootools para pintar el tooltip es la siguente:

<div class=”options.className”> //the className you pass in options will be assigned here.
<div class=”tip-top”></div> //useful for styling
<div class=”tip”>
<div class=”tip-title”></div>
<div class=”tip-text”></div>
</div>
<div class=”tip-bottom”></div> //useful for styling
</div>

Entonces de aqui nos basamos para crear la hoja de estilos que definirá el estilo del tooltip.

en definitiva las clases css importantes son:

  • tip-top
  • tip
  • tip-title
  • tip-text
  • tip-bottom

Aqui un ejemplo usando unicamente tip, tip-title y tip-text

.tip {
Z-INDEX: 13000; WIDTH: 130px; COLOR: #000
}
.tip-title {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #c3df7d; PADDING-BOTTOM: 4px; MARGIN: 0px; COLOR: #3e4f14; PADDING-TOP: 8px; BORDER-BOTTOM: #b5cf74 1px solid
}
.tip-text {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 11px; BACKGROUND: #cfdfa7; PADDING-BOTTOM: 8px; PADDING-TOP: 4px
}

Listo, ahora nuestro tooltip funciona. puedes ensayar con nuevos efectos de transición y con hojas de estilo mas elaboradas y obtendrás excelentes resultados.

Actualizado… ahora con ejemplos aqui.

Anuncios

Para seguir con el cuento de Mootools, buscando en la red encontré este plugin excelente para mostrar notificaciones y que usa la última versión de Mootools. Es desarrollado por uno de los programadores de Mootools 1.2 Harald Kirschner.

Les recomiendo le den una mirada, está muy bueno.

 





Continuamos con la serie de informes sobre Mootools, vale la pena aclarar que para los ejemplos y las explicaciones, usamos la versión 1.11 de Mootools, ya ha sido liberada la versión 1.2 y trae consigo muchos cambios y nuevas formas de hacer las cosas. Probablemente vamos a tener que reescribir algo del código que hagamos con la versión 1.11. Pero por lo menos vamos a poder tener una introducción al tema con este mini manual.

Sabemos que una página al ser invocada por el navegador va solicitando los objetos a medida que se van necesitando, o van siendo leídos. Es decir que el servidor envía la página y el navegador lo primero que ve es la etiqueta <HTML> luego la etiqueta <HEAD> y carga cada una de las etiquetas que están dentro del HEAD de forma secuencial, y así sucesivamente con cada línea de nuestra página.

El problema se presenta cuando intentamos ejecutar un método Mootools y la librería aun no se ha cargado, o cuando necesitamos asignar un evento a un objeto y el objeto aun no ha sido cargado. En estos casos vamos a tener una Excepción de javascript.

Para evitar esto, debemos asegurarnos ejecutar los métodos y funciones cuando ya estemos seguros que no van a fallar por que el objeto aun no existe. Mootools nos facilita esta tarea, al ayudarnos a detectar la carga de la página. Estos eventos son:

Doomready: Ocurre cuando se ha cargado todo el contenido de la página excepto imágenes.

Load: Ocurre cuando todos los objetos de la página han sido cargados.

Estos eventos son los que nos permiten informar al usuario de que la carga de la página está en proceso o ya finalizó al estilo de aplicaciones como GMAIL.

Para utilizar estos eventos vamos a usar el método AddEvent de Mootools, y lo vamos a asignar al objeto Window.

Ejemplo:

window.addEvent(‘domready’,function(){

// CODIGO …

});

El método addEvent permite asignar a cualquier objeto un evento, y ejecutar una función específica al momento de disparar el evento.

La sintaxis es:

miObjeto.addEvent( ‘click’ , mifuncion )

Un ejemplo para adicionar un evento click a un link podría ser así:

window.addEvent(‘domready’,function(){

$(‘elLinkID’). addEvent(‘click’,function(){

Alert(“Esta es una prueba…”);

});

});

En donde la definición del link dentro del HTML sería:

<a href=”#” id=”elLinkID”>click aquí</a>

Listo, ahora ya tenemos un evento capturado con Mootools. Básicamente los eventos se llaman igual que en HTML pero sin el prefijo “on” es decir el “onClick” ahora es “click”.

Y así con los demás eventos como blur, mouseover, etc.

Esto funciona igual con la versión 1.2 ya que es algo estándar y básico del framework.

otra vez publicando de afan, espero que pueda hacer cada vez mejores mis publicaciones…




La página oficial de Mootools informa ahora que se ha liberado la versión 1.2 de la librería Mootools, han cambiado el diseño de la página y por ahora solo está disponible la descarga y la documentación, aun faltan cosas como los demos.

Bueno entraremos a analizar esta nueva versión para ver que cosas nuevas trae y como va a estar la compatibilidad con  plugins de la versión 1.1.

Ahora me tocó modificar la entrega 2 de los post sobre mootools que estaba haciendo, aun no se que va a pasar con la versión 1.1 y si va a tener mas soporte, yo creería que no pero vamos a ver que pasa y como se porta esta nueva versión.

Por ahora resta esperar que la página esté completamente lista y que más información van a plublicar… ya me descargue la version 1.1 que pesa apx 60k. empesaré a usarla…

link

Actualmente contamos con muchas opciones al momento de elegir una librería o framework Javascript que nos ayude y facilite la creación de aplicaciones Web 2.0. Estos frameworks  nos ayudan a crear animaciones e interactividad con el usuario la cual ofrece una mejor experiencia y facilidad de uso de nuestras aplicaciones así como también las hace más atractivas y vistosas.

En este post hablaré sobre uno de los frameworks que más me ha gustado y que actualmente uso en todos mis nuevos desarrollos, estoy hablando de Mootools.

Mootools es un muy potente framework de trabajo orientado a objeto, desarrollado en Javascript, el cual nos permite crear aplicaciones Web muy dinámicas y con un diseño único, atractivo, interactivo y muy web 2.0.

Al ser una librería escrita en Javascript, es muy sencilla de utilizar y no requiere ningún componente extraño adicional para funcionar, simplemente la incluimos en la página en la que vamos a usarla y la usamos. Eso es todo. Además es compatible con todos los más importantes navegadores actuales permitiendo así olvidarnos un poco del problema de siempre… ver como funciona en un IE6… además ya existen muchísimos plugins como los que hemos tratado en otros artículos por ejemplo MoodalBox, entre otros…

Usando MooTools – Primer acercamiento.

Primero debemos descargar la librería de http://mootools.net/download, en esta página nos ofrece descargar la librería con solo los componentes que requerimos en nuestro desarrollo, esto lo hace con el fin de quitar los componentes que no usaremos y así hacerla aun más liviana de lo que ya es. En nuestro caso seleccionaremos todos los módulos y así poder probar todo lo que necesitamos utilizar.

NOTA: Para efectos de desarrollo es bueno usar la librería completa y luego cuando pasemos a producción podemos usar una versión reducida con solo lo que se necesita.

Ahora solo debemos incluirla en la ruta de nuestro proyecto, y luego en la página o páginas que necesitamos.

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

Recomendación: Al descargar el archivo de la librería queda con un nombre largo tipo mootools-release-x.xx.js.txt, recomiendo que lo renombremos con un nombre más corto como por ejemplo mootools.js.

Cuando la página carga todo su contenido, excepto imágenes esta en un estado llamado domready, y cuando ya ha cargado las imágenes se llama load.

En este caso usaremos el domready para poder ejecutar nuestros ejemplos.

Recodemos que para probar los ejemplos el código JavaScript hay que ponerlo en el head dentro de una función que se ejecute en el momento que la página cargue. Es decir en domready

Ejemplo:

window.addEvent(‘domready’,function(){ // mootools ejecuta cuando pagina esta en estado ready

// CODIGO JS MOOTOOLS

});

Bueno, esto es todo en esta primera parte, pronto publicare una segunda parte con mas detalles y explicando la estructura a usar en un desarrollo usando mootools, por ahora les dejo algunos links con ejemplos de cosas hechas con mootools que igual pueden servirnos para hacer nuestros sitios mas atractivos y funcionales y de paso ir aprendiendo lo básico para usar mootools.

links Ejemplos:

http://demos.mootools.net/

http://ceslava.com/blog/los-mejores-41-ejemplos-del-uso-de-la-libreria-mootools-ajax/

http://www.ajaxman.net/476/video-usando-ajax-y-aspnet/

pd. Pido escusas por la demora en publicar ya que he tenido problemas de conexión a internet entonces no he tenido mucho tiempo para reportar en ninguno de los blogs. espero pronto publicar la segunda parte y dejarla mas completa. gracias por el apoyo.

DG.

PARTE II – addEvent

Para los que no conocen esta librería, Videobox permite ver videos en nuestro sitio con el efecto lightbox. Soporta varios tipos como por ejemplo video desde youtube y es tan fácil de usar como solo poner un link hacia el video que se quiere mostrar, la librería hace el resto por nosotros.

En este artículo voy a mostrar la forma como debemos usar esta librería en nuestro sitio, y como poder saltar el problema que presenta algunas veces el internet explorer cuando intenta mostrar una página con esta librería.

Lo primero que debemos hacer es descargar la librería de videobox y todos sus componentes necesarios de aquí, en donde nos descargamos los archivos:

  • videobox.js: Librería Javascript de videobox.
  • videobox.css: hoja de estilos
  • closelabel.gif, loading.gif, nextlabel.gif prevlabel.gif: Imágenes usadas para los nombres de las acciones. Recomiendo que las modifiques a tu lenguaje ya que están en ingles.
  • Swfobjects.js: es necesario para mostrar los archivos swf y es excelente.(luego hablaremos más de este control.)
  • Mootools.js: Esta es la librería base, o más bien framework para que funcione nuestro Videobox. Es un framework muy completo y base de muchas otras librerías como ya hemos visto en otros post. (también trataré de ir con más detalle sobre esta librería en otro post).

Ahora el primer paso es dentro de la etiqueta <head> incluir los scripts y la hoja de estilos.

<script type=”text/javascript” src=”URL_mootools.js”></script>

<script type=”text/javascript” src=”URL_swfobject.js”></script>

<script type=”text/javascript” src=”URL_videobox.js”></script>

<link rel=”stylesheet” href=”URL_videobox.css” type=”text/css” media=”screen” />

Corrección para Internet Explorer

Algunas veces cuando llamamos una página con videobox desde Internet Explorer este genera un aviso que dice “Operación Abortada” y no carga la página. Al parecer esto se debe a un error en el propio Internet Explorer y quizás sea solucionado en una versión posterior. Y por otro lado si buscas en internet encuentras varias alternativas, yo ensaye varias y algunas no funcionan correctamente, la que me funcionó fue la de poner las etiquetas de los scripts y la hoja de estilo
no en el <head> sino al final de la página justo antes de la etiqueta </body>.

Luego de haber solucionado el problema con el IE, solo resta adicionar los link hacia el video que queremos mostrar con una etiqueta <a> a la cual le agregamos el atributo rel=”vidbox”.

Ejemplo:

<a rel=”vidbox” href=”RUTA_DEL_VIDEO” title=”TEXTO_DESCRIPCION”> ver video </a>

 

Este link llamará al video que esté en la ruta y lo desplegará con el efecto videobox.

Adicionalmente se puede especificar el tamaño de la ventana de video que se quiere mostrar.

<a rel=”vidbox 340 480″ href=”RUTA_DEL_VIDEO” title=”TEXTO_DESCRIPCION”> ver video </a>

O hacer el llamado de un video desde una función javascript.

Videobox.open(“URL_archivo”,”un_texto”,”vidbox ancho alto”);

Bueno y ahora a crear sitios dinámicos y con excelente presentación, ya que contamos con muy buenas herramientas para hacer que nuestras aplicaciones web cada vez sean más prácticas, bonitas y sobre todo útiles.

Si tienen preguntas o comentarios por favor no duden en hacerlos… les ayudaré en lo que pueda.

Link videobox

En una ocación requería poder permitir al usuario ordenar una tabla en la que presento cierta información, pero queria hacerlo sin tener que ir al servidor ya que no son tantos registros, entonces empece a buscar y probar hasta que di con este espectacular Script que tan solo con 17Kb sin comprimir permite el ordenamiento de las tablas con Javascript de forma facil y muy ajustable a nuestro diseño del sitio.

Como apicar SortTable a nuestra página.

Es tan sencillo como adicionar la libreria a nuestro sitio y adicionar una class a la tabla que necesitamos sea ordenable.

Dentro de las etiquetas <HEAD> ponemos

<script src="sorttable.js"></script>

y luego en la definicion de la tabla ponemos

<table class="sortable">

y eso es todo. Para más personalización podemos modiicar la hoja de estilos para que se adapte mas a nuestro diseño.

/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}

y listo,  ahora nuestra tabla permite ordenarse dando click sobre el titulo de la columna.

Esta librería tiene muchas más aplicaciones, el objetivo de este corto post  es unicamente informar del uso de esta librería, y tambien a mi me sirve como anotación para recordar la url y como se aplica.

Si necesitas más información acerca de esta excelente librería de Javascript ve directamente al sitio de Sorttable dando click aqui.