jquery 使用自适应步骤条

最新推荐文章于 2023-04-20 14:31:33 发布
最新推荐文章于 2023-04-20 14:31:33 发布
阅读量1.7k 收藏 9
点赞数 3
分类专栏： 步骤条 自适应 文章标签： jquery css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46188775/article/details/123064406
版权

效果图

在这里插入图片描述

先看step.css

/*common css*/
.stepPage{
    display:none;
    height:100%;
}
.stepCont{
    width:100%;
}
.ystep-container {
    font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Wenquanyi Micro Hei","Microsoft Yahei",Arial,sans-serif;
    display: inline-block;
    position: relative;
    color: #000;
    margin: 20px;
}
.ystep-container ul {
    list-style: none;
}
.ystep-container ul,.ystep-container li,.ystep-container p {
    margin: 0;
    padding: 0;
}

/*size css*/
.ystep-lg {
    /*width: 700px;*/
    width:100%;
    height: 60px;
    font-size: 18px;
    /*left: 15%;*/
    line-height: .3;
}

/*large size css*/
.ystep-lg .ystep-container-steps {
    position: absolute;
    top: 2px;
    cursor: pointer;
    z-index: 10;
}
.ystep-lg li {
    float: left;
    width: 100px;
    /*height: 85px;*/
    margin-right: 100px;
    line-height: 23px;
    box-sizing: border-box;

}

.ystep-lg .ystep-progress {
    width: 400px;
    height: 3px;
    position: absolute;
    top: 34px;
    left: 15px;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    background: #C0C4CC;
}
.ystep-lg .ystep-progress-bar {
    width: 400px;
    height: 20px;
    background: #e4e4e4;
    display: inline-block;
    float: left;
}
.ystep-lg .ystep-progress-highlight {
    height: 20px;
    display: block;
}

/*blue css*/
.ystep-blue .ystep-step-done {
    /*background-image: url("./images/pointes_blue.png");
    background-repeat: no-repeat;*/
}
.ystep-blue .ystep-step-undone {
    /*background-image: url("./images/pointes_blue.png");
    background-repeat: no-repeat;
    color: #9c9a9b;*/
}
.ystep-blue .ystep-step-active {
    /*background-image: url("./images/pointes_blue.png");
    background-repeat: no-repeat;*/
    color: #3276b1;
}
.ystep-blue .ystep-progress-highlight {
    background: #60baff;
}
/*按钮样式*/
.ystep {
    padding: 20px;
    /*min-width: 1114px;*/
}
.step-button{
    position: relative;
    /*top: -85px;*/
}
.step-button button{
    margin: 15px;
}
.stepIcon{

}
.ystep-lg .ystep-step-done .stepIcon{
    border: 1px solid #2D5FAD;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    margin-top: 22px;
    margin-left: 8px;
    color: transparent;
    background:#fff url(images/duihao.png) no-repeat 1px 4px;
    background-size: 80%;
}

.ystep-lg .ystep-step-undone .stepIcon{
    border: 1px solid #909399;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    margin-top: 22px;
    margin-left: 8px;
    color:#909399;
    background: #fff;
}
.ystep-lg .ystep-step-active .stepIcon{
    border: 1px solid #303133;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    margin-top: 22px;
    margin-left: 8px;
    color:#303133;
    background: #fff;
}
.ystep-container .descriptionHeader{
    width: 157px;
    margin-top: 5px;
    font-size: 14px;


}
.ystep-container .description{
    width: 120px;
    font-size: 10px;
}



/*****************************竖向步骤条设置**************************/

.stepY .ystep-lg {
    width:160px;
    height: 60px;
    font-size: 18px;
    line-height: .3;
    float: left;
}
.stepY .pageCont{
    width: calc(100% - 210px);
    float: right;
}

.stepY .ystep-lg li {
    width: 150px;
    line-height: 23px;
    box-sizing: border-box;

}

