18
2009
Crea un Wizard con un formulario en jQuery
An article by 
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>
1 Comment + Add Comment
Leave a comment
Patrocinador
Siguenos
Suscribete
Correo @zoneartcss.com
Comentarios
- juan manuel en Subdominios con php y .htaccess
- PCHART-Crear gráficas en PHP | Espacio de *M@?!*[lOs KeRoS mUcHo a ToDoS...] en Pchart – Crear gráficas en PHP
- EH en Evitar resize de un textarea con CSS
- KAREN en Envia mensajes de texto gratis a celulares telcel
- Elie Cottage en Ventajas y desventajas de tener un blog gratis
Estimado.
Podrias colocar un post mas completo no solo un copy paste de la información original.
Saludos.,