基于jQuery的滚动步进注册向导的实现-源代码

先给你看效果图，需要的朋友可以下载源码。

查看演示下载源码

HTML

首先，jQuery库和滚动插件scrollable.js应装


然后构建了HTML的主要结构。
1。创建一个帐户
2。填写联系信息
三.完成

----任何HTML内容----
----任何HTML内容----

----任何HTML内容----


以上为报名表。注意，你可以填写你想要的文字three.page.limited任何HTML形式的内容，本文没有列出表格的具体内容。

CSS
#向导{边界：5px固体# 789；字体大小：12px；身高：450px；保证金：20px汽车；
宽度：570px；溢出：隐藏；位置：相对；}
#向导。项目{宽度：20000px；明确：两；位置：绝对的；}
#向导。右{浮动权；}
#向导#状态{身高：35px；背景：# 123；填充左：25px！重要的；}
#状态里{浮动：左；颜色：# FFF；填充：10px 30px；}
#状态里。主动{背景颜色：# 369；字体重量：正常；}
输入{宽度：240px；身高：18px；保证金：10px汽车；线高度：20px；
边境：1px solid # d3d3d3；填充：2px }
。页{填充：20px 30px；宽度：500px；浮动：左；}
。页面H3 {身高：42px；字体大小：16px底部边框：1px；点缀# CCC；margin-bottom: 20px；
座垫：5px }
。页面H3 EM {字体大小：12px；字体重量：500；字体样式：正常}
。页P {线高度：24px；}
。页P标签{字体大小：14px；显示：块；}
。btn_nav {身高：36px；线高度：36px；保证金：20px汽车；}
。昨日，接下来{宽度：100px；身高：32px；线高度：32px；背景：URL（btn_bg .webp）
repeat-x底；边框1px solid # d3d3d3；鼠标指针}
您可以根据实际应用环境修改CSS，以反映不同的外观。

jQuery

毫无疑问，与其他插件一样，该方法直接调用。

$（函数（）{（））
$（#向导）的Scrollable（）；
}）；
很简单。现在我们可以单击下一步进行切换，但是有一个问题，即导航步骤的选项卡不能同时切换。接下来，我们应该验证当前表单输入的合法性，幸运的是，这两种方法使问题变得非常简单。

OnSeek：函数（）；当你把当前页，在这种情况下，我们切换标签风格。

OnBeforeSeek：函数（）；轧制前发生了什么，在这种情况下，我们要验证的形式。

请看代码：

$（函数（）{（））
$（#向导）。Scrollable（{
OnSeek：功能（事件、我）{ / /选项卡式开关
$（#状态里），RemoveClass（主动）。Eq（我），AddClass（主动）；
}，
OnBeforeSeek：功能（事件、我）{ / /核销单
如果（i = 1）{
用户= $（var#用户）的瓦迩（）；
如果（用户= ）{
警报（请输入用户名）！；
返回false；
}
VaR通过=美元（#通）的瓦迩（）；
var = $（#第一遍扫描第一遍扫描）。瓦迩（）；
如果（传递= ）{
警报（请输入密码）！；
返回false；
}
如果（第一遍扫描！=传递）{
警报（）两个密码不一致！；
返回false；
}
}
}
}）；
}）；
最后，提交表单以获得表单的值，您可以在按钮的最后一步绑定提交（）方法并通过动作提交表单：

$（#子）。Click（function（）{）
Var data = $(form).Serialize ();
警报（数据）；
}）；