jQuery步骤进度条控制代码

Html

Css


  
    
      
        填写申请表
      
      
        上传资料
      
      
        待确认
      
      
        已确认
      
      
        待受理
      
      
        已受理
      
      
        预约完成
      
      
        签证单已发放
      
    
  
  
    填写申请表
    上传资料
    待确认
    已确认
    待受理
    已受理
    预约完成
    签证单已发放

* {
	margin:0
}
.step-body {
	position:relative;
}
.step-header {
	width:100%;
	margin:0 auto;
	display:none;
}
.step-header ul {
	padding:0;
}
.step-header li {
	list-style-type:none;
	text-align:center;
	float:left;
	position:relative;
}
.step-header li p {
	margin-top:30px;
	margin-bottom:5px;
	font-size:14px;
	color:#625454;
}
.step-header li span {
	position:relative;
	margin:0 auto;
	font-size:18px;
	font-family:Arial;
	color:#625454;
	height:25px;
	line-height:25px;
	display:block;
}
.step-header li.step-active span {
	color:white;
}
.step-header li.step-active p {
	color:#466faa;
}
.step-bar,.step-bar-active {
	height:13px;
	border-radius:12px;
}
.step-bar {
	width:100%;
	position:relative;
	border-radius:12px;
	z-index:-1;
	height:5px;
	top:70px;
}
.step-bar-active {
	width:0px;
	height:5px;
}
.step-list {
	display:none;
	clear:both;
}

$(function() {

var step = $("#myStep").step();

$("#preBtn").click(function(event) {
        var yes = step.preStep(); //上一步
    });
    $("#nextBtn").click(function(event) {
        var yes = step.nextStep();
    });
    $("#goBtn").click(function(event) {
        var yes = step.goStep(3); //到指定步
    });
});

(function($) {
        $.fn.step = function(options) {
            var opts = $.extend({}, $.fn.step.defaults, options);
            var size = this.find(".step-header li").length;
            var barWidth = opts.initStep < size ? 100 / (2 * size) + 100 * (opts.initStep - 1) / size : 100;
            var curPage = opts.initStep;

this.find(".step-header").prepend("<div class=\"step-bar\"><div class=\"step-bar-active\"></div></div>");
            this.find(".step-list").eq(opts.initStep - 1).show();
            if (size < opts.initStep) {
                opts.initStep = size;
            }
            if (opts.animate == false) {
                opts.speed = 0;
            }
            this.find(".step-header li").each(function(i, li) {
                if (i < opts.initStep) {
                    $(li).addClass("step-active");
                }
                //$(li).prepend("<span>"+(i+1)+"</span>");
                $(li).append("<span>" + (i + 1) + "</span>");
            });
            this.find(".step-header li").css({
                "width": 100 / size + "%"
            });
            this.find(".step-header").show();
            this.find(".step-bar-active").animate({
                    "width": barWidth + "%"
                },
                opts.speed,
                function() {

});

this.nextStep = function() {
                if (curPage >= size) {
                    return false;
                }
                return this.goStep(curPage + 1);
            }

this.preStep = function() {
                if (curPage <= 1) {
                    return false;
                }
                return this.goStep(curPage - 1);
            }

this.goStep = function(page) {
                if (page == undefined || isNaN(page) || page < 0) {
                    if (window.console && window.console.error) {
                        console.error('the method goStep has a error,page:' + page);
                    }
                    return false;
                }
                curPage = page;
                this.find(".step-list").hide();
                this.find(".step-list").eq(curPage - 1).show();
                this.find(".step-header li").each(function(i, li) {
                    $li = $(li);
                    $li.removeClass('step-active');
                    if (i < page) {
                        $li.addClass('step-active');
                        if (opts.scrollTop) {
                            $('html,body').animate({
                                scrollTop: 0
                            }, 'slow');
                        }
                    }
                });
                barWidth = page < size ? 100 / (2 * size) + 100 * (page - 1) / size : 100;
                this.find(".step-bar-active").animate({
                        "width": barWidth + "%"
                    },
                    opts.speed,
                    function() {

});
                return true;
            }
            return this;
        };

$.fn.step.defaults = {
            animate: true,
            speed: 500,
            initStep: 1,
            scrollTop: true
        };

}));

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

jQuery步骤进度条控制代码



代码描述：jQuery步骤进度条控制代码,想要好看点自己调下样式即可

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

帮倒忙丶先森

相关代码

jQuery步骤进度条控制代码

最新