ZoneArtCSS | Tu lugar: Del Arte CSS » jQuery http://www.zoneartcss.com Tu Zona del Arte CSS, tips de programación con estilo Thu, 29 Jul 2010 05:00:55 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Traductor con jQuery http://www.zoneartcss.com/webdevelopment/jquery/traductor-con-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/traductor-con-jquery/#comments Thu, 29 Jul 2010 04:46:47 +0000 miguelortega http://www.zoneartcss.com/?p=1776

Este es un buen ejemplo de como hacer un traductor con jQuery de una forma rapida y sencilla.

El script tiene las siguientes características.

1.- Detección Automática del idioma.
2.- Puedes Mezclar el contenido estático con Dinamicos, con esto podemos traducir contenido de una página o valores de Formulario, simplemente cambiando el selector.
3.- Soporta todos los idiomas disponibles en google.

Usando el plugin es bastante sencillo. Una vez que haya creado su formulario,tiene que cargar en el idioma Google API.

Veamos el siguiente Codigo.

 
<script src='http://www.google.com/jsapi'  type='text/javascript'></script>	
<script type='text/javascript'>                      
  google.load("language", "1");
</script>
<script src="http://github.com/charlesmarshall/jQuery-Translator/raw/master/jquery.translator.js" 
  type="text/javascript" charset="utf-8"></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
  jQuery('#translation_form').translator({
    "origin": '#translate',
    "origin_language": '#from_lang',
    "result": '#result',
    "result_language": '#to_lang'
  });
});
</script>

Este script esta muy completo en esta página podrás ver el codigo completo.

]]> http://www.zoneartcss.com/webdevelopment/jquery/traductor-con-jquery/feed/ 0 Crea un carousel desde wp-admin de wordpress http://www.zoneartcss.com/webdevelopment/jquery/crea-un-carousel-desde-wp-admin-de-wordpress/ http://www.zoneartcss.com/webdevelopment/jquery/crea-un-carousel-desde-wp-admin-de-wordpress/#comments Wed, 14 Jul 2010 19:53:11 +0000 miguelortega http://www.zoneartcss.com/?p=1656

wp-carousel-titleWP Carousel ahora con este plugin para wordpress podrás montrar contenido, generalmente rico en imágenes, en forma de galería o presentación.

WP Carousel es un plugin con el que implementar un carrusel en tu blog de WordPress será pan comido, simplemente tenemos que seguir los pasos comunes cuando instalamos un plugin de wordpress, solo tienes que descargar e instalar el plugin como de costumbre y luego dirigirnos a su página de opciones.

En la opciones del plugin solo tenemos que definir la categoria de la qeu se mostrarán los artículos, la cantidad que se mostrarán y definir el ancho y alto de la caja contenedora del plugin.

Para crear contenido para nuestro carrusel simplemente tendremos que escribir un artículo como de costumbre, el plugin tomará la primera imagen que introduzcamos y para texto explicativo usará el que introduzcamos como extracto o excerpt.

Enlace: WP CAROUSEL

]]> http://www.zoneartcss.com/webdevelopment/jquery/crea-un-carousel-desde-wp-admin-de-wordpress/feed/ 0 ScriptSrc – Listado de etiquetas actuales de las librerias más famosas http://www.zoneartcss.com/webdesign/herramientas-web/scriptsrc-listado-de-etiquetas-actuales-de-las-librerias-mas-famosas/ http://www.zoneartcss.com/webdesign/herramientas-web/scriptsrc-listado-de-etiquetas-actuales-de-las-librerias-mas-famosas/#comments Fri, 09 Jul 2010 02:04:20 +0000 miguelortega http://www.zoneartcss.com/?p=1612

ScriptSrc nos proporcione información de estas bibliotecas:
jQuery, jQuery UI, MooTools, Prototype, YUI, dojo, ExtJS, Script.aculo.us, Chrome Frame and «swfobject».

incluyendo la versión, ruta de acceso, página web y su última actualización.
Para copiarlos sólo hay que clic en el botón Copiar en cada pestaña y entonces tenemos la etiqueta script. Sin esfuerzo.


Picture-3

Así con esta herramienta no tendremos que estar buscando la ultima versión de nuestra librerías favoritas, espero que les sea de utilidad.

