jquerysteps之基本使用

青旅半醒 2021-09-17 01:48 325阅读 0赞

简单的总结JquerySteps的使用：

第一步：

下载JquerySteps的js和css，地址：http://www.jquery-steps.com/GettingStarted\#download

（可以参考的翻译过的中文版本JquerySetps.js）[https://download.csdn.net/download/qq\_42715494/10800815][https_download.csdn.net_download_qq_42715494_10800815]

第二步：

将解压后的文件导入到项目中，并在自己的jsp文件中引用

![201811211741548.png][]

![2018112117415422.png][]

第三步：

导入**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**文件中就是**定义 这些属性 和事件****的集合文件，也可以去文件中查找自己需要的**

[https_download.csdn.net_download_qq_42715494_10800815]: https://download.csdn.net/download/qq_42715494/10800815
[201811211741548.png]: /images/20210725/38155a04d2374950a7623e843d777eb0.png
[2018112117415422.png]: /images/20210725/bfa7e0c49f464a0ca9ddb9ca92d345b7.png