jquery step使用

---

title: jquery学习
date: 2019-12-09

原本在个人博客上写了一些博文，现转移到CSDN上

jquery step使用

jquery step是jquery的一个插件，用于表示进度。

• step页面引入

 <link rel="stylesheet" type="text/css" stemedia="screen" href="/static/css/other/jquery-steps.css"/>
 <script type="text/javascript" src="/static/js/common/jquery-steps.js"></script>

<!-- 引入step -->
<div class="step" id="step">
   <div class="step-app">
      <ul class="step-steps text-center">

        <li>
            <a href="#step1">Theme Info</a>
        </li>
        <li>
            <a href="#step2">Models</a>
        </li>
        <li>
            <a href="#step3">Data</a>
        </li>
        <li>
            <a href="#step4">Applications</a>
        </li>

      </ul>
      <!-- step的内容 -->
      <div class="step-content">
         <div class="step-tab-panel" id="step1">
         ...
      </div>
      <div class="step-content">
         <div class="step-tab-panel" id="step2">
         ...
      </div>
      <div class="step-content">
         <div class="step-tab-panel" id="step3">
         ...
      </div>
      <div class="step-content">
         <div class="step-tab-panel" id="step4">
         ...
      </div>
<!-- step footer部分 -->
      <div class="step-footer text-right">
         <button class="btn btn-warning prev" data-direction="prev">
              Previous
          </button>
          <button class="btn btn-success finish" data-direction="finish">
               Finish
          </button>
      </div>
    </div>
</div>

以上代码中，step-footer里的按钮，可以在自己写的js中未设置的情况下执行相应的向前、向后、结束的功能，也可以根据这些class自己加相应的需要的各种功能

• 加 未输入某些必须部分而无法下一步的功能（逻辑控制）
  

$(".step").steps({

            onFinish: function () {
                alert('complete');
            },
            <!-- currentIndex为当前处于的step的标号 newIndex为下一步step标号，stepdirection可选则forword来判断是否步骤为向前 -->
            onChange: function (currentIndex, newIndex, stepDirection) {
                if (currentIndex === 0) {
                    if (stepDirection === "forward") {
                      <!-- 可在句子中加入是否输入名称的判断语句 -->
                        if ($("#nameInput").val().length == 0) {
                            alert('Please Input Theme Name!');
                            return false;
                        } else {
                            return true;
                        }
                    }
                }

                if (currentIndex === 1) {
                    if (stepDirection === "forward") {
                        if (that.themeObj.classinfo.length==1&&that.themeObj.classinfo[0].mcname==""&&that.themeObj.classinfo[0].modelsoid.length==0){
                            return true
                        } else{
                          <!-- 遍历数组，如果有一项未填，则return false，不跳入下一步 -->
                            for (i = 0; i < that.themeObj.classinfo.length; i++) {
                                if (that.themeObj.classinfo[i].mcname == "" || that.themeObj.classinfo[i].modelsoid.length == 0) {
                                    alert("Please complete the information");
                                    return false;
                                }
                            }
                        }
                        return true;
                    }
                }if (currentIndex === 2) {
                    if (stepDirection === "forward") {
                        if (that.themeObj.dataClassInfo.length==1&&that.themeObj.dataClassInfo[0].dcname==""&&that.themeObj.dataClassInfo[0].datasoid.length==0){
                            return true;
                        } else {
                            for (i = 0; i < that.themeObj.dataClassInfo.length; i++) {
                                if (that.themeObj.dataClassInfo[i].dcname == "" || that.themeObj.dataClassInfo[i].datasoid.length == 0) {
                                    alert("Please complete the information");
                                    return false;
                                }
                            }
                        }
                        return true;
                    }
                }
                if (currentIndex === 3) {
                  <!-- return true表示不判断，直接可执行下一步 -->
                    return true;
                }
            }
        });

这些便是jquery中用的step插件，element ui中也有一些好用的step功能可供选择