jquerysteps之基本使用

简单的总结JquerySteps的使用：

第一步：

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

（可以参考的翻译过的中文版本JquerySetps.js）https://download.csdn.net/download/qq_42715494/10800815

第二步：

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

第三步：

导入HTML代码样板：

扫描二维码关注公众号，回复： 5354002 查看本文章

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

jquerysteps之基本使用

猜你喜欢