最近项目中需要用到前台类似于向导的功能，在网上查了下发现 Jquery wizard挺适合的。
官方地址：http://thecodemine.org/ 包含演示效果和源代码
我用到的知识点：
我的需求是只需要向导功能，并不需要“Submit,Action”等form的功能， 所以form不需要写action的地址，submit也需要稍微处理下
第一个wizard子项 id="first"，非第一个wizard项的id可随意指定
wizard项不必是demo中的span，但必须指定 class="step"
如需要加些验证功能，可以和jquery validation一起使用
自己的demo代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/bbq.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
<script type="text/javascript">
$(function () {
$("#wizard").formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput: true,
formOptions: {
success: function (data) { },
beforeSubmit: function (data) {
alert(data.toLocaleString()); //不需要from默认提交的方法 ，在此自己处理
},
dataType: 'json',
resetForm: true
}
});
$("#back").click(function () {
$("#wizard").formwizard("back");
});
$("#next").click(function () {
$("#wizard").formwizard("next");
});
});
</script>
</head>
<body>
<form id="wizard" action="#">
<div id="first" class="step">
<label for='username'>
用户名：</label>
<input id='username' name='username' />
<br />
<label for='password'>
密码：</label>
<input id='password' name='password' />
<br />
</div>
<div id="wizardItem2" class="step">
<label for='username2'>
用户名：</label>
<input id='username2' name='username2' />
<br />
<label for='password2'>
密码：</label>
<input id='password2' name='password2' />
<br />
</div>
<div id="wizardItem3" class="step">
<label for='username3'>
用户名：</label>
<input id='username3' name='username3' />
<br />
<label for='password3'>
密码：</label>
<input id='password3' name='password3' />
<br />
</div>
</form>
<div>
<button id="back">上一步 </button>
<button id="next">下一步</button>
</div>
</body>
</html>