Enlace: ScriptSrc

]]> http://www.zoneartcss.com/webdesign/herramientas-web/scriptsrc-listado-de-etiquetas-actuales-de-las-librerias-mas-famosas/feed/ 0 Crear Slideshow con jQuery http://www.zoneartcss.com/webdevelopment/jquery/crear-slideshow-con-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/crear-slideshow-con-jquery/#comments Wed, 07 Apr 2010 17:48:56 +0000 miguelortega http://www.zoneartcss.com/?p=1402

Anterior mente les había publicado el tema de Slider jQuery plugin , pero ahora les presento un código más desglosado y fácil de implementar.

Recuerden que para este ejemplo utilizamos JQuery

Codigo Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="button">
		 <a class="button1 active" rel="1" href="#"></a>
		 <a class="button2" rel="2" href="#"></a>
		 <a class="button3" rel="3" href="#"></a>
	</div> <!-- end of div button-->
 
	<div class="clear"></div>
 
	<div id="myslide">
		<div class="cover">
 
			<div class="mystuff">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra, elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros. Nulla egestas imperdiet rutrum. Praesent vel metus ligula. In ut leo enim, in interdum urna. In hac habitasse platea dictumst. Nullam euismod, eros et venenatis adipiscing, libero libero cursus magna, et semper tellus ipsum eget libero.
			</div>
			<div class="mystuff">
				Aenean scelerisque ipsum a nunc placerat sed blandit odio sollicitudin. Donec sed velit id ipsum lobortis tincidunt a sit amet leo. Praesent sit amet nisl a arcu lobortis egestas. Nunc at felis in erat condimentum ornare vel vel nisl. Phasellus ultrices nisi vel leo commodo et rhoncus ipsum porttitor. Fusce eu ligula sit amet sapien ullamcorper adipiscing. Suspendisse non ipsum elit. Nunc vehicula, felis non scelerisque aliquam, tellus leo consequat sem, ac suscipit nisi risus a justo. Quisque sollicitudin iaculis nisl at luctus. Curabitur porttitor lacus et dui blandit vulputate. In eu quam quam.
			</div>
			<div class="mystuff">
				Suspendisse iaculis sodales dui pretium faucibus. Praesent vitae ipsum justo, id tempor tellus. In nulla leo, dignissim quis luctus sed, commodo nec velit. Aliquam ac nisl quam, quis tincidunt magna. Aenean nec massa elit, non ornare neque. Vestibulum at ipsum sit amet augue euismod consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus porttitor gravida massa at cursus. Sed ac viverra risus.
			</div>
 
		</div> <!-- end of div cover -->
	</div>  <!-- end of div myslide -->

Codigo Css

1
2
3
4
5
6
7
8
9
10
11
12

#myslide {width:160px;overflow:hidden;position: relative;height:170px;margin-bottom:20px}
 
	#myslide .cover{
		width:480px; /*------- class mystuff width * number of mystuff divs (160 * 3 = 480)---------- */
		position: absolute;
		height:160px;
	}
 
	#myslide .mystuff {width:160px;float:left;padding:20px 0;}
 
	.button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
	.active{background:#111;padding:6px;display:block;float:left;outline:none;}

Codigo JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
	$('#button a').click(function(){
		var integer = $(this).attr('rel');
		$('#myslide .cover').css({left:-160*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div mystuff (here 160) ------ */
		$('#button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button'+integer)){
				$(this).addClass('active')}
		});
	});	
});
</script>

Ver Ejemplo

Espero sus comentarios

]]> http://www.zoneartcss.com/webdevelopment/jquery/crear-slideshow-con-jquery/feed/ 0 Pantalla de espera con jQuery http://www.zoneartcss.com/webdevelopment/jquery/pantalla-de-espera-con-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/pantalla-de-espera-con-jquery/#comments Tue, 09 Feb 2010 00:09:36 +0000 miguelortega http://www.zoneartcss.com/?p=1229

Este es un excelente efecto echo en jquery para poder crear mensajes de aviso de pre-carga de nuestra web o también poder crear mensajes de advertencia para nuestras aplicaciones web.

También nos puede servir para poder bloquear la actividad de un usuario de nuestra web mostrando les una pantalla gris con transparencia pero le evitara poder hacer cualquier acción dentro de nuestra web.

Podemos bloqueara secciones o div según como nos convenga, al igual si se termina una sesión de nuestros usuarios.

Descargar

Ver Ejemplo

]]> http://www.zoneartcss.com/webdevelopment/jquery/pantalla-de-espera-con-jquery/feed/ 1 Columnas de igual altura con jQuery http://www.zoneartcss.com/webdevelopment/jquery/columnas-de-igual-altura-con-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/columnas-de-igual-altura-con-jquery/#comments Sun, 03 Jan 2010 04:02:03 +0000 miguelortega http://www.zoneartcss.com/?p=1236

Cuando se utiliza una tabla, todas las columnas de la tabla tienen la misma altura. Durante los días de principios de diseño de páginas web, todo el mundo el uso de tablas al estilo de sus páginas web para la creación de columnas de la misma altura no fueron un problema en absoluto. Pero con el aumento de la CSS, las cosas cambiaron y ahora, la creación de columnas de igual altura no es un trabajo fácil.

Happilly, aquí hay un verdadero salvavidas para todo el mundo que quieren crear columnas idénticas.

Dado que este código se utiliza el marco de jQuery, asegúrese de que tiene instalado en su sitio web!
Pegue la siguiente secuencia de comandos en un archivo nuevo y lo incluya en su página web:

1
2
3
4
5
6
7
8
9
10
11
12
13

$.fn.equalHeights = function(px) {
	$(this).each(function(){
		var currentTallest = 0;
		$(this).children().each(function(i){
			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
		});
		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
		// for ie6, set height since min-height isn't supported
		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
		$(this).children().css({'min-height': currentTallest});
	});
	return this;
};

Utilice este código para los elementos que quiera que tengan la misma altura.

1

$('.container').equalHeights();

Ver detalles

]]> http://www.zoneartcss.com/webdevelopment/jquery/columnas-de-igual-altura-con-jquery/feed/ 0 Fondos transparentes con jQuery para tu web http://www.zoneartcss.com/webdevelopment/jquery/fondos-transparentes-con-jquery-para-tu-web/ http://www.zoneartcss.com/webdevelopment/jquery/fondos-transparentes-con-jquery-para-tu-web/#comments Sun, 03 Jan 2010 03:49:57 +0000 miguelortega http://www.zoneartcss.com/?p=1234

transBG.jquery.plugin.js es un plugin de jQuery para poder hacer el efecto de nuestras web con un background transparente, es fácil de implementar solo tenemos que descargar Jquery y tambien esta libreria que al final del post les dejo los links para la descarga.

Con esta librería se evitan los problemas con ie6 de las transparencias…

Este es el código para tu web, recuerda agregar las librerías..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$("#id").transBGdraw();
$("#menu").transBGdraw();
$("#container").transBGdraw();
 
// !!!IMPORTANT!!!
// if you use tagnames or classes, make sure every object affected has a unique id.
$("div").each(function()
{ $(this).transBGdraw(); });
 
$("h6").each(function()
{ $(this).transBGdraw(); });
 
$(".class1").each(function()
{ $(this).transBGdraw(); });
 
$(".text").each(function()
{ $(this).transBGdraw(); });
 
$(".information").each(function()
{ $(this).transBGdraw(); });

Descargar jQuery

Descargar Libreria

]]> http://www.zoneartcss.com/webdevelopment/jquery/fondos-transparentes-con-jquery-para-tu-web/feed/ 0 Como subir multiples archivos desde mi web con php y jquery http://www.zoneartcss.com/webdevelopment/php/como-subir-multiples-archivos-desde-mi-web-con-php-y-jquery/ http://www.zoneartcss.com/webdevelopment/php/como-subir-multiples-archivos-desde-mi-web-con-php-y-jquery/#comments Thu, 31 Dec 2009 07:50:20 +0000 miguelortega http://www.zoneartcss.com/?p=1232

La Carga de archivos múltiples Plugin (jQuery.MultiFile), es un plugin obstrusive para la biblioteca de Javascript jQuery que ayuda a los usuarios seleccionar fácilmente varios archivos para subir de manera rápida y sencilla a la vez que proporciona algunas funciones de validación de base para ayudar a los desarrolladores de errores idenfity simple, sin tener que presentar el formulario (por ejemplo: subir archivos).

