JS

HTML

Con él podrás acceder a:

Perfiles: nombre del usuario, fotos y mucho más.

Sociales: los amigos del usuario y las conexiones.

Integración: editoriales, páginas de canvas, profile box y tabs.

Esta guia guía es para el uso de la biblioteca Mu  JavaScript para acceder a la facebook en su sitio. Mu es una biblioteca muy ligera que puede utilizar Facebook Connect en su sitio junto con su biblioteca JavaScript favorita como Dojo, jQuery, MooTools, Prototype o YUI.

Requirements: Facebook Connect
Demo: http://mu.daaku.org/console/
License: License Free

Añade un efecto hover a un conjunto de enlaces utilizando el efecto jQuery Animate. En pocas palabras, el JS añade el reflejo / sombra a cada <li>, a continuación, anima a la posición y la opacidad de estos elementos y los iconos de los links en el hover.Y. Stop () elimina cualquier acumulación de cola de pasar el ratón rápidamente adelante y atrás sobre la navegación.

Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/

Una cookie es un fragmento de información que se almacena en el disco duro del visitante de una página web a través de su navegador. Muy útil en la programación web para guardar y leer algunos datos de configuración. Crear, configurar, leer su valor y eliminarla es fácil con jQuery.

Crear una cookie en jQuery es tan fácil como esto:

$.cookie("name", "value");

Si necesitamos establecer algunos valores adicionales para la cookie, como su fecha de caducidad y el pathdonde aplicará:

$.cookie("name", "value", { path: '/administration', expires: 7 });

Obtener el valor de una cookie:

value = $.cookie("name");alert(value);

Para remover una cookie bastará con asignar null como valor de la cookie.

$.cookie("name", null);

Revisando los posts del foro, en un rato que he tenido, me he encontrado babySteps, un plugin que hans me muestra y que se encarga de dividir formularios en partes. Un componente ideal para formularios rápidos y complicados.

Revisando el plugin he visto que tu defines los puntos de corte y eso no me acaba de gustar, el tener que poner elementos que no tendrían ningún sentido si no fuera por el plugin no me ha gustado mucho. Así que me montado un pequeño script, que usando jQuery, nos permite obtener lo mismo siguiendo un poco más la semántica del HTML.

stepForm()

Simplemente es una función que se encarga de convertir todos los formularios cuyo atributo class sea stepMe. Únicamente se encarga de cortar el formulario por elementos <fieldset /> haciendo que un formulario largo aparente ser varios de menor tamaño.

Veamos un ejemplo que he montado.

<form action="" method="post" class="stepMe">
	<fieldset>
		<label for="name">Nombre:</label>
		<input name="nombre" id="name" value="" />
		<label for="surname">Apellidos:</label>
		<input name="apellidos" id="surname" value="" />
		<label for="birthday">Fecha de Nacimiento:</label>
		<input name="fnac" id="birthday" value="" />
	</fieldset>
	<fieldset>
		<label for="text1">Text1:</label>
		<select id="text1">
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
		</select>
		<label for="text2">Text2: </label>
			<input type="radio" id="text2" />
	</fieldset>
	<fieldset>
		<label for="submit">Submitar datos </label>
		<input type="submit" id="submit" value="Enviar" />
	</fieldset>
</form>

Este ejemplo nos divide la página en 3 pasos. Para permitir al usuario moverse entre los pasos he añadido un enlace “Volver” y otro “Seguir“, pero no descarto añadir una pequeña paginación esta noche

Personalización

Podemos definir nuestro propio estilo para los enlaces que se añaden mediante el uso CSS de las clases .nextStep y .backStep.

Además, podemos definir el texto que queremos mostrar en ambos enlaces pasándolo como parámetro. Disponemos de 3 parámetros:

1. Texto Back. (por defecto Volver)
2. Texto Next. (por defecto Seguir)
3. Contenedor. (por defecto fieldset)

$.stepForm();
// Volver / Seguir [fieldset] 

$.stepForm('Back','Next');
// Back / Next [fieldset]

$.stepForm('<-','->', 'p');
// Volver / Seguir [p]