.stepY .ystep-lg .ystep-progress {
    height: 400px;
    width: 3px;
    position: absolute;
    top: 34px;
    left: 17px;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    background: #C0C4CC;
}
.stepY .ystep-lg .ystep-progress-bar {
    width:20px;
    height:400px;
    background: #e4e4e4;
    display: inline-block;
    float: left;
}
.stepY .ystep-lg .ystep-progress-highlight {
    width: 20px;
    display: block;
}

.stepY .ystep-container .descriptionHeader{
    width: 157px;
    margin-top: -22px;
    font-size: 14px;
    float: left;
    margin-left: 35px;

}
.stepY .ystep-container .description{
    width: 120px;
    font-size: 10px;
    float: left;
    margin-left: 35px;
}

.clearfix:after{
    　　　content:"";
    　　　height:0;
    　　　line-height:0;
    　　　display:block;
    　　　visibility:hidden;
    　　　clear:both;
    　}

/*-----------------箭头步骤条------------------*/

.jiantou li{
    margin-right:0px;
    background: #F0F2F5;
}
.jiantou .descriptionHeader{
    float: right;
    width: 120px;
    margin-top: -30px;
    font-size: 14px;
}

.jiantou .tubiao{
    font-size: 30px;
    float: right;
    line-height: 20px;
}

.jiantou .ystep-lg .ystep-step-done .stepIcon{
    border: 1px solid #2D5FAD;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
    color: transparent;
    background:#fff url(images/duihao.png) no-repeat 1px 4px;
    background-size: 80%;
}
.jiantou .ystep-lg .ystep-step-done .descriptionHeader{
    color: #2D5FAD;
}
.jiantou .ystep-lg .ystep-step-undone .stepIcon{
    border: 1px solid #909399;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
    color:#909399;
    background: #F0F2F5;
}
.jiantou .ystep-lg .ystep-step-active .stepIcon{
    border: 1px solid #303133;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
    color:#303133;
    background: #F0F2F5;
}

step.js

/***
 *
 var step3 = new SetStep({
        content: '.stepCont3',
        steps: ['1', '2', '3', '4', '5','6'],           //步骤标题
        descriptionHeader: ['步骤一', '步骤二', '步骤三', '步骤四', '步骤五','步骤五1'],//步骤标题
        description: ['', '', '', '', '',''],   //步骤文本
        //pageClass:'',//分页的类或则id
        curStep: 1, //当前显示第几页
        animating: false,
        showBtn: true, //是否生成上一步下一步操作按钮
        clickAble: true, //是否可以通过点击进度条的节点操作进度
        onLoad: function() {

        }
    })

 //下一步
 step3.nextBtn.click();
 //上一步
 step3.prevBtn.click();
 */

function extend(obj1, obj2) {
    for(var attr in obj2) {
        obj1[attr] = obj2[attr];
    }
}

function SetStep(arg) {
    this.body = document.body;
    this.opt = {
        skin:arg.skin?? 1,
        show: arg.show??false,
        content: arg.content??'.stepCont',
        pageCont: arg.pageCont??'.pageCont',
        imgWidth: arg.imgWidth??20,
        stepContainerMar: arg.stepContainerMar??20,
        nextBtn: arg.nextBtn??'.nextBtn',
        prevBtn: arg.prevBtn??'.prevBtn',
        steps: arg.steps??['1', '2', '3', '4', '5','6'],
        descriptionHeader: arg.descriptionHeader??['步骤一', '步骤二', '步骤三', '步骤四', '步骤五'],
        description: arg.description??['', '', '', '', ''],
        //pageClass:'',//分页的类或则id
        stepCounts: arg.stepCounts??10, //总共的步骤数
        curStep: arg.curStep??1, //当前显示第几页
        animating: arg.animating??false,
        showBtn: arg.showBtn??true, //是否生成上一步下一步操作按钮
        clickAble: arg.clickAble??true, //是否可以通过点击进度条的节点操作进度
        onLoad:arg.onLoad??function() {

        }
    };

    var options = $.extend({}, this.opt, arg);

    switch(options.skin) {
        case 1:
            this.init(arg);
            break;
        case 2:
            $(options.content).addClass("stepY");
            this.initY(arg);
            break;
        case 3:
            $(options.content).addClass("jiantou");
            this.initJanTou(arg);
            break;
        default:
            this.init(arg);
    }

}

//初始化 生成页面的进度条和按钮  箭头
SetStep.prototype.initJanTou = function(arg) {
    var _that = this;
    extend(this.opt, arg);
    this.opt.stepCounts = this.opt.steps.length;
    this.content = $(this.opt.content);
    this.pageCont = this.content.find(this.opt.pageCont);
    var w_con = $(this.content).width();
    var w_li = (w_con - this.opt.stepContainerMar * 2) / this.opt.stepCounts / 2;

    var stepContainer = this.content.find('.ystep-container');

    this.stepContainer = stepContainer;
    var stepsHtml = $("<ul class='ystep-container-steps'></ul>");
    var stepDisc = "<li class='ystep-step ystep-step-undone'></li>";
    var stepP = $("<div class='ystep-progress'>" +
        "<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>" +
        "</div>");
    var stepButtonHtml = $("<div class='step-button'><button type='button' class='btn btn-default prevBtn' id='prevBtn' class='prevBtn'>上一步</button>" +
        "<button type='button' class='btn btn-default nextBtn' id='nextBtn' class='nextBtn'>下一步</button></div>");
    stepP.css('width', w_li * 2 * (this.opt.stepCounts - 1));
    stepP.find('.ystep-progress-bar').css('width', w_li * 2 * (this.opt.stepCounts - 1))
    for(var i = 0; i < this.opt.stepCounts; i++) {
        if(i == 0) {
            var _s = $(stepDisc).html('<span class="stepIcon">' + this.opt.steps[i] + '</span><span class="descriptionHeader">' + this.opt.descriptionHeader[i] + '<i class="fa fa-angle-right tubiao"></i></span>').addClass('')
        } else {
            var _s = $(stepDisc).html('<span class="stepIcon">' + this.opt.steps[i] + '</span><span class="descriptionHeader">' + this.opt.descriptionHeader[i] + '<i class="fa fa-angle-right tubiao"></i></span>')
        }
        stepsHtml.append(_s);
    }
    stepsHtml.find('li').css('width', w_li * 2).css("padding-left", "60px")
    stepContainer.append(stepsHtml).append(stepP);

    stepContainer.css('left', (w_con - stepP.width() - this.opt.imgWidth - 10 - this.opt.stepContainerMar * 2) / 2 - 120)
    stepContainer.css('height', stepsHtml.height() - 20);

    this.content.css('overflow', 'hidden')
    this.setProgress(this.stepContainer, this.opt.curStep, this.opt.stepCounts)
    //判断参数 是否显示按钮 并绑定点击事件
    if(this.opt.showBtn) {
        this.content.append(stepButtonHtml)
        this.prevBtn = this.content.find(this.opt.prevBtn)
        this.nextBtn = this.content.find(this.opt.nextBtn)
        this.prevBtn.on('click', function() {
            // if($(this).hasClass('handleAble')){
            if($(_that).attr('disabled') || _that.opt.animating) {
                return false;
            } else {
                _that.opt.animating = true;
                _that.opt.curStep--;
                _that.setProgress(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
            }
        })
        this.nextBtn.on('click', function() {
            // if($(this).hasClass('handleAble')){
            if($(_that).attr('disabled') || _that.opt.animating) {
                return false;
            } else {
                _that.opt.animating = true;
                _that.opt.curStep++;
                _that.setProgress(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
            }
        })
    }
    //判断时候可点击进度条 并绑定点击事件
    if(this.opt.clickAble) {
        stepsHtml.find('li').on('click', function() {
            _that.opt.curStep = $(this).index() + 1;
            _that.setProgress(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
        })
    }
    $(window).resize(function() {
        var w_con = $(_that.content).width();
        var w_li = w_con / _that.opt.stepCounts / 2;
        stepP.css('width', w_li * 2 * (_that.opt.stepCounts - 1));
        stepP.find('.ystep-progress-bar').css('width', w_li * 2 * (_that.opt.stepCounts - 1))
        stepsHtml.find('li').css('width', w_li * 2).css("padding-left", "60px")
        // stepContainer.css('left',(w_con-stepP.width()-_that.opt.imgWidth-10-_that.opt.stepContainerMar*2)/2)
        stepContainer.css('left', (w_con - stepP.width() - _that.opt.imgWidth - 10 - _that.opt.stepContainerMar * 2) / 2 - 120)
    })
}

//初始化 生成页面的进度条和按钮x
SetStep.prototype.init = function(arg) {
    var _that = this;
    extend(this.opt, arg);
    this.opt.stepCounts = this.opt.steps.length;
    this.content = $(this.opt.content);
    this.pageCont = this.content.find(this.opt.pageCont);
    var w_con = $(this.content).width();
    var w_li = (w_con - this.opt.stepContainerMar * 2) / this.opt.stepCounts / 2;

    var stepContainer = this.content.find('.ystep-container');

    this.stepContainer = stepContainer;
    var stepsHtml = $("<ul class='ystep-container-steps'></ul>");
    var stepDisc = "<li class='ystep-step ystep-step-undone'></li>";
    var stepP = $("<div class='ystep-progress'>" +
        "<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>" +
        "</div>");
    var stepButtonHtml = $("<div class='step-button'><button type='button' class='btn btn-default prevBtn' id='prevBtn' class='prevBtn'>上一步</button>" +
        "<button type='button' class='btn btn-default nextBtn' id='nextBtn' class='nextBtn'>下一步</button></div>");
    stepP.css('width', w_li * 2 * (this.opt.stepCounts - 1));
    stepP.find('.ystep-progress-bar').css('width', w_li * 2 * (this.opt.stepCounts - 1))
    for(var i = 0; i < this.opt.stepCounts; i++) {
        if(i == 0) {
            var _s = $(stepDisc).html('<span class="stepIcon">' + this.opt.steps[i] + '</span><p class="descriptionHeader">' + this.opt.descriptionHeader[i] + '</p><div class="description">' + this.opt.description[i] + '</div>').addClass('')
        } else {
            var _s = $(stepDisc).html('<span class="stepIcon">' + this.opt.steps[i] + '</span><p class="descriptionHeader">' + this.opt.descriptionHeader[i] + '</p><div class="description">' + this.opt.description[i] + '</div>')
        }
        stepsHtml.append(_s);
    }
    stepsHtml.find('li').css('width', '40px').css('marginRight', w_li * 2 - 40)
    stepContainer.append(stepsHtml).append(stepP);

    stepContainer.css('left', (w_con - stepP.width() - this.opt.imgWidth - 10 - this.opt.stepContainerMar * 2) / 2)
    stepContainer.css('height', stepsHtml.height() - 25);

    this.content.css('overflow', 'hidden')
    this.setProgress(this.stepContainer, this.opt.curStep, this.opt.stepCounts)
    //判断参数 是否显示按钮 并绑定点击事件
    if(this.opt.showBtn) {
        this.content.append(stepButtonHtml)
        this.prevBtn = this.content.find(this.opt.prevBtn)
        this.nextBtn = this.content.find(this.opt.nextBtn)
        this.prevBtn.on('click', function() {
            // if($(this).hasClass('handleAble')){
            if($(_that).attr('disabled') || _that.opt.animating) {
                return false;
            } else {
                _that.opt.animating = true;
                _that.opt.curStep--;
                _that.setProgress(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
            }
        })
        this.nextBtn.on('click', function() {
            // if($(this).hasClass('handleAble')){
            if($(_that).attr('disabled') || _that.opt.animating) {
                return false;
            } else {
                _that.opt.animating = true;
                _that.opt.curStep++;
                _that.setProgress(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
            }
        })
    }
    //判断时候可点击进度条 并绑定点击事件
    if(this.opt.clickAble) {
        stepsHtml.find('li').on('click', function() {
            _that.opt.curStep = $(this).index() + 1;
            _that.setProgress(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
        })
    }
    $(window).resize(function() {
        var w_con = $(_that.content).width();
        var w_li = w_con / _that.opt.stepCounts / 2;
        stepP.css('width', w_li * 2 * (_that.opt.stepCounts - 1));
        stepP.find('.ystep-progress-bar').css('width', w_li * 2 * (_that.opt.stepCounts - 1))
        stepsHtml.find('li').css('width', '40px').css('marginRight', w_li * 2 - 40)
        stepContainer.css('left', (w_con - stepP.width() - _that.opt.imgWidth - 10 - _that.opt.stepContainerMar * 2) / 2)
    })
}

//初始化 生成页面的进度条和按钮Y
SetStep.prototype.initY = function(arg) {
    var _that = this;
    extend(this.opt, arg);
    this.opt.stepCounts = this.opt.steps.length;
    this.content = $(this.opt.content);
    this.pageCont = this.content.find(this.opt.pageCont);
    var w_con = $(this.content).width();
    var h_con = $(this.content).height();
    console.log(h_con, w_con)
    var w_li = (w_con - this.opt.stepContainerMar * 2) / this.opt.stepCounts / 2 - 60;
    var h_li = (h_con - this.opt.stepContainerMar * 2) / this.opt.stepCounts / 2;
    var stepContainer = this.content.find('.ystep-container');
    this.stepContainer = stepContainer;
    var stepsHtml = $("<ul class='ystep-container-steps'></ul>");
    var stepDisc = "<li class='ystep-step ystep-step-undone'></li>";
    var stepP = $("<div class='ystep-progress'>" +
        "<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='height:0%'></span></p>" +
        "</div>");
    var stepButtonHtml = $("<div class='step-button'><button type='button' class='btn btn-default prevBtn' id='prevBtn' class='prevBtn'>上一步</button>" +
        "<button type='button' class='btn btn-default nextBtn' id='nextBtn' class='nextBtn'>下一步</button></div>");
    stepP.css('height', w_li * 2 * (this.opt.stepCounts - 1));
    stepP.find('.ystep-progress-bar').css('height', w_li * 2 * (this.opt.stepCounts - 1))
    for(var i = 0; i < this.opt.stepCounts; i++) {
        if(i == 0) {
            var _s = $(stepDisc).html('<span class="stepIcon">' + this.opt.steps[i] + '</span><p class="descriptionHeader">' + this.opt.descriptionHeader[i] + '</p><div class="description">' + this.opt.description[i] + '</div>').addClass('')
        } else {
            var _s = $(stepDisc).html('<span class="stepIcon">' + this.opt.steps[i] + '</span><p class="descriptionHeader">' + this.opt.descriptionHeader[i] + '</p><div class="description">' + this.opt.description[i] + '</div>')
        }
        stepsHtml.append(_s);
    }
    stepsHtml.find('li').css('height', '40px').css('marginBottom', w_li * 2 - 40)
    stepContainer.append(stepsHtml).append(stepP);

    stepContainer.css('height', stepsHtml.height() - 25);

    //this.content.css('overflow','hidden')
    this.setProgressY(this.stepContainer, this.opt.curStep, this.opt.stepCounts)
    //判断参数 是否显示按钮 并绑定点击事件
    if(this.opt.showBtn) {
        this.content.append(stepButtonHtml)
        this.prevBtn = this.content.find(this.opt.prevBtn)
        this.nextBtn = this.content.find(this.opt.nextBtn)
        this.prevBtn.on('click', function() {
            // if($(this).hasClass('handleAble')){
            if($(_that).attr('disabled') || _that.opt.animating) {
                return false;
            } else {
                _that.opt.animating = true;
                _that.opt.curStep--;
                _that.setProgressY(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
            }
        })
        this.nextBtn.on('click', function() {
            // if($(this).hasClass('handleAble')){
            if($(_that).attr('disabled') || _that.opt.animating) {
                return false;
            } else {
                _that.opt.animating = true;
                _that.opt.curStep++;
                _that.setProgressY(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
            }
        })
    }
    //判断时候可点击进度条 并绑定点击事件
    if(this.opt.clickAble) {
        stepsHtml.find('li').on('click', function() {
            _that.opt.curStep = $(this).index() + 1;
            _that.setProgressY(_that.stepContainer, _that.opt.curStep, _that.opt.stepCounts)
        })
    }
}

//设置进度条y
SetStep.prototype.setProgressY = function(n, curIndex, stepsLen) {
    var _that = this;
    //获取当前容器下所有的步骤
    var $steps = $(n).find("li");
    var $progress = $(n).find(".ystep-progress-highlight");
    //判断当前步骤是否在范围内
    if(1 <= curIndex && curIndex <= $steps.length) {
        //更新进度
        var scale = "%";
        scale = Math.round((curIndex - 1) * 100 / ($steps.length - 1)) + scale;
        $progress.animate({
            height: scale
        }, {
            speed: 1000,
            done: function() {
                //移动节点
                $steps.each(function(j, m) {
                    var _$m = $(m);
                    var _j = j + 1;
                    if(_j < curIndex) {
                        _$m.attr("class", "ystep-step-done");
                    } else if(_j === curIndex) {
                        _$m.attr("class", "ystep-step-active");
                    } else if(_j > curIndex) {
                        _$m.attr("class", "ystep-step-undone");
                    }
                })
                if(_that.opt.showBtn) {
                    if(curIndex == 1) {
                        _that.prevBtn.attr('disabled', 'true')
                        _that.nextBtn.removeAttr('disabled')
                    } else if(curIndex == stepsLen) {
                        _that.prevBtn.removeAttr('disabled')
                        _that.nextBtn.attr('disabled', 'true')
                    } else if(1 < curIndex < stepsLen) {
                        _that.prevBtn.removeAttr('disabled')
                        _that.nextBtn.removeAttr('disabled')
                    }
                }
                _that.checkPage(_that.pageCont, _that.opt.curStep, _that.opt.stepCounts)
                _that.opt.animating = false;
            }
        });
    } else {
        return false;
    }
}

//设置进度条x
SetStep.prototype.setProgress = function(n, curIndex, stepsLen) {
    var _that = this;
    //获取当前容器下所有的步骤
    var $steps = $(n).find("li");
    var $progress = $(n).find(".ystep-progress-highlight");
    //判断当前步骤是否在范围内
    if(1 <= curIndex && curIndex <= $steps.length) {
        //更新进度
        var scale = "%";
        scale = Math.round((curIndex - 1) * 100 / ($steps.length - 1)) + scale;
        $progress.animate({
            width: scale
        }, {
            speed: 1000,
            done: function() {
                //移动节点
                $steps.each(function(j, m) {
                    var _$m = $(m);
                    var _j = j + 1;
                    if(_j < curIndex) {
                        _$m.attr("class", "ystep-step-done");
                    } else if(_j === curIndex) {
                        _$m.attr("class", "ystep-step-active");
                    } else if(_j > curIndex) {
                        _$m.attr("class", "ystep-step-undone");
                    }
                })
                if(_that.opt.showBtn) {
                    if(curIndex == 1) {
                        _that.prevBtn.attr('disabled', 'true')
                        _that.nextBtn.removeAttr('disabled')
                    } else if(curIndex == stepsLen) {
                        _that.prevBtn.removeAttr('disabled')
                        _that.nextBtn.attr('disabled', 'true')
                    } else if(1 < curIndex < stepsLen) {
                        _that.prevBtn.removeAttr('disabled')
                        _that.nextBtn.removeAttr('disabled')
                    }
                }
                _that.checkPage(_that.pageCont, _that.opt.curStep, _that.opt.stepCounts)
                _that.opt.animating = false;
            }
        });
    } else {
        return false;
    }
}
//改变 分页显示
SetStep.prototype.checkPage = function(pageCont, curStep, steps) {
    for(var i = 1; i <= steps; i++) {
        if(i === curStep) {
            pageCont.find('#page' + i).css("display", "block");
        } else {
            pageCont.find('#page' + i).css("display", "none");
        }
    }
}

以下是html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./step.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="./step.js"></script>
    <script type="text/javascript" src="./id.js"></script>
</head>
<body>

<!-- 菜单及分页容器-->
<div class="stepCont stepCont3">
    <!-- 菜单导航显示-->
    <div class='ystep-container ystep-lg ystep-blue'></div>
    <!-- 分页容器 如果没有可以不用-->
    <div class="pageCont">
        <div id="page1" class="stepPage">
            <h2>我是第一页的内容</h2>
        </div>
        <div id="page2" class="stepPage">
            <h2>我是第二页的内容</h2>
        </div>
        <div id="page3" class="stepPage">
            <h2>我是第三页的内容</h2>
        </div>
        <div id="page4" class="stepPage">
            <p>我是第四页的内容</p>
        </div>
        <div id="page5" class="stepPage">
            <p>我是第五页的内容</p>
        </div>
        <div id="page6" class="stepPage">
            <p>我是第六页的内容</p>
        </div>
    </div>
</div>

<script>
    let option = {
        content: '.stepCont3',
        steps: ['1', '2', '3', '4', '5','6'],           //步骤标题
        descriptionHeader: ['步骤一', '步骤二', '步骤三', '步骤四', '步骤五','步骤五1'],//步骤标题
        description: ['', '', '', '', '',''],   //步骤文本
        //pageClass:'',//分页的类或则id
        curStep: 1, //当前显示第几页
        animating: false,
        showBtn: true, //是否生成上一步下一步操作按钮
        clickAble: false, //是否可以通过点击进度条的节点操作进度
        onLoad: function() {

        }
    }

    var step = new SetStep(option);
    setInterval(()=>{
        console.log('我默认点击了下一步');
        step.nextBtn.click();
    },2000)
</script>
</body>
</html>
这个网名好记
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery实现步骤条效果(上一步,下一步)
chuangdiuzhuang6335的博客
08-02 4440
之前做出的步骤条是利用easyui +jquery实现的，但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效，所以换了一种方式，用Position。把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控...
jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)
weixin_35723352的博客
03-02 648
之前做出的步骤条是利用easyui +jquery实现的，但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效，所以换了一种方式，用Position。把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向(top,left,right,bottom)，达到一定的值，离开当前可是页面。先看效果图： 代码展...
jQuery图片自适应排列显示特效代码
03-20
jQuery图片自适应排列显示代码是一款基于jquery.flex-images插件实现的类似谷歌图片流效果。
jQuery动态数据步骤条特效
07-24
jQuery动态数据步骤条特效是一款用户事先设置好需要走的流程步骤，然后根据状态进行判断走到哪一步，审批意见是什么，支持动态数据配置步骤条特效。
css+jquery步骤进度条
timeless的博客
08-16 4629
progressbar .progress-wrap { margin-top: 200px; padding: 0px; width: 100%; height: 100px; } .progress-wrap li { margin-top: 30px; list-style: none; float: left; width: 300px; height: 30px;
jQuery学习
weixin_45813597的博客
08-29 1004
jQuery即 librery ，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如后去元素等。简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这样封装好的功能了。比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）...
JQuery步骤条
qq_36662478的博客
03-19 3883
JQuery步骤条 在做项目的时候需要一个步骤条，来根据订单的状态显示不同的信息。 首先是在GitHub上找到了一个开源的JQuery步骤条组件。（git地址：https://github.com/mateagar/progressStep） 1. 下载源代码 2. 将代码代码导入项目中 样式如下： 3. 修改源代码 由于和我的项目要求有些不同因此要对组件的css样式和js代码进行修改。...
jq步骤条 java,jQuery流程步骤进度条插件代码
weixin_42388898的博客
03-16 590
特效描述：jQuery 流程步骤进度条。jQuery流程步骤进度条插件代码代码结构1. 引入CSS2. 引入JS3. HTML代码//根据jQuery选择器找到需要加载ystep的容器//loadStep 方法可以初始化ystep$(".ystep1").loadStep({//ystep的外观大小//可选值：small,largesize: "small",//ystep配色方案//可选值：gr...
jquery实现点击步骤条变色，以及点击下一步变色
orangeTop的博客
08-02 3613
最近做项目需要用到步骤条，看了很多不是自己想要的，就借鉴了一下别人的，然后自己总结了一下，感觉可以用到很多项目上使用了。下面是同种风格的步骤条，两种变色方案： 1.先引入jquery的js 一般项目都要的 2.给一个div 放步骤条     3.js 遍历出步骤条     window.onload = function() {     var custCenterBo
steps.js 步骤条、时间轴
热门推荐
樊小书生
09-22 2万+
介绍 steps.js是基于原生JavaScript的组件，可用于展示步骤条、时间轴等，功能支持： 自适应 支持横向和纵向显示，并且横向还支持居中显示 支持自定义间距 主轴线上下左右单方向及多方向分布 支持数字和圆点及自定义图标，也可以使用图片 如果标题和详情还不足以满足您的需求，你还可以插入自定义的html代码 如果样式不满意，可以加入自定义的父类class，然后根据css的权重重新定义样式 ...
基于jquery开发的步骤条step.zip
08-31
步骤条在原来基础之上做了相应扩展，代码的地方都做了相应的标注，可以在此基础之上根据自己的需求进行更改，注意使用之前要引入相应的jq包，此插件兼容性很好能够兼容IE8以上，更多插件案例可以查看www.jq22.com网站
JQuery+EasyUI轻松实现步骤条效果
10-22
jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。通过本文给大家介绍JQuery+EasyUI轻松实现步骤条效果，需要的朋友参考下
jQuery-带节点步骤进度条插件
03-07
jQuery-带节点步骤进度条插件
很实用的步骤条
02-05
很漂亮 且很实用的步骤条 下载就可使用
jq带节点的步骤进度条
09-24
该功能是利用jq实现的步骤进度条，包括两种样式，输入步骤，展示事件进行到第几步，方便查看，简易上手的网页步骤流程进度条代码
jQuery自适应网站导航栏代码
06-24
总的来说，"jQuery自适应网站导航栏代码"提供了一个实用的工具，可以帮助开发者创建跨设备兼容的网站导航，确保无论用户使用何种设备，都能享受到优质的浏览体验。在实际开发中，还可以根据具体需求进行定制和扩展，...
jQuery自适应倒计时插件
06-24
jQuery自适应倒计时插件是一种在网页上实现动态时间显示的工具，它基于流行的JavaScript库jQuery构建，能够根据不同的设备和屏幕尺寸自动调整布局，为用户提供一致的用户体验。在这个插件中，主要使用了`jquery....
jQuery自适应焦点图片切换特效
07-14
本篇文章将深入探讨“jQuery自适应焦点图片切换特效”，这是一个利用jQuery库和SuperSlide插件实现的动态图片轮播功能，尤其适用于响应式布局，能够自动适应不同尺寸的屏幕。 首先，jQuery是一个广泛使用的...
jQuery.Step 步骤说明文档
sxj的专栏
04-20 980
【代码】jQuery.Step 步骤说明文档。
jQuery实现页面中所有的textarea元素高度根据内容自适应
最新发布
06-12
可以使用 jQuery 的自适应插件 `autosize` 来实现页面中所有的 textarea 元素高度根据内容自适应。以下是实现的步骤： 1. 引入 jQuery 库和 `autosize` 插件库： ```html <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js" integrity="sha512-7N2a5lDLbJQcTJ2zuFQI5G0PvT+Q/7zXN3nCfOI8v1Bz+J8Wj9n7ZxI+8P6BDDt5TJY5qOJN6o3N5OoQxVl5wQ==" crossorigin="anonymous"></script> ``` 2. 给页面中的所有 textarea 元素添加 `autosize` 类： ```html <textarea class="autosize"></textarea> ``` 3. 在 JavaScript 中初始化 `autosize` 插件： ```javascript $(function() { autosize($('.autosize')); }); ``` 这样，页面中所有的 textarea 元素就可以根据内容自适应高度了。需要注意的是，当 textarea 元素的内容改变时，插件会自动重新计算其高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值