jQuery步骤表单组件
jQuery 的步骤组件，用起来是真的挺顺的，尤其做多步骤表单或者流程向导的时候，方便、省事、还挺稳。建议你直接用jQuery 1.10.2，别用老版本，像 1.8.3 就不太行，会有兼容性问题。结构也简单，h1当标题，section当内容，一步一步展示，逻辑清楚，用户体验也好。
头部先把需要的库和组件文件引入，JS 和 CSS 都别落下。页面结构照着下面写就行：
步骤一
内容一
步骤二
内容二
初始化的时候，直接在$(document).ready里配置：
$("#wizard").steps({
headerTag: "h1",
bodyTag: "section",
transitionEffect: "slideLeft"
});导航样式也挺多，可以换成箭头、按钮啥的，自定义一下navigationTemplate就好。动画效果也能选，比如fade、slide这些，页面切换顺滑不少。
如果表单要验证，记得用onStepChanging和onFinish钩子，跟你的验证逻辑绑一起。进度条是自带的，要改样式也简单，用progressBarType调一调就行。
控制步骤显示隐藏，比如跳步骤、禁用某一步，可以用enable、disable这些 API。常用事件像onInit、onFinished也蛮好用，点自定义逻辑没压力。
样式不好看？直接改 CSS。数据想保存？localStorage、sessionStorage上场。一步要提交给服务器？用 AJAX 发就行。验证失败要提示？用onError搞定。
，用得好，用户体验直接上一个档次。如果你正好做注册流程、问卷、步骤表单那种页面，jQuery 步骤组件真挺合适的。顺手再贴几个资源：
如果你用的是 Vue 项目，又想用这个组件，也不是不行，参考Vue 中集成 jQuery 的步骤，折腾一下就能跑。
文件大小：52.78KB
评论区