Si somos reacios a usar <fieldset /> podemos pasar como 3er parámetro el tag que vamos a usar como contenedor.

Código

jQuery.extend({
    stepForm: function(txtBack, txtNext, token){
    	var fieldsets = $((token || 'fieldset'), $("form.stepMe"));
        var total = $(fieldsets).length;
	$(fieldsets).each(function(x,el){
			    if (x > 0) {
			      $(el).hide();
			      $(el).append('<a class="backStep" href="#x_' + (x-1) + '">'+ (txtBack || 'Volver') +'</a>');
			      $(".backStep", $(el)).bind("click", function(){
			                $("#x_" + (x - 1)).show();
			                $(el).hide();
			       });
			    }

			    if ((x+1)< total) {
			        $(el).append('<a class="nextStep" href="#_' + (x+1) + '">'+(txtNext || 'Seguir')+'</a>');
			        $(".nextStep", $(el)).bind("click", function(){
			                $("#x_" + (x + 1)).show();
			                $(el).hide();
			        });
			    }
			    $(el).attr("id", "x_" + x);
	});
    }
});

Actualización

Marco Neumann  ha portado el script a MooTools para los usuarios de este framework. La verdad es que la claridad del código no tiene comparación.

Divide formularios en pasos con jQuery » »

1.- Supongamos que tenemos una estructura típica de HTML similar a ésta:

<div id="contenedor">
     <div id="navegacion">Lo que sea 1</div>
     <div id="contenido">Lo que sea 2</div>
</div>

Para que, independientemente del contenido que haya tanto en “navegacion” como en “contenido”, las dos columnas tengan la misma altura deberíamos…

2.- Añadir una clase a las columnas que tengan la misma altura.

<div id="contenedor">
     <div id="navegacion" class="columnas">Lo que sea 1</div>
     <div id="contenido" class="columnas">Lo que sea 2</div>
</div>

3.- Añadir tanto la librería como la función “equalHeight”creada en cssnewbie y la llamada a dicha función especificando los elementos que deseamos igualar en altura. En nuestro caso los dos div con la clase “columnas”.

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($(".columnas"));
});
</script>

Más información en “Equal Height Columns with jQuery”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
$( document ).ready( function() {
	$("a[rel='pop-up']").click(function () {
      	var caracteristicas = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";
      	nueva=window.open(this.href, 'Popup', caracteristicas);
      	return false;
 });
});
</script>
</head>
<body>
<p><a href="ventana.html" rel="pop-up">ABRIR POP UP</a></p>
</body>
</html>

Para realizar el efecto, lo primero que tendríamos que hacer es enlazar en nuestro documento con la librería de jQuery.

<script type="text/javascript" src="jquery-1.2.6.js"></script>

Seguidamente construimos un menú al que deberemos añadir la clase “nudge” a cada uno de los enlaces:

<ul><li><a href="#" class="nudge">home</a></li><li><a href="#" class="nudge">acerca de nosotros </a></li>

<li><a href="#" class="nudge">servicios</a></li>

<li><a href="#" class="nudge">productos</a></li>

<li><a href="#" class="nudge">contacta con nosotros</a></li>

</ul>

Ahora tan sólo queda animar la propiedad “padding-left” tanto cuando estamos sobre una opción y cuando salimos de ella:

$(document).ready(function() { $('a.nudge').hover(function() { //mouse in$(this).animate({ paddingLeft: '35px' }, 400);

}, function() { //mouse out

$(this).animate({ paddingLeft: '15px' }, 400);

});

});

Yo he establecido un valor inicial de “padding-left” de 15 px y que es el valor al que ha de retornar la opción de menú al evento “mouse-out”. Cuando se está sobre la opción ésta se desplaza hasta un valor de 35 px. Para ambas acciones la velocidad es de 400 milisegundos. Lógicamente todas estos valores son modificables y se deberán ajustar a las pretensiones de cada uno.

Para mostrar un ejemplo un poco más completo. He realizado tres menús, ya con CSS, que incorporan el efecto.

Ejemplo 1:

Ejemplo 2:

Ejemplo 3: