简单的总结JquerySteps的使用:
第一步:
下载JquerySteps的js和css,地址:http://www.jquery-steps.com/GettingStarted#download
(可以参考的翻译过的中文版本JquerySetps.js)https://download.csdn.net/download/qq_42715494/10800815
第二步:
将解压后的文件导入到项目中,并在自己的jsp文件中引用
第三步:
导入HTML代码样板:
<div class="content">
<div id="wizard">
<h2>申请信息</h2>
<section>
// 内容区
</section>
<h2>云资源信息</h2>
<section>
// 内容区
</section>
<h2>远程账号信息</h2>
<section>
// 内容区
</section>
</div>
</div>
JS代码:
简化版:
$(function (){
/*简化版*/
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
同比上面简化版代码,下面代码中添加了自己要用的属性和事件:
$(function (){
/*启动步骤 常用的属性 和事件,或者可以从JS文件中选用自己要用到的属性 和事件重写赋值*/
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
onStepChanging:function(){/*步骤更改之前进行验证,默认验证结果是true*/
alert('步骤更改之前进行验证');
return true;/*验证结果*/
},
onStepChanged:function(){/*切换section显示区后 触发的函数 */
//alert('步骤后变更');
},
onFinishing:function () {/*点击 finish 前 触发的事件,默认验证结果是false */
alert('提交前');
return true;/*验证结果*/
},
onFinished:function () {/*点击 finish 后触发的事件*/
alert('提交后');
}
});
这样就可以启动,基本使用了,JquerySteps.js文件中就是定义 这些属性 和事件的集合文件,也可以去文件中查找自己需要的