Craftyman Blog » Mootools http://craftyman.net Redes Sociales, WordPress, Desarrollo Web, SEO Wed, 01 Feb 2012 00:57:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Creando un simple Slideshow con Mootools http://craftyman.net/creando-un-simple-slideshow-con-mootools/ http://craftyman.net/creando-un-simple-slideshow-con-mootools/#comments Mon, 28 Dec 2009 19:22:27 +0000 craftyman http://craftyman.net/?p=1040 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

<div id="slideshow-container">
	<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>

Paso 2: El CSS

Esto lo colocamos dentro del <head> 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 </body> 
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 <head>. Ver Demo

 

Post Relacionados

]]> http://craftyman.net/creando-un-simple-slideshow-con-mootools/feed/ 3 10 útiles plugins Mootools para formularios HTML http://craftyman.net/10-utiles-plugins-mootools-para-formularios-html/ http://craftyman.net/10-utiles-plugins-mootools-para-formularios-html/#comments Tue, 01 Dec 2009 16:10:28 +0000 craftyman http://craftyman.net/?p=1026

 

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  Descargar

 

Post Relacionados

]]> http://craftyman.net/10-utiles-plugins-mootools-para-formularios-html/feed/ 0 Lighter.js resaltado de sintaxis con Mootools http://craftyman.net/lighter-js/ http://craftyman.net/lighter-js/#comments Wed, 29 Apr 2009 05:55:45 +0000 craftyman http://craftyman.net/?p=380 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

 

Post Relacionados

]]> http://craftyman.net/lighter-js/feed/ 0 TwitterGitter: lista tus tweets con ajax http://craftyman.net/twittergitter-plugin/ http://craftyman.net/twittergitter-plugin/#comments Sun, 29 Mar 2009 06:50:37 +0000 craftyman http://craftyman.net/?p=337 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

 

Post Relacionados

]]> http://craftyman.net/twittergitter-plugin/feed/ 2 Link Nudging con Mootools y jQuery http://craftyman.net/link-nudging-con-mootools-jquery/ http://craftyman.net/link-nudging-con-mootools-jquery/#comments Fri, 05 Dec 2008 00:23:04 +0000 craftyman http://craftyman.net/?p=190 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

 

Post Relacionados

]]> http://craftyman.net/link-nudging-con-mootools-jquery/feed/ 0 Mootools – Fancy Show and Hide http://craftyman.net/mootools-fancy-show-and-hide/ http://craftyman.net/mootools-fancy-show-and-hide/#comments Fri, 17 Oct 2008 13:46:37 +0000 craftyman http://craftyman.net/?p=111 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:

 

Post Relacionados

]]> http://craftyman.net/mootools-fancy-show-and-hide/feed/ 1 Multibox con Mootools http://craftyman.net/multibox-con-mootools/ http://craftyman.net/multibox-con-mootools/#comments Thu, 09 Oct 2008 14:47:39 +0000 craftyman http://craftyman.net/?p=105

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 

<link href="multibox.css" type="text/css"/>
<script src= "mootools.js" ></script> 
<script src="overlay.js"></script>
<script src= "multibox.js" ></script>

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" 

<a 
	href="files/IMG_8966.jpg" 
    id="mb1" 
    class="mb" 
    title="jpg"
><img src="files/tIMG_8966.jpg" alt="" border="0" /></a>

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.

<div class="multiBoxDesc mb1">
Descripción de la Imagen...
</div>

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?

<script type="text/javascript">
window.addEvent('domready', function(){
new MultiBox('mb', {descClassName: 'multiBoxDesc'});
});
</script>

Recursos:

 

Post Relacionados

]]> http://craftyman.net/multibox-con-mootools/feed/ 10 TextboxList con Autocompleter http://craftyman.net/textboxlist-con-autocompleter/ http://craftyman.net/textboxlist-con-autocompleter/#comments Wed, 01 Oct 2008 14:18:40 +0000 craftyman http://craftyman.net/?p=89

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:

 

Post Relacionados

]]> http://craftyman.net/textboxlist-con-autocompleter/feed/ 3