基于jquery实现一个滚动的分步注册向导-附源码

先给大家展示效果图，需要的朋友可以下载源码哦~

查看演示下载源码

超文本标记语言

首先要载入jquery库和滚动插件可滚动的。射流研究…

脚本类型=' text/JAVAScript ' src=' http : jquery。js /脚本脚本类型=' text/JAVAScript ' src=' http : crollable。js /脚本接着构造超文本标记语言主体结构。

表单操作='# '方法=' post ' div id=' wizard ' ul id=' status ' Li class=' active ' strong 1 ./strong创建账户/李莉列表2。/strong填写联系信息/李莉列表3。/strong完成/Li/ul div class=' items ' div class=' page '-任意超文本标记语言内容- div class='btn_nav '输入类型='button' class='next right '值='下一步//div/div class=' page '-任意超文本标记语言内容- div class='btn_nav '输入类型=' button ' class=' prev ' style=' float 3360 left ' value='上一步/input type=' button ' class=' next right ' value='下一步//div/div class=' page '-任意超文本标记语言内容- div class='btn_nav '输入类型=' button ' class=' prev ' style=' float 3360 左“值=”上一步/input type=' button ' class=' next right ' id=' sub ' value='确定//div/div/表格以上是一个注册表单，注意在三个。页，面，张，版里可以填写任何你想要的超文本标记语言表单内容。限于篇幅本文没有列出表单具体内容。

半铸钢钢性铸铁(铸造半钢)

#向导{边框：5 px实心# 789；font-size :12 px高度：450 px余量：20px汽车；宽度宽度：570像素飞越：隐藏；位置：相对；} #向导。项目{ width :20000 pxclear : both位置：绝对；} #向导。右{浮动：右} #向导#状态{高：35px背景： # 123;衬垫-左侧：25px！重要；} #状态li { float : leftcolor : # fffpadding :10 px 30px } #状态Li。活动{底色： # 369；字体粗细：正常；} .输入{ width :240 pxh three :18 pxmargin 336010 px汽车；线高：20 pxborder:1px固体# d3d 3d padd :2 px } .第{ padd :20 px30px }页宽度宽度width:500pxfloat:left }。第h3页{ height :42 px font-size :16 px；边框-底部：1px虚线# ccc边距-底部：20 px衬垫-底部：5px} .第h3页em { font-size :12 px字体粗细：500；font-style:normal} .第p页{行高：24 px} .页面p标签{ font-size :14 px显示：块；} .btn _ nav { height:36px线高：36 px余量：20px汽车；} .上一个。下一个{ width :100 pxh three :32 px线高：32 px背景：网址(BTN _ BG。gif)重复-x底部；border:1px固体# d3d3d3光标：指针}您可以根据实际应用环境修改css，来体现不同的外观。

jQuery

毋庸置疑，和其他插件一样，直接调用方法。

$(function(){ $(“# wizard”)).可滚动();});就是这么简单，现在可以通过单击下一步切换步骤了，但有问题是导航的步骤标题标签样式没有同时切换，点击下一步时应该验证当前表单输入的合法性。值得庆幸的是，两个方法使得问题变得很简单了。

onSeek:function()；当滚动当前页，面，张，版后发生的事情，本例中我们要切换标签样式onBeforeSeek:function()；滚动之前发生的事情，本例中我们要验证表单。

请看代码：

$(function(){ $(“# wizard”)).可滚动({ onSeek:函数（事件，i){ //切换标签样式$(' #状态李' .removeClass("活动")。方程式(I ).添加CLaSS(' active ')；}，OnBeforeSeek : FuncTion(事件，i){ //验证表单if(i==1){ var user=$('#user ').val()；if(user==''){ alert('请输入用户名!');返回false} var pass=$('#pass ').val()；var pass1=$('#pass1 ').val()；if(pass==''){ alert('请输入密码!');返回false} if(pass1！=pass){ alert('两次密码不一致!');返回false } } })；});最后，要提交表单，获取表单的值，你可以在最后一步"确定"按钮上绑定提交()方法，通过行为提交表单。本文为了演示，采用以下方法获取输入的内容：

$('#sub ').单击(函数(){ var data=$('form ')).serialize()；警报（数据);});