论坛首页新手上路 签到
查看: 5169|回复: 8

第五章第四节作业求助

[复制链接]
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
发表于 2017-3-1 17:29:40 | 显示全部楼层 |阅读模式
不知道为什么,怎么弄都是这个样子,谁能告诉我正确的步骤和操作。
正确的界面应该是这样:

2.png
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
 楼主| 发表于 2017-3-1 17:30:38 | 显示全部楼层
可是我的界面是这样的
1.png
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
 楼主| 发表于 2017-3-1 17:31:42 | 显示全部楼层
我的操作是这样的
首先 我在目录名.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>
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
 楼主| 发表于 2017-3-1 17:33:10 | 显示全部楼层
然后在目录名.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函数里初始化
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
 楼主| 发表于 2017-3-1 17:34:32 | 显示全部楼层
然后就这样子了,为什么啊,难道也要在_initbhStepWizard函数里的最下方 进行实例化???求正确的步骤和操作
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
 楼主| 发表于 2017-3-1 17:57:29 | 显示全部楼层
然后我又在基本信息目录下新建了bhStepWizard.js文件
把这些加进去
var $scope = $("#bhStepWizard");
             var $control = $("#control", $scope);
             var $result = $("mark", $scope);
……
   default:
                         $control.bhStepWizard(action);
                         break;
                 }
还是不行
金智教育-吴

签到天数: 15 天

[LV.4]

43

主题

148

帖子

235

积分

版主

Rank: 7Rank: 7Rank: 7

积分
235
发表于 2017-3-1 18:27:15 | 显示全部楼层
刘其润 发表于 2017-3-1 17:57
然后我又在基本信息目录下新建了bhStepWizard.js文件
把这些加进去
var $scope = $("#bhStepWizard");

组件基本使用方式没掌握,html只需要bhStepWizard一个层即可,所有步骤组件根据配置渲染
南京工业大学-刘其润

签到天数: 2 天

[LV.1]

4

主题

18

帖子

22

积分

初来乍到

Rank: 1

积分
22
 楼主| 发表于 2017-3-1 19:48:00 | 显示全部楼层
funfunwu 发表于 2017-3-1 18:27
组件基本使用方式没掌握,html只需要bhStepWizard一个层即可,所有步骤组件根据配置渲染
...

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

签到天数: 15 天

[LV.4]

43

主题

148

帖子

235

积分

版主

Rank: 7Rank: 7Rank: 7

积分
235
发表于 2017-3-2 14:06:31 | 显示全部楼层
本帖最后由 funfunwu 于 2017-5-12 14:48 编辑

关键的问题不是注释去不去掉,你对前端页面加载组件渲染的逻辑还没有理解,JQuery要先掌握哦
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

Archiver|手机版|小黑屋|江苏金智教育信息股份有限公司 ( 系统管理员:binmeng@wisedu.com  

GMT+8, 2021-3-6 07:05

Powered by Discuz! X3.2

© 2015 Design: www.wisedu.com

快速回复 返回顶部 返回列表