jQuery Wizard Redux
I was interested in creating a step-by-step form wizard for a Rails app I’ve been working on, so naturally I began searching for a jQuery plugin or tutorial. The best thing I could find was a ‘plugin’ written back in June of 2007 on this blog.
The demo was quite attractive so I immediately began trying to work this implementation into my app. Upon reviewing the source code, I became a little less excited because the markup and styling left a lot to be desired. So instead of just complaining about it in the comments of the blog post (as had become my unfortunate custom), I figured I’d just re-write the thang until I was happy with it.
A few of my redesign goals:
- Eliminate redundant step titles and descriptions
- Remove unneeded styles from Cody Lindley’s CSS step menu
- More jQuery, less HTML
- Use valid markup
- Reduce LOC dramatically
- Comment code well to increase learning/understanding potential
So How’d it turn out? I validated the markup, removed all redundancy, reduced the HTML required from 84 to 21 LOC, the CSS from 191 to 108, and made the JavaScript unobtrusive. As far as the commenting and quality of the JavaScript used, I’ll leave that for you to judge.
To see the wizard in action, follow this link. You can also download all the source files as a zip or tarball.
Feel free to give suggestions in the comments section. Or do as I did and modify my version to make it even better!
Comments
-
Nice man, I like it - allot better then the one I made.
-
Thanks! Please spread the word if others are looking for a solutions.
-
This is really cool, but if you click through the steps fast the rendering behavior is kind of weird, sort of drops down which I didn’t like - Firefox 3.01, OS X 10.5.4
-
Alex: Good point, I guess I never clicked through the steps that fast during my testing. I’ll look into it and see if its something that can be fixed by changing the fade in/out implementation.
Thanks for the feedback!
-
UPDATE:
I fixed the wizard so that the weird effect Alex pointed out doesn’t happen anymore when you click through quickly.
-
It doesn’t work for me: XP FF3
-
hahahahaha - it works fine. I had turned off JS for a project in a different tab.
-
A few months ago I threw a wizard form on the jQuery plugin repository. It behaves a lot like the one you linked to, but is written as a normal jQuery plugin. It acts a lot like jQuery tabs if you’ve ever used that. Styling is one of it’s short points compared to this, as it’s really up to the implementer to provide it.
I just threw up a new version in case you’re interested: http://plugins.jquery.com/project/WizardForm
