Creando un simple Slideshow con Mootools

David Walsh nos trae este excelente tutorial para agregar un Slideshow de manera muy sencilla a nuestro Website con el Framework Javascript Mootools.
Dentro de los miles de plugins que existen para crear Slideshow con Mootools diré que esta puede ser una excelente alternativa si no se necesitan controles de navegación, ya que solo se podrá configurar la duración de cada imagen.

Paso 1: Creando el HTML

Christina Ricci Christina Ricci Christina Ricci Christina Ricci Christina Ricci

Paso 2: El CSS

Esto lo colocamos dentro del del html.

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }

Paso 3: El Javascript

Este script lo incluiremos justo antes de cerrar el

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){
		if(i > 0) {
			img.set('opacity',0);
		}
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
	};
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		interval = show.periodical(showDuration);
	});
});

Previamente debemos descargar la última versión del Framework Javascript Mootools y la incluiremos en el .
Ver Demo

jfdghjhthit45

10 útiles plugins Mootools para formularios HTML

sta vez les traigo una recopilación de plugins Mootools para formularios.
Los formularios siempre son indispensables en cualquier website, ya sean formularios para mandar un simple mail, hasta formularios muy completos de registro.
El objetivo de este post es tratar de convertir los simples formularios html en formularios más útiles y fáciles de llenar para el usuario, convirtiéndolo en una alternativa para familiarizar el formulario al cualquier usuario.

1. Calendar

Esta es una clase no obtrusiva para generar calendarios en nuestro formularios, tiene temas para loca calendarios y se puede personalizar una imagen referente a cada mes.

Ver Demo Descargar

2. Web 2.0 form

Este plugin brinda la posibilidad de agregar animados campos de texto, mostrar y ocultar instrucciones según los campos de formulario.

Ver Demo Descargar

3. Resizable textarea

Nos da la opción de expandir un textarea, esta función la podemos tener en chrome o safari por defecto, pero con este plugin la podremos tener en todos los navegadores.

Ver Demo Descargar

4. Ajax login form

Este plugin implementa un la funcionalidad de Ajax a nuestro formulario de login.

Ver Demo Descargar

5. Mootools form validation

Con este plugin nos ahorraremos validar un formulario, y que podemos implementarlo muy fácilmente con unas pocas líneas de código.

Ver Demo Descargar

6. Custom checkboxes and radio buttons

Convierte los simples elementos checkbox, radio buttons y select en elementos personalizables en apariencia.

Ver Demo Descargar

7. Multiple select

Un plugin para mejorar la apariencia de los select múltiple.

Ver Demo

8. fValidator

Otro plugin para validar formularios, tiene otro aspecto agradable para diferentes gustos.

Ver Demo Descargar

9 – iMask

Enmascara un campo de texto para obligar al usuario a introducir los datos estableciendo un formato predeterminado.

Ver Demo

10 – Textboxlist meets autocompletion

Este es un plugin para autocompletado de palabras al estilo de facebook, soporta múltiples palabras.

Ver Demo Descargarzp8497586rq

jfdghjhthit45

Lighter.js resaltado de sintaxis con Mootools

Lighter.js es una clase echa con MooTools 1.2.1 para el remarcado de código js, html, php, entre otros.

Su uso es muy sencillo en seguidamente explicaremos como utilizarlo.

Primero descargamos la librería Mootools 1.2.1 y la clase Lighter.js con sus componentes aquí.

Despues de descomprimirlo pasaremos a crear una pagina html donde incluiremos la librería Mootools y la clase Lighter.

<head>
	<script src="js/mootools-1.2.1-core.js"></script>
	<script src="js/Lighter.js"></script>
</head>

Ahora incluiremos este script antes de cerrar el “head” que se encargara de recorrer los tag “pre” y darle el estilo correspondiente.

window.addEvent('domready', function() {
	$$('pre').light({
		altLines: 'hover',
		indent: 2,
		editable: true,
		mode: 'ol',
		path: 'compressed/'
	});
});

donde las opciones significan:

altLines: Le dara un estilo diferente a la fila, en este caso es cuando el mouse esta sobre la fila.
indent: El numero de espacios a remplazar por un tab.
editable: Permite comportarse como un editor de texto remarcando el formato.
mode: es el modo en que se mostraran las filas.
path: es la ruta donde se encuentran los componentes (js, php, html, sql, etc).