Ver Ejemplo

Descargar

]]> http://www.zoneartcss.com/webdevelopment/php/como-subir-multiples-archivos-desde-mi-web-con-php-y-jquery/feed/ 0 8 Trucos con Jquery http://www.zoneartcss.com/webdevelopment/jquery/8-trucos-con-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/8-trucos-con-jquery/#comments Sun, 27 Dec 2009 05:18:56 +0000 Liz Palacios http://www.zoneartcss.com/?p=1202

Hola!!

Navegando por ahi me encontre con un sitio que nos muestra 8 trucos con JQUERY, que nos pueden ser util al momento de crear nuestro Sitio Web.

Chequenlos y pruebenlos!!!!

Les dejo aqui en Enlace.

]]> http://www.zoneartcss.com/webdevelopment/jquery/8-trucos-con-jquery/feed/ 0 Crear un Wizard para el registro de usuarios en Jquery – Plugin http://www.zoneartcss.com/webdevelopment/jquery/crear-un-wizard-para-el-registro-de-usuarios-en-jquery-plugin/ http://www.zoneartcss.com/webdevelopment/jquery/crear-un-wizard-para-el-registro-de-usuarios-en-jquery-plugin/#comments Tue, 22 Dec 2009 23:18:01 +0000 miguelortega http://www.zoneartcss.com/?p=1186

wizard jquery

Este plugin de jQuery esta excelente para tus formulario muy extensos y es difícil hacerlos compactos. COn este Plugin puedes crear un wizard para en en sencillos pasos tus usuarios puedan llenar los campos en una forma mas interactiva.

Descarga el Plugin de Jquery

Agrega en tu pagina el siguiente código javascript, que sea dentro de head

<script>
function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");}
</script>

Luego este código en el Body

<p id="wizardwrapper"> </p>
<p class="1"> </p>
<h3>Step 1</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" disabled="true" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(1,2);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="current"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="2"> </p>
<h3>Step 2</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(2,1);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(2,3);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="lastDone"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="current"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="3"> </p>
<h3>Step 3</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(3,2);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(3,4);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="lastDone"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="current"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
        <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="4"> </p>
<h3>Step 4</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(4,3);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="loadnext(4,5);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="lastDone"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="current"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
<li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>
<p id="wizardpanel" class="5"> </p>
<h3>Step 5</h3>
<p id="wizardcontent"> </p>
<p class="buttons">
      <button type="submit" onclick="loadnext(5,4);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
      <button type="submit" onclick="submit()" class="next"> Finish <img src="/images/arrow_right.png" /> </button>
<ul id="mainNav" class="fiveStep">
<li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="done"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="lastDone"><a href="/"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
<li class="mainNavNoBg current"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
</ul>

Css

Ver Ejemplo

]]> http://www.zoneartcss.com/webdevelopment/jquery/crear-un-wizard-para-el-registro-de-usuarios-en-jquery-plugin/feed/ 0 Crea un chat como el de Facebook o Gmail con jQuery http://www.zoneartcss.com/webdevelopment/jquery/crea-un-chat-como-el-de-facebook-o-gmail-con-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/crea-un-chat-como-el-de-facebook-o-gmail-con-jquery/#comments Fri, 18 Dec 2009 17:58:32 +0000 miguelortega http://www.zoneartcss.com/?p=1180

chat_facebook

A muchas personas les agrada mucho el estilo de chat como el de gmail o facebook, por que estos modulos son prácticos para usar. Pero seria mejor si los podemos integrar a nuestra pagina web y hacer que nuestros usuarios convivan y platiquen y hacer así mas trafico a nuestro sitio web.

Características
1. Gmail parte inferior derecha de la pantalla es el estilo de este chat
2. Mantiene ventanas de chat abiertas y las tiendas del estado (datos), incluso cuando se hojear páginas / Refreshed similar a Facebook
3. Muestra “Enviado en …” después de 3 minutos de inactividad
4. Muestra “X dice que …” y parpadea cuando la ventana del chat de cajas no está en foco
5. Para minimizar y cerrar ventanas de chat
6. Auto-cambiar el tamaño de la caja de entrada de texto
7. Desplazamiento automático de texto de chat
8. Auto-back-off de votación de política (el servidor de Visitas menos a menudo cuando la actividad de chat es baja)
9. Extremadamente fácil de integrar en el sitio existente

Descargar

Ver Ejemplo

]]> http://www.zoneartcss.com/webdevelopment/jquery/crea-un-chat-como-el-de-facebook-o-gmail-con-jquery/feed/ 1 Crea un Wizard con un formulario en jQuery http://www.zoneartcss.com/webdevelopment/jquery/crea-un-wizard-con-un-formulario-en-jquery/ http://www.zoneartcss.com/webdevelopment/jquery/crea-un-wizard-con-un-formulario-en-jquery/#comments Fri, 18 Dec 2009 17:42:24 +0000 miguelortega http://www.zoneartcss.com/?p=1178

wizard_from

El complemento Asistente para formularios es un plugin basado en jQuery que puede ser utilizado para simular el asistente como los flujos de página para las formas sin tener que navegar entre las diferentes páginas.

El plugin es muy discreto y le da al desarrollador gran libertad sobre cómo configurar el flujo de las diferentes etapas de sus asistentes, como el plug-in soporta la creación de rutas específicas en la forma en función de la entrada del usuario.

Características

- Divide una sola forma en los diferentes pasos para simular un flujo de pasos en lugar de una forma grande.
- Apoya las rutas que deben tomarse en forma
- Presenta sólo los campos de entrada en los pasos que se visitan en forma
- Soporta múltiples pasos “submit”
- Soporta tanto atrás y adelante de navegación
- Apoya el uso del navegador hacia atrás y hacia adelante a través de botones de la integración con el plugin de jQuery.history
- Apoya la validación del cliente mediante la integración con el plug-in de validación de jQuery
- Permite publicar el formulario con AJAX mediante la integración con el plugin jQuery.form
- Plugins integrados son totalmente configurables, estableciendo, por ejemplo posibilidad para la localización y las reglas de validación adicional

Paso 1
Crea un formulario como este.

<form id="theForm" method="post" action="#">
               <div class="step">
                 <h1>step 1 - falls through to step 2 on next</h1>
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" value="" /><br />
               </div>
               <div class="step">
                 <h1>step 2 - branch step</h1>
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" value="" /><br />
                 <select disabled="disabled" class="link" >
                   <option value="" >Choose the step to go to...</option>
                   <option value="step3" >Go to Step3</option>
                   <option value="step4" >Go to Step4</option>
                 </select><br />
               </div>
               <div id="step3" class="step">
                 <h1>step 3 - submit step</h1>
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" value="" class="required"/><br />
                 <input disabled="disabled" type="hidden" class="link" value="submit_step" />
               </div>
               <div id="step4" class="step">
                 <h1>step 4</h1>
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" name="email" class="required email" /><br />
               </div>
               <div id="step5" class="step">
                 <h1>step 5 - last step</h1>
                 <input disabled="disabled" type="text" value="" /><br />
                 <input disabled="disabled" type="text" value="" /><br />
               </div>
               <input type="reset" value="Reset" />
               <input type="submit" value="Submit" />
             </form>

Paso 2
Descarga jQuery y agrega este código al mismo archivo

<script type="text/javascript" src="./jquery-1.3.2.js"></script>
            <script type="text/javascript" src="./jquery.history.js"></script>
            <script type="text/javascript" src="./jquery.form.js"></script>
            <script type="text/javascript" src="./jquery.validate.js"></script>
            <script type="text/javascript" src="./jquery.form.wizard-1.0.1.js"></script>
 
            <script type="text/javascript">
              $(function(){
                $("#theForm").formwizard({ 
                  //form wizard settings
                  historyEnabled : true, 
                  formPluginEnabled: true, 
                  validationEnabled : true},
                 {
                   //validation settings
                 },
                 {
                   // form plugin settings
                 }
                );
              });
            </script>

Descargar

Ver Ejemplo

]]> http://www.zoneartcss.com/webdevelopment/jquery/crea-un-wizard-con-un-formulario-en-jquery/feed/ 0