jQuery Wizard Form Demo
Demo
Source
<script type="text/javascript" src="/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/jquery.wizard.js"></script>
<script type="text/javascript">
$().ready(function(){
$("form.wizard").wizard({
show: function(element) {
if($(element).is("#LastPage"))
alert("Last page! Woo!");
}
});
});
</script>
<style type="text/css">
.wizard-nav
{
padding: 10px 0;
border: 1px solid #ddd;
width: 650px;
margin: 10px auto;
}
.wizard-nav a
{
background: #eee;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
text-decoration: none;
padding: 10px;
width: 162.5px;
display: inline;
margin: 0;
}
.wizard-nav a.active { background: #dfd; }
.wizardcontrols .wizardnext { margin-left: 76%; width: 12%; }
.wizardcontrols .wizardprev { width: 12%; }
#FirstPage .wizardcontrols .wizardnext { margin-left: 88%; }
</style>
<form class="wizard" action="#" method="post">
<div id="FirstPage" class="wizardpage">This</div>
<div id="SecondPage" class="wizardpage">is</div>
<div id="ThirdPage" class="wizardpage">a</div>
<div id="LastPage" class="wizardpage">wizard</div>
<div class="wizard-nav">
<a href="#FirstPage">Do some stuff</a> >>
<a href="#SecondPage">Then some more</a> >>
<a href="#ThirdPage">Almost there...</a> >>
<a href="#LastPage">Finish!</a>
</div>
</form>
No TrackBacks
TrackBack URL: http://www.sagecraft-studios.com/mt-tb.cgi/9
Hey glompix,
I really like the idea behind this demo, and ideas are what's important. If I might suggest some future features, maybe allow spacers to be set through CSS, text, or url (image). Also, making the back and next buttons optional would be great too (since you'd have some sort of form submission or something actionable of that sort propel the user into the next step).
Great post! Thanks for taking the time!
-s
interesting , but try it in safari or chrome. Just doesn't work. Css problem i think , or Hide() show()...
Great plugin!
I was trying to adapt the wire to a ul/li structure instead of divs and have found this works better with the .prev() and .next() put as follow:
wizardnav.children("li").children('a[href="#' + wizardpage.prev().attr('id') + '"]').addClass('active', 'slow'); });wizardnav.children("li").children('a[href="#' + wizardpage.next().attr('id') + '"]').addClass('active', 'slow');Am I totally wrong?
O:)
Please, Can I use a jquery form validation (like(http://jquery.bassistance.de/validate/demo/) with your wizzar??
thanks
I don't see why not. I think I actually used that script on the page I originally built this wizard form in some early versions. Users will probably still be able to change pages if there are any errors, but you should be able to check for that (the validation script tags erroneous elements with the .error class iirc)
Interesting and neat, but how would you conquer the browser back button situation? Many users would get x steps into the wizard and click "back" in the browser. At this point you would not go abck one step, you would actually back out of the entire wizard :(
Great point, Brian. I'll definitely think about that, as it might be a concern for the production application I built this thing for in the first place. ;)
hello guys.. I've changed a little this great jquery's plugin. Nothing impressive, but very useful.
you can find an example here:
www.datagenno.com/wizard
any doubt, I'll be glad to help. ;)
It works in Chrome just fine.
Thanks,
Mike
look cool...
It would be okay if it can validate something....
That's what best forms are...
try this http://home.aland.net/sundman/
Nice plugin.
I wanted to add some validation and stop the user from going to the next page if there is any error.
Can anyone provide a sample integrated navigation and validation plugin?
Appreciate your help.
Regards,
Anil
cool plugin. how would you go about creating then wiring a 'Start Over' button at the very end that when clicked would cycle back to the first page?