Como un ejemplo pondremos un html dentro del body.

<pre class="html">
<head>
	<script src="js/moo-1.2.1-core.js"></script>
	<script src="js/Lighter.js"></script>
</head>
</pre>

Recursos

TwitterGitter: lista tus tweets con ajax

TwitterGitter es un plugin creado por DavidWalsh y sirve para recuperar tus últimos estados e información de tu Twitter.

Utiliza la librería Mootools 1.2 y la extensión JSONP para Mootools.

Que es JSONP ?

Es un nuevo medio por el cual podemos obtener datos en formato JSON desde otro dominio.
Actualmente si usa Ajax para realizar este proceso obtendrá un error de seguridad.
JSONP incluye una etiqueta script en el documento, esta etiqueta apunta a un javascript externo
el cual se envuelve por un parentesis y nombre aparentando ser una función “__json([contenido])” y ejecuta al momento de cargarlo, de esta manera podremos obtener una respuesta desde otro dominio.

Para comenzar descargaremos los siguientes archivos

Luego debemos incluir las librerías en nuestra web




Ahora pondremos el script que se ejecutara al hacer click en un boton

window.addEvent('domready',function() {
	$('git').addEvent('click',function(e) {
		e.stop();
		$('tweets-here').set('html','');
		var myTwitterGitter = new TwitterGitter($('username').value,{
			count: 5,
			onComplete: function(tweets,user) {
				tweets.each(function(tweet,i) {
					new Element('div',{
						html: '<img src="'
								+ user.profile_image_url.replace("\",'')
								+ '" align="left" alt="'
								+ user.name + '" /> <strong>'
								+ user.name + '</strong><br />'
								+ tweet.text + '<br /><span>'
								+ tweet.created_at + ' via '
								+ tweet.source.replace("\",'') + '</span>',
						'class': 'tweet clear'
					}).inject('tweets-here');
				});
			}
		}).retrieve();
	});
});

Nada mas nos queda incluir dentro del body nuestro input, button y la seccion donde se llenaran los tweets



Recursos

Link Nudging con Mootools y jQuery

Link nudging realiza un efecto de animación muy bueno para enlaces, cuando el mouse esta sobre el enlace, lo lanza a la derecha y cuando se quita el mouse regresa a su posición original.

Este ejemplo se realizara con dos librerías muy usadas, Mootools y jQuery.

Ejemplo con jQuery 1.2.6

Primero tienes que descargar esta versión de jQuery y colocarla en el head de tu pagina web, luego colocar este script también en el head.

$(document).ready(function()
{
	$('a.nodo').hover(function()
    {
		$(this).animate({ paddingLeft: '20px' },400);
	},
    function()
    {
		$(this).animate({ paddingLeft: 0 }, 400);
	});
});

Ejemplo con MooTools 1.2

Para este caso descargar Mootools 1.2 y colocarlo dentro del head de nuestra pagina web, el siguiente script al contrario con el de jQuery tendremos que colocarlo justo antes de cerrar la etiqueta body (</body>).

$$('a.nodo').each(
    function(el)
    {
        var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
        el.addEvents(
        	{
                'mouseenter':function()
                { fx.start({ 'padding-left': 20 }); },
                'mouseleave':function()
                { fx.start({ 'padding-left': 0 }); }
        	}
        );
    });

Recursos

Mootools – Fancy Show and Hide

Mootools

En este tutorial muestro como ocultar y mostrar elementos (show and hide) de manera animada con Mootools.
Primero haremos un ejemplo básico y luego el avanzado.

Antes que nada tendremos que incluir la librería Mootools para comenzar a implementar esta funcionalidad, para este ejemplo estoy usando la versión 1.2.0

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

Ejemplo básico:

Incluiremos este script en el head para implementar los metodos para un elemento

window.addEvent('domready',
  function()
  {
    Element.implement(
    {
    //mostrar
    show: function()
    {
      this.setStyle('display','');
    },
    //ocultar
    hide: function()
    {
      this.setStyle('display','none');
    }
  });
});

En nuestra pagina podremos llamar a los metodos show() y hide() de esta manera:

<a onclick="$('element').show()">Mostrar</a>/
<a onclick="$('element').hide()">Ocultar</a>
<div id="element">Show/Hide</div>

Ver demo1

Ejemplo Avanzado:

Incluiremos el javascript que nos creara dos metodos mas, estos los llamaremos fancyShow() y fancyHide()

window.addEvent('domready', function()
{
  Element.implement(
  {
    fancyShow: function()
    {
      this.fade('in');
    },
    fancyHide: function()
    {
      this.fade('out');
    }
  });
});

Para llamar a estos metodos lo podremos hacer igual que el anterior ejemplo

<a onclick="$('element').fancyShow()">Mostrar</a>
<a onclick="$('element').fancyHide()">Ocultar</a>
<div id="element">Show/Hide</div>

Ver demo2

Recursos:

Multibox con Mootools

div align=”center”>

Multibox es una librería que nos sirve para poder crear nuestra galería ya no solo de fotos, el multibox soporta distintos tipos de formato multimedia, como: flash (flv), video(mov,wmv), mp3, html.

En este tutorial les explico como utilizar esta util herramienta para hacer una galería

Primero:
Incluir los javascript y hojas de estilo





Segundo:
Dentro del body añadiremos enlaces donde colocaremos en href la ruta de nuestro archivo, el id dendra que ser correlativo si ponemos mas enlaces, todos los enlaces que serán vistos en la galería tendrán que tener el class=”mb”


Tercero:
Luego de poner el enlace podremos poner una descripción para el archivo, tendrá que llevar el class=”multiBoxDesc mb1″, el mb1 refiere al id del enlace.

Descripción de la Imagen...

Eso es todo si tenemos varios archivos lo único que cambiara sera el id en el enlace y el div para la descripción
Preguntas, sugerencias, comentarios?


Recursos:

zp8497586rq

TextboxList con Autocompleter

Si tienes una cuenta en Facebook te habras dado cuenta al enviar mensajes a tus amigos de la forma en que puedes agregar nombres y estos se autocompletan y forman botones con opciones de eliminar, todo esto dentro de un “TextboxList”.

Un TextboxList es una lista aplicada con estilos la apariencia de un textbox, voy a mostrar como hacer esto con unos simples pasos, esta funcion utilizara la libreria mootools.

Primero incluiremos los scripts y hojas de estilo.

<link rel="stylesheet" href="test.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="mootools-beta-1.2b1.js" ></script>
<script src="textboxlist.compressed.js" ></script>
<script src="test.js" ></script>

Los scripts adicionales (textboxlist.compressed.js y test.js) son los que crean los contenidos y realizan el autocompletado respectivamente.
En test.js puedes modificar algunas opciones en la Línea 27:

autocomplete: {
      'opacity': 0.8,   //Opacidad de autocomplete
      'maxresults': 10, //El máximo de resultados
      'minchars': 1     //mínimo de letras para busqueda
    }

Segundo: Dentro del body debemos de escribir el código

<form id="test-form">
<ol>
    <input type="text" value="" id="facebook-demo" />
    <div id="facebook-auto">
        <div class="default">Escribe un nombre</div>
        <ul class="feed">
          <li>Jorge Luis Borges</li>
          <li>Julio Cortazar</li>
        </ul>
        <!-- Esta lista  se agregara por defecto -->
    </div>
    <a onclick="sendNames()" href="#">Mostrar Lista</a>
</ol>

Esto nos mostrara una caja de texto simple con un contenido poco particular y al momento de seguir escribiendo nombres se expandera. El div con class=”default” sera el mensaje cuando estemos dentro del textList. La lista con class=”feed” nos permite poner por defecto algunos nombres

Ahora dirán como puedo mandar esto por POST o GET si no es realmente un “input”. Para el tercer paso prepare un script que nos hara esto facil.

function sendNames()
{
    var names = "";
    $$('.bit-box').each
    (
        function(e)
        {
            names += e.textContent + ', ';
        }
    );
    names = names.substr(0,(names.length-2));
    alert(names);
}

La función sendNames() nos recorrera todas las listas con class=”bit-box” y nos retornara el contenido en texto, en el recorrido lo concatenamos por comas, y al final quitamos la coma que sobra.
Ahora podemos mandar esto con una peticion Ajax (Ajax Request) al servidor, si el lenguaje que usamos es PHP lo podemos desglosar con la función explode(‘, ‘,$_POST[‘names’]); Esto convertira en un Array por cada ‘, ‘ en la cadena.

Alguna duda, sugerencia, comentario, escribanme.

Recursos: