第五章第四节作业求助

刘其润

不知道为什么，怎么弄都是这个样子，谁能告诉我正确的步骤和操作。
正确的界面应该是这样：

刘其润

可是我的界面是这样的

刘其润

我的操作是这样的
首先 我在目录名.html最上方添加这些：
<article bh-layout-role="single" id="bhStepWizard">
    <h2>步骤向导 bhStepWizard</h2>
    <section>
        <div class="e2e-opt">
                <button class="bh-btn bh-btn-default" data-action="isLastStep" title="当前是否为最后一个">isLastStep</button>
            <button class="bh-btn bh-btn-default" data-action="activePrevItem" title="上一项">activePrevItem</button>
            <button class="bh-btn bh-btn-default" data-action="activeNextItem" title="下一项">activeNextItem</button>
            <button class="bh-btn bh-btn-default" data-action="changeToActive" title="激活第一个">changeToActive</button>
            <button class="bh-btn bh-btn-default" data-action="changeToFinished" title="将当前状态变为完成">changeToFinished</button>
            <button class="bh-btn bh-btn-default" data-action="getFinishedIndexs" title="获取已完成的编号">getFinishedIndexs</button>
            <button class="bh-btn bh-btn-default" data-action="getStepIdByIndex" title="根据stepID获取index">getStepIdByIndex</button>
            <button class="bh-btn bh-btn-default" data-action="resetFinishedItems" title="设置完成项">resetFinishedItems</button>
            <button class="bh-btn bh-btn-default" data-action="resetWidth" title="重新设置宽度">resetWidth</button>
            <button class="bh-btn bh-btn-default" data-action="deleteItem" title="删除项">deleteItem</button>
            <button class="bh-btn bh-btn-default" data-action="showItem" title="显示项">showItem</button>
            <button class="bh-btn bh-btn-default" data-action="hideItem" title="隐藏项">hideItem</button>
            <button class="bh-btn bh-btn-default" data-action="getActiveItem" title="获取当前激活项的stepID">getActiveItem</button>
        </div>
        <mark>
            返回状态
        </mark>
        <div class="bh-mv-16">
            <div class="bh-wizard bh-mt-16" id="control"></div>
            <div class="container bh-clearfix">
                <div id="step1">
                    步骤向导-1-内容
                </div>
                <div id="step2">
                    步骤向导-2-内容
                </div>
                <div id="step3">
                    步骤向导-3-内容
                </div>
                <div id="step4">
                    步骤向导-4-内容
                </div>
                <div id="step5">
                    步骤向导-5-内容
                </div>
                <div id="step6">
                    步骤向导-6-内容
                </div>
            </div>
        </div>
        
    </section>
</article>

刘其润

然后在目录名.js里添加函数：
_initbhStepWizard:function(){
            var $scope = $("#bhStepWizard");
            var $control = $("#control", $scope);
            var $result = $("mark", $scope);

            $control.bhStepWizard({
                items: [//必填, 步骤参数集合 可以有title,stepId,active,finished字段
                    { stepId: "step1", title: "步骤向导在这里是第一步-1" },
                    { stepId: "step2", title: "步骤向导在这里是第二步-2" },
                    { stepId: "step3", title: "步骤向导在这里是第三步-3" },
                    { stepId: "step4", title: "步骤向导-4" },
                    { stepId: "step5", title: "步骤向导-5" },
                    { stepId: "step6", title: "步骤向导-6" }
                ],
                active: "step3",//可选, 当前激活项的stepId
                contentContainer: $(".container", $scope),//可选, 正文的容器选择器,默认值为$("body")
                finished: ['step2'], //可选, 当前已完成项的stepId数组,默认值为[]
                isAddClickEvent: true, //可选, 步骤条是否可点,默认值为true
                change: function () { } //可选, 焦点项变化的回调,默认值为null
            });

            $scope.on('click', '[data-action]', function (e) {
                var $target = $(e.target);
                $result.text("");
                var stepid = $control.bhStepWizard("getActiveItem");
                var action = $target.attr("data-action");
                switch (action) {
                    case "isLastStep":
                        var isLastStep = $control.bhStepWizard("isLastStep");
                        $result.text(isLastStep);
                        break;
                    case "changeToActive":
                        $control.bhStepWizard("changeToActive", "step1");
                        break;
                    case "changeToFinished":
                        $control.bhStepWizard("changeToFinished", stepid);
                        break;
                    case "getStepIdByIndex":
                        $result.text($control.bhStepWizard("getStepIdByIndex", 1));
                        break;
                    case "getFinishedIndexs":
                        $result.text($control.bhStepWizard("getFinishedIndexs"));
                        break;
                    case "resetFinishedItems":
                        $control.bhStepWizard("resetFinishedItems", [stepid]);
                        break;
                    case "deleteItem":
                        $control.bhStepWizard("deleteItem", stepid);
                        break;
                    case "showItem":
                        $control.bhStepWizard("showItem", stepid);
                        break;
                    case "hideItem":
                        $control.bhStepWizard("hideItem", stepid);
                        break;
                    default:
                        $control.bhStepWizard(action);
                        break;
                }
并且在initview函数里初始化

刘其润

然后就这样子了，为什么啊，难道也要在_initbhStepWizard函数里的最下方 进行实例化？？？求正确的步骤和操作

刘其润

然后我又在基本信息目录下新建了bhStepWizard.js文件
把这些加进去
var $scope = $("#bhStepWizard");
             var $control = $("#control", $scope);
             var $result = $("mark", $scope);
……
   default:
                         $control.bhStepWizard(action);
                         break;
                 }
还是不行

funfunwu

刘其润 发表于 2017-3-1 17:57
然后我又在基本信息目录下新建了bhStepWizard.js文件
把这些加进去
var $scope = $("#bhStepWizard");

组件基本使用方式没掌握，html只需要bhStepWizard一个层即可，所有步骤组件根据配置渲染

刘其润

funfunwu 发表于 2017-3-1 18:27
组件基本使用方式没掌握，html只需要bhStepWizard一个层即可，所有步骤组件根据配置渲染
...

我把默认文件里的注释去掉，突然就可以了。。。。。组件的视频我看了不下5遍。。。视频的内容太少感觉 。。。虽然出来了还是有点懵逼。。

funfunwu

关键的问题不是注释去不去掉，你对前端页面加载组件渲染的逻辑还没有理解，JQuery要先掌